WeChat Mini Program Calendar
· 年月周日程视图 · 支持skyline和webview渲染 · 支持插件扩展
Mini program basic library SDKVersion
>= 3.0.0
npm i @lspriv/wx-calendar -S
WeChat applet development tool menu bar:工具
-->构建npm
official documentation
Configure in page or global configuration file
{
"usingComponents" : {
"calendar" : " @lspriv/wx-calendar "
}
}
Used in page wxml file
< 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 ) ;
}
} )
Important
Please perform the selectComponent('#calendar') operation after the bindload event.
The alpha branch is my working branch and the branch with the latest progress. The issue/* branch is to solve the problems mentioned in the issue. The develop branch is equivalent to SIT. Send PR to master for tagging. You can decide which branch to pull.
npm install
# 启动,默认skyline配置
npm run dev
# 设置webview
# npm run dev @webview 或者 npm run dev @W
npm run build
npm run package
Note
This package sending command performs three parts: packaging, sending and pushing to the warehouse, so there is no need to execute the packaging command repeatedly.
The test has not been written yet, will it be written when I have time?
You need to enable the following options, upper right corner of development tools -> Details -> Local Settings
usingComponents
in globalStyle
of pages.json
{
"globalStyle" : {
"wx-calendar" : " /components/wx-calendar "
}
}
Please refer to UniApp applet custom component support for matters needing attention.
Refer to Taro 使用原生模块
Note
If the Taro project references the native components of the mini program, the project will no longer have the ability to convert multiple terminals.
The following type definitions appear:
type CalendarDay = {
year : number ; // 年
month : number ; // 月
day : number ; // 日
} ;
All the following attributes are optional
property | type | illustrate | default value |
---|---|---|---|
view | string | view | month [week|schedule] |
marks | array | Agenda, badges and holiday markers | [] |
vibrate | boolean | Click whether the date will vibrate | true |
darkmode | boolean | Dark mode (follow the system) | true |
date | string|number | Selected date | xxxx-xx-xx|timestamp |
weekstart | number | First day of the week, 0|1|2|3|4|5|6 | 0 |
style | string | Set theme style variables | '' |
font | string | Set font | '' |
areas | array | Custom layout area | ['header', 'title', 'subinfo', 'today', 'viewbar', 'dragbar'] |
viewGesture | boolean | Whether to control the view with sliding gestures | true |
sameChecked | boolean | Keep the selected date style consistent | false |
customNavBar | boolean | Whether the page where the component is located has a customized navigation bar | true |
alignDate | string | Date arrangement (centered | baseline aligned) | center [center|baseline] |
showRest | boolean | Whether to display dates other than this month | true |
Tip
Version 1.7.0+ has removed the fixed view attribute, and added the gesture control attribute viewGesture
. The fixed view is implemented in the following way, with a higher degree of freedom.
New way to pin views
<!-- 固定为周视图 -->
<!-- view 默认初始视图 -->
<!-- view-gesture 取消手势控制 -->
<!-- areas 只保留四个区域,将viewbar和dragbar移除 -->
< calendar
view =" week "
view-gesture =" {{ false }} "
areas =" {{ ['header', 'title', 'subinfo', 'today'] }} "
/>
Tip
About attribute 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 > ;
}
The content of the subtitle should be one character long. Only the position of one character has been corrected. If there are any extra characters, please adjust the position yourself.
Important
If the page where the component is located does not have a custom navigation bar enabled, please set the attribute customNavBar
to false
bindload
calendar loading completed
type LoadEventDetail = {
checked : CalenderDay ; // 当前选择日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
range : [ start : CalenderDay , end : CalenderDay ] ; // 当前渲染的月份范围
}
Get component instance
< 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
date click
type LoadEventDetail = {
checked : CalenderDay ; // 当前点击日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
}
Note
Date click event, if necessary, please handle it by yourself
bindchange
selected change
type ChangeEventDetail = {
checked : CalenderDay ; // 当前选择日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
range : [ start : CalenderDay , end : CalenderDay ] ; // 当前渲染的月份范围
}
bindviewchange
panel view change
type ViewChangeEventDetail = {
checked : CalenderDay ; // 当前选择日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
}
bindschedule
click schedule trigger
type ScheduleEventDetail = {
schedules ?: Array < ScheduleEventDetail > ; // 所有日程
schedule ?: ScheduleEventDetail ; // 当前点击日程
all : boolean ; // 是否所有日程
}
checked
date
{
/**
* @param date 选中日期
* yyyy-mm-dd | timestamp | Date | CalendarDay
*/
( date : string | number | Date | CalendarDay ) : Promise < void > ;
}
toggleView
switch view
{
/**
* @param [view] 要切换的视图
* 当view未指定时,会在周月视图之间切换
*/
( view ?: 'month' | 'week' | 'schedule' ) : void ;
}
openAnuual
opens the annual panel
{
( ) : Promise < void > ;
}
getMarks
gets the complete date mark
{
/**
* @param date 获取日期
*/
( date : CalendarDay ) : PluginEntireMarks ;
}
getPlugin
gets the plug-in instance
{
/**
* @param key 插件的KEY
*/
( key : string ) : InstanceType < PluginConstructor > ;
}
updateDates
updates date data
{
/**
* 若不指定哪些日期更新,默认刷新全部
*/
( dates ?: Array < CalendarDay > ) : Promise < void > ;
}
The component has style isolation turned on. Only the font size and color number can be adjusted. You can modify the following css variables by passing in the style attribute to adjust the theme.
. 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 ; /** 年面板左上角年份标题右侧信息字体字号 */
}
Modify style
< calendar style =" --wc-bg-light: #000; " />
Due to the particularity of npm construction of mini programs, this component is not a pure js library. In order to obtain the correct type prompt, you need to specify the path in the jsconfig.json or tsconfig.json file in the root directory of the mini program.
{
"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 引入时的插件选项
}
}
Register the three life cycle hooks of the calendar component created
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 {
}
}
Add modification and deletion date stamps, and complete supplemental schedule data.
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 {
}
}
Captures the user's gesture action when the action is complete, but before the calendar component's default behavior.
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 { }
}
Note
There are seven main actions in this calendar statistics. Currently, only date click actions and date jump actions are captured. The seven actions are:
Respond to the calendar component event load
click
change
viewChange
.
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 } // 单点日期
]
}
}
数据标记
overwrites plug-in data introduced first动作捕捉
响应事件
events in the order in which the plug-ins are introduced, with those introduced first responding first. 有任何问题或是需求请到 `Issues` 面板提交 忙的时候还请见谅 有兴趣开发维护的道友加微信