wx calendar
v1.8.0
WeChat Mini-Programmkalender
· 年月周日程视图 · 支持skyline和webview渲染 · 支持插件扩展
Basisbibliothek des Miniprogramms SDKVersion >= 3.0.0
npm i @lspriv/wx-calendar -S Menüleiste des WeChat-Applet-Entwicklungstools:工具-> Offizielle构建npm
Konfigurieren Sie in einer Seite oder einer globalen Konfigurationsdatei
{
"usingComponents" : {
"calendar" : " @lspriv/wx-calendar "
}
}Wird in der Seiten-WXML-Datei verwendet
< calendar id =" calendar " bindload =" handleLoad " /> const { WxCalendar } = require ( '@lspriv/wx-calendar/lib' ) ;
const { LunarPlugin } = require ( '@lspriv/wc-plugin-lunar' ) ;
// 使用农历插件
WxCalendar . use ( LunarPlugin ) ;
Page ( {
handleLoad ( detail ) {
conosle . log ( 'calendar load' , detail ) ;
}
} ) Wichtig
Bitte führen Sie den Vorgang selectComponent('#calendar') nach dem Bindload-Ereignis aus.
Der Alpha-Zweig ist mein Arbeitszweig und der Zweig „issue/*“ dient der Lösung der in der Ausgabe genannten Probleme. Der Zweig „develop“ entspricht dem Zweig „Sende PR“ zum Markieren ziehen.
npm install
# 启动，默认skyline配置
npm run dev
# 设置webview
# npm run dev @webview 或者 npm run dev @W npm run buildnpm run packageNotiz
Dieser Paketsendebefehl führt drei Teile aus: Verpacken, Senden und Pushen an das Lager, sodass der Verpackungsbefehl nicht wiederholt ausgeführt werden muss.
Der Test wurde noch nicht geschrieben. Wird er geschrieben, wenn ich Zeit habe?
Sie müssen die folgenden Optionen aktivieren: obere rechte Ecke der Entwicklungstools -> Details -> Lokale Einstellungen
usingComponents im globalStyle pages.json {
"globalStyle" : {
"wx-calendar" : " /components/wx-calendar "
}
}Bitte beachten Sie die Unterstützung für benutzerdefinierte UniApp-Applet-Komponenten für Angelegenheiten, die Ihrer Aufmerksamkeit bedürfen.
Taro 使用原生模块
Notiz
Wenn das Taro-Projekt auf die nativen Komponenten des Miniprogramms verweist, ist das Projekt nicht mehr in der Lage, mehrere Terminals zu konvertieren.
Die folgenden Typdefinitionen werden angezeigt:
type CalendarDay = {
year : number ; // 年
month : number ; // 月
day : number ; // 日
} ;Alle folgenden Attribute sind optional
| Eigentum | Typ | veranschaulichen | Standardwert |
|---|---|---|---|
| Sicht | Zeichenfolge | Sicht | Monat [Woche|Zeitplan] |
| Markierungen | Array | Agenda, Abzeichen und Feiertagsmarkierungen | [] |
| vibrieren | Boolescher Wert | Klicken Sie, ob das Datum vibrieren soll | WAHR |
| Dunkelmodus | Boolescher Wert | Dunkler Modus (folgen Sie dem System) | WAHR |
| Datum | Zeichenfolge|Nummer | Ausgewähltes Datum | xxxx-xx-xx|Zeitstempel |
| Wochenstart | Nummer | Erster Tag der Woche, 0|1|2|3|4|5|6 | 0 |
| Stil | Zeichenfolge | Legen Sie Themenstilvariablen fest | '' |
| Schriftart | Zeichenfolge | Schriftart festlegen | '' |
| Bereiche | Array | Benutzerdefinierter Layoutbereich | ['header', 'title', 'subinfo', 'today', 'viewbar', 'dragbar'] |
| viewGesture | Boolescher Wert | Ob die Ansicht mit Schiebegesten gesteuert werden soll | WAHR |
| gleichÜberprüft | Boolescher Wert | Halten Sie den ausgewählten Datumsstil konsistent | FALSCH |
| benutzerdefinierteNavBar | Boolescher Wert | Ob die Seite, auf der sich die Komponente befindet, über eine angepasste Navigationsleiste verfügt | WAHR |
| alignDate | Zeichenfolge | Datumsanordnung (zentriert | an der Grundlinie ausgerichtet) | Zentrum [Zentrum|Grundlinie] |
| anzeigenRuhe | Boolescher Wert | Ob andere Daten als dieser Monat angezeigt werden sollen | WAHR |
Tipp
In Version 1.7.0+ wurde das feste Ansichtsattribut entfernt und das Gestensteuerungsattribut viewGesture hinzugefügt. Die feste Ansicht wird auf folgende Weise mit einem höheren Freiheitsgrad implementiert.
Neue Möglichkeit, Ansichten anzuheften
<!-- 固定为周视图 -->
<!-- view 默认初始视图 -->
<!-- view-gesture 取消手势控制 -->
<!-- areas 只保留四个区域，将viewbar和dragbar移除 -->
< calendar
view =" week "
view-gesture =" {{ false }} "
areas =" {{ ['header', 'title', 'subinfo', 'today'] }} "
/> Tipp
Über marks
// 标记里的日期，要么输入年月日year｜month｜day，要么输入日期 date
type Mark = {
year ?: number ; // 年
month ?: number ; // 月
day ?: number ; // 日
date ?: string | number | Date ; // 日期 yyyy-mm-dd | timestamp | Date
type : 'schedule' | 'corner' | 'festival' | 'solar' ; // 日程｜角标｜节假日 | 日期文字
text : string ; // 内容
style ?: string | Record < string , string | number > ; // 标记样式
}
// 样式标记
type StyleMark = {
year ?: number ; // 年
month ?: number ; // 月
day ?: number ; // 日
date ?: string | number | Date ; // 日期 yyyy-mm-dd | timestamp |
style : string | Record < string , string | number > ;
}Der Inhalt des Untertitels sollte nur ein Zeichen lang sein. Wenn es zusätzliche Zeichen gibt, passen Sie die Position bitte selbst an.
Wichtig
Wenn auf der Seite, auf der sich die Komponente befindet, keine benutzerdefinierte Navigationsleiste aktiviert ist, setzen Sie bitte das Attribut customNavBar auf false
Das Laden bindload Kalenders ist abgeschlossen
type LoadEventDetail = {
checked : CalenderDay ; // 当前选择日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
range : [ start : CalenderDay , end : CalenderDay ] ; // 当前渲染的月份范围
}Komponenteninstanz abrufen
< calendar id =" calendar " bindload =" handleLoad " /> import { CalendarExport } from '@lspriv/wx-calendar/lib' ;
Page ( {
handleLoad ( ) {
const calendar = this . selectComponent ( '#calendar' ) as CalendarExport ;
// 如果你使用了其他插件，比如 WxCalendar.use(AnyPlugin)，则可以
// const calendar = ... as CalendarExport<[typeof AnyPlugin]>;
}
} ) ; bindclick Datumsklick
type LoadEventDetail = {
checked : CalenderDay ; // 当前点击日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
} Notiz
Datumsklick-Ereignis, falls erforderlich, kümmern Sie sich bitte selbst darum
bindchange ausgewählte Änderung
type ChangeEventDetail = {
checked : CalenderDay ; // 当前选择日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
range : [ start : CalenderDay , end : CalenderDay ] ; // 当前渲染的月份范围
} bindviewchange Panel-Ansichtsänderung
type ViewChangeEventDetail = {
checked : CalenderDay ; // 当前选择日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
} bindschedule Klick-Zeitplan-Trigger
type ScheduleEventDetail = {
schedules ?: Array < ScheduleEventDetail > ; // 所有日程
schedule ?: ScheduleEventDetail ; // 当前点击日程
all : boolean ; // 是否所有日程
} checked Datum
{
/**
* @param date 选中日期
* yyyy-mm-dd | timestamp | Date | CalendarDay
*/
( date : string | number | Date | CalendarDay ) : Promise < void > ;
} toggleView Ansicht wechseln
{
/**
* @param [view] 要切换的视图
* 当view未指定时，会在周月视图之间切换
*/
( view ?: 'month' | 'week' | 'schedule' ) : void ;
} openAnuual eröffnet das jährliche Panel
{
( ) : Promise < void > ;
} getMarks ruft die vollständige Datumsmarkierung ab
{
/**
* @param date 获取日期
*/
( date : CalendarDay ) : PluginEntireMarks ;
} getPlugin ruft die Plug-in-Instanz ab
{
/**
* @param key 插件的KEY
*/
( key : string ) : InstanceType < PluginConstructor > ;
} updateDates aktualisiert Datumsdaten
{
/**
* 若不指定哪些日期更新，默认刷新全部
*/
( dates ?: Array < CalendarDay > ) : Promise < void > ;
}Für die Komponente ist die Stilisolation aktiviert. Sie können die folgenden CSS-Variablen ändern, indem Sie das Stilattribut übergeben.
. wcc {
/* 浅色主题 */
--wc-bg-light : # FFF ; /* 主背景色 */
--wc-title-color-light : # 333 ; /* 左上角日期标题 */
--wc-title-sub-color-light : # 7A7A7A ; /* 左上角日期标题的右侧描述 */
--wc-opt-bg-light : # D9ECFF ; /* 视图控制背景色 */
--wc-opt-checked-bg-light : # 409EFF ; /* 视图控制按钮背景色 */
--wc-opt-color-light : # 409EFF ; /* 视图控制字体 */
--wc-opt-checked-color-light : # FFF ; /* 视图控制选中字体 */
--wc-week-color-light : # ABABAB ; /* 星期 */
--wc-date-color-light : # 333 ; /* 日期 */
--wc-mark-color-light : # ABABAB ; /* 日期下方信息 */
--wc-dot-color-light : # ABABAB ; /* 日期上方‘･’ */
--wc-schedule-color-light : # 409EFF ; /* 日程默认 */
--wc-schedule-bg-light : # EAEEF2 ; /* 日程默认背景 */
--wc-today-color-light : # 409EFF ; /* 日期（今日） */
--wc-solar-color-light : # 409EFF ; /* 日期下方信息默认（节气，节假日） */
--wc-checked-color-light : # 333 ; /* 被选日期 */
--wc-checked-mark-color-light : # ABABAB ; /* 被选日期下方信息 */
--wc-checked-dot-color-light : # ABABAB ; /* 被选日期上方‘･’ */
--wc-checked-today-color-light : # FFF ; /* 被选日期（今日） */
--wc-checked-bg-light : # F5F5F5 ; /* 被选日期背景圆圈 */
--wc-checked-today-bg-light : # 409EFF ; /* 被选日期背景圆圈（今日） */
--wc-control-bg-light : # DFDFDF ; /* 底部控制条背景 */
--wc-annual-bg-light : # FFF ; /* 年面板背景 */
--wc-annual-title-color-light : # 333 ; /* 年面板左上角标题 */
--wc-annual-title-sub-color-light : # 7A7A7A ; /* 年面板左上角标题右侧信息 */
/* 深色主题，以下和浅色主题一一对应 */
--wc-bg-dark : # 000 ;
--wc-title-color-dark : # E5E5E5 ;
--wc-title-sub-color-dark : # 7A7A7A ;
--wc-opt-bg-dark : # 332D2D80 ;
--wc-opt-checked-bg-dark : # 409EFF ;
--wc-opt-color-dark : # 409EFF ;
--wc-opt-checked-color-dark : # FFF ;
--wc-week-color-dark : # ABABAB ;
--wc-date-color-dark : # E5E5E5 ;
--wc-mark-color-dark : # 5F5F5F ;
--wc-dot-color-dark : # ABABAB ;
--wc-schedule-color-dark : # 66B1FF ;
--wc-schedule-bg-dark : # 332D2D80 ;
--wc-today-color-dark : # 409EFF ;
--wc-solar-color-dark : # 409EFF ;
--wc-checked-color-dark : # E5E5E5 ;
--wc-checked-mark-color-dark : # 5F5F5F ;
--wc-checked-dot-color-dark : # ABABAB ;
--wc-checked-today-color-dark : # E5E5E5 ;
--wc-checked-bg-dark : # 262626 ;
--wc-checked-today-bg-dark : # 409EFF ;
--wc-control-bg-dark : # 262626 ;
--wc-annual-bg-dark : # 000 ;
--wc-annual-title-color-dark : # E5E5E5 ;
--wc-annual-title-sub-color-dark : # 3F3F3F ;
/** 字号 */
--wc-title-size : 46 rpx ; /** 左上角日期标题字号 */
--wc-title-sub-size : 20 rpx ; /** 左上角日期标题右侧描述信息字号 */
--wc-operator-size : 22 rpx ; /** 视图控制按钮字号 */
--wc-week-size : 20 rpx ; /** 星期字号 */
--wc-date-size : 36 rpx ; /** 日期字体字号 */
--wc-mark-size : 20 rpx ; /** 日期下方信息字体字号 */
--wc-corner-size : 16 rpx ; /** 日期角标字体字号 */
--wc-schedule-size : 16 rpx ; /** 日程字体字号 */
--wc-annual-title-size : 50 rpx ; /** 年面板左上角年份标题字体字号 */
--wc-annual-title-sub-size : 18 rpx ; /** 年面板左上角年份标题右侧信息字体字号 */
}Stil ändern
< calendar style =" --wc-bg-light: #000; " />Aufgrund der Besonderheiten der npm-Konstruktion von Miniprogrammen handelt es sich bei dieser Komponente nicht um eine reine JS-Bibliothek. Um den richtigen Eingabeaufforderungstyp zu erhalten, müssen Sie den Pfad in der Datei jsconfig.json oder tsconfig.json im Stammverzeichnis von angeben Das Miniprogramm.
{
"compilerOptions" : {
"paths" : {
"@lspriv/wx-calendar/*" : [
" ./node_modules/@lspriv/wx-calendar/dist/* "
]
}
}
} const { WxCalendar } = require ( '@lspriv/wx-calendar/lib' ) ;
const { YourPlugin } = require ( 'anywhere' ) ;
// WxCalendar.clearPlugin(); 清理预设插件
WxCalendar . use ( YourPlugin , options ) ; // options 插件选项
Component ( {
...
} ) import { Plugin } from '@lspriv/wx-calendar/lib' ;
class MyPlugin implements Plugin {
/**
* 插件的 KEY 是必须的，没有此插件会被过滤掉
*/
static KEY = 'my-plugin' as const ;
/**
* 构造函数，参数为用户传入的插件选项。
* 此构造器可选择实现，如果没有提供选项配置或是其他初始化过程的话。
*/
constructor ( options ?: Record < string , any > ) {
// options 引入时的插件选项
}
} Registrieren Sie die drei Lebenszyklus-Hooks der created Kalenderkomponente attached detacched .
import { Plugin , PluginService , CalendarData } from '@lspriv/wx-calendar/lib' ;
class MyPlugin implements Plugin {
/**
* 插件初始化，可选择实现该方法
* 在日历组件 created 阶段最后，在插件实例化后
* @param service PliginService实例
*/
PLUGIN_INITIALIZE ( service : PluginService ) : void {
// 获取日历组件实例
const component = service . component ;
}
/**
* 组件挂载，可选择实现该方法
* 在日历组件 attached 阶段中，此时组件的所有工具类已完成实例化，视图数据即将更新。
* 你可以在此方法里修改视图更新数据 sets，还可以调整一些工具实例的初始值。
* @param service PliginService实例
* @param sets 视图数据
*/
PLUGIN_ON_ATTACH ( service : PluginService , sets : Partial < CalendarData > ) : void {
}
/**
* 组件销毁，可选择实现该方法
* 在日历组件 detacched 阶段中
* @param service PliginService实例
*/
PLUGIN_ON_DETACHED ( service : PluginService ) : void {
}
} Fügen Sie Änderungs- und Löschdatumsstempel hinzu und vervollständigen Sie ergänzende Zeitplandaten.
import {
Plugin ,
WcYear ,
CalendarDay ,
TrackDateResult ,
TrackYearResult ,
WcScheduleInfo ,
getMarkKey ,
getAnnualMarkKey
} from '@lspriv/wx-calendar/lib' ;
class MyPlugin implements Plugin {
/**
* 捕获日期，可选择实现该方法
* 在此添加修改和删除【周/月/日程视图面板】的日期标记
* @param date 日期
*/
PLUGIN_TRACK_DATE ( date : CalendarDay ) : TrackDateResult | null {
// do something...
return {
schedule : [ { text : '' , color : '' , bgColor : '' , key : getMarkKey ( 'id' , MyPlugin . KEY ) } ] , // 设置日程数组，可选
corner : { text : '' , color : '' } , // 设置角标，可选
festival : { text : '' , color : '' } , // 设置节假日，可选
style : { backgroundColor : '' , color : '' } // 设置日期样式，也可传字符串形式（如 'background-color: #409EFF;color: #fff;'），可选
} ;
} ;
/**
* 捕获年份，可选择实现该方法
* 在此添加修改和删除【年面板】的日期标记
* @param year 年
*/
PLUGIN_TRACK_YEAR ( year : WcYear ) : TrackYearResult | null {
// do something...
return {
subinfo : [
{ text : '乙巳蛇年' , color : '#F56C6C' } ,
{ text : '农历初一' , color : '#409EFF' }
] ,
marks : new Map ( [
[ getAnnualMarkKey ( { month : 10 , day : 6 } ) , { rwtype : 'rest' } ] , // 休息日，置灰
[ getAnnualMarkKey ( { month : 10 , day : 7 } ) , { rwtype : 'work' } ] , // 工作日，正常
[ getAnnualMarkKey ( { month : 10 , day : 12 } ) , { sub : '#F56C6C' } ] // 自定义颜色下标
[ getAnnualMarkKey ( { month : 10 , day : 20 } ) , {
style : {
color : { light : '#fff' , dark : '#000' } , // 日期字体颜色, light浅色模式下，dark深色模式下
bgColor : { light : '#409EFF' , dark : '#409EFF' } , // 日期背景颜色
opacity : { light : 1 , dark : 1 } , // 不支持 0
bgTLRadius : { light : 50 , dark : 50 } , // 日期背景左上圆角半径
bgTRRadius : { light : 0 , dark : 0 } , // 日期背景右上圆角半径
bgBLRadius : { light : 0 , dark : 0 } , // 日期背景左下圆角半径
bgBRRadius : { light : 50 , dark : 50 } , // 日期背景右下圆角半径
bgWidth : { light : 'dateCol' , dark : 'dateCol' } // 日期背景宽度，deteCol为列宽
}
} ]
] )
}
} ;
/**
* 捕获日程信息（点击日程时执行），可选择实现该方法
* @param date 日期
* @param id 插件内标记, 由 getMarkKey 生成 key 时传入的 id，详见 PLUGIN_TRACK_DATE
*/
PLUGIN_TRACK_SCHEDULE ( date : CalendarDay , id :? string ) : WcScheduleInfo {
}
} Erfasst die Gestenaktion des Benutzers, wenn die Aktion abgeschlossen ist, jedoch vor dem Standardverhalten der Kalenderkomponente.
import { Plugin , PluginService , EventIntercept } from '@lspriv/wx-calendar/lib' ;
class MyPlugin implements Plugin {
/**
* 拦截日期点击动作，可选择实现该方法
* @param service PliginService实例
* @param event 事件参数
* @param intercept 拦截器
*/
PLUGIN_CATCH_TAP ( service : PluginService , event : TouchEvent , intercept : EventIntercept ) : void {
// 获取日历组件实例
const component = service . component ;
// 若不想事件继续传播
if ( ... ) intercept ( ) ;
// intercept(0) 直接退出
// intercept(1) 继续向其他插件传播，但不会执行日历组件默认行为
}
/**
* 拦截日期跳转动作（如跳转到今日或者调用toDate方法），可选择实现该方法
* @param service PliginService实例
* @param date 要跳转的日期
* @param intercept 拦截器
*/
PLUGIN_CATCH_MANUAL ( service : PluginService , date : CalendarDay , intercept : EventIntercept ) : void { }
} Notiz
Es gibt sieben Hauptaktionen in dieser Kalenderstatistik. Derzeit werden nur Datumsklick-Aktionen und Datumssprung-Aktionen erfasst.
Reagieren Sie auf das load des Kalenderkomponentenereignisses, indem Sie auf viewChange change “ click .
import { Plugin , PluginService , CalendarEventDetail , OnceEmiter } from '@lspriv/wx-calendar/lib' ;
class MyPlugin implements Plugin {
/**
* 日历加载完成，可选择实现该方法
* @param service PliginService实例
* @param detail 响应数据
* @param emiter 事件触发器
*/
PLUGIN_ON_LOAD ( service : PluginService , detail : CalendarEventDetail , emiter : OnceEmiter ) : void {
// 获取日历组件实例
const component = service . component ;
emiter . cancel ( ) ; // 取消日历组件触发 bindload 事件。
// emiter.emit(detail); 劫持触发 bindload 事件，和 emiter.cancel 只能二选一。
}
/**
* 日期点击事件，可选择实现该方法
* @param service PliginService实例
* @param detail 响应数据
* @param emiter 事件触发器
*/
PLUGIN_ON_CLICK ( service : PluginService , detail : CalendarEventDetail , emiter : OnceEmiter ) : void {
}
/**
* 日期选中变化，可选择实现该方法
* @param service PliginService实例
* @param detail 响应数据
* @param emiter 事件触发器
*/
PLUGIN_ON_CHANGE ( service : PluginService , detail : CalendarEventDetail , emiter : OnceEmiter ) : void {
}
/**
* 视图变化，可选择实现该方法
* @param service PliginService实例
* @param detail 响应数据
* @param emiter 事件触发器
*/
PLUGIN_ON_VIEWCHANGE ( service : PluginService , detail : CalendarEventDetail , emiter : OnceEmiter ) : void {
}
} import { Plugin , CalendarDay , PluginService , DateRange } from '@lspriv/wx-calendar/lib' ;
class MyPlugin implements Plugin {
/**
* 日期过滤器（提供给其他组件调用的），可选择实现该方法
* @param service PliginService实例
* @param dates 待过滤的日期数组
*/
PLUGIN_DATES_FILTER ( service : PluginService , dates : Array < CalendarDay | DateRange > ) : Array < Calendar | DateRange > {
// 获取日历组件实例
const component = service . component ;
return [
[ { year : 2024 , month : 6 , day : 1 } , { year : 2024 , month : 6 , day : 28 } ] , // 日期范围
{ year : 2024 , month : 7 , day : 1 } // 单点日期
]
}
} 数据标记eingeführt werden, überschreiben zuerst eingeführte Plug-in-Daten动作捕捉eingeführt响应事件Ereignisse in der Reihenfolge, in der die Plug-Ins eingeführt werden, wobei die zuerst eingeführten Plug-Ins zuerst reagieren. 有任何问题或是需求请到 `Issues` 面板提交 忙的时候还请见谅 有兴趣开发维护的道友加微信
