wx calendar
v1.8.0
Calendario del miniprograma WeChat
· 年月周日程视图 · 支持skyline和webview渲染 · 支持插件扩展
Biblioteca básica del mini programa SDKVersion >= 3.0.0
npm i @lspriv/wx-calendar -S Barra de menú de la herramienta de desarrollo de subprogramas WeChat:工具->构建npm documentación oficial de npm
Configurar en página o archivo de configuración global
{
"usingComponents" : {
"calendar" : " @lspriv/wx-calendar "
}
}Utilizado en el archivo wxml de la página
< 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 ) ;
}
} ) Importante
Realice la operación selectComponent('#calendar') después del evento de carga de enlace.
La rama alfa es mi rama de trabajo y la rama con el último progreso. La rama problema/* es para resolver los problemas mencionados en el problema. La rama de desarrollo es equivalente a enviar PR al maestro para etiquetar. para tirar.
npm install
# 启动，默认skyline配置
npm run dev
# 设置webview
# npm run dev @webview 或者 npm run dev @W npm run buildnpm run packageNota
Este comando de envío de paquetes realiza tres partes: empaquetar, enviar y enviar al almacén, por lo que no es necesario ejecutar el comando de empaque repetidamente.
La prueba aún no se ha escrito, ¿se escribirá cuando tenga tiempo?
Debe habilitar las siguientes opciones, esquina superior derecha de las herramientas de desarrollo -> Detalles -> Configuración local
usingComponents en globalStyle de pages.json {
"globalStyle" : {
"wx-calendar" : " /components/wx-calendar "
}
}Consulte el soporte de componentes personalizados del subprograma UniApp para conocer los asuntos que requieren atención.
Consulte Taro 使用原生模块
Nota
Si el proyecto Taro hace referencia a los componentes nativos del miniprograma, el proyecto ya no tendrá la capacidad de convertir múltiples terminales.
Aparecen las siguientes definiciones de tipo:
type CalendarDay = {
year : number ; // 年
month : number ; // 月
day : number ; // 日
} ;Todos los siguientes atributos son opcionales
| propiedad | tipo | ilustrar | valor predeterminado |
|---|---|---|---|
| vista | cadena | vista | mes [semana|horario] |
| marcas | formación | Agenda, insignias y marcadores de vacaciones | [] |
| vibrar | booleano | Haga clic si la fecha vibrará | verdadero |
| modo oscuro | booleano | Modo oscuro (sigue el sistema) | verdadero |
| fecha | cadena|número | Fecha seleccionada | xxxx-xx-xx|marca de tiempo |
| inicio de semana | número | Primer día de la semana, 0|1|2|3|4|5|6 | 0 |
| estilo | cadena | Establecer variables de estilo de tema | '' |
| fuente | cadena | Establecer fuente | '' |
| áreas | formación | Área de diseño personalizado | ['encabezado', 'título', 'subinformación', 'hoy', 'barra de vista', 'barra de arrastre'] |
| verGesto | booleano | Ya sea para controlar la vista con gestos deslizantes | verdadero |
| mismoComprobado | booleano | Mantenga consistente el estilo de fecha seleccionado | FALSO |
| barra de navegación personalizada | booleano | Si la página donde se encuentra el componente tiene una barra de navegación personalizada | verdadero |
| alinear fecha | cadena | Disposición de la fecha (centrada | línea base alineada) | centro [centro|línea base] |
| mostrarDescanso | booleano | Si se muestran fechas distintas a este mes | verdadero |
Consejo
La versión 1.7.0+ eliminó el atributo de vista fija y agregó el atributo de control de gestos viewGesture . La vista fija se implementa de la siguiente manera, con un mayor grado de libertad.
Nueva forma de fijar vistas
<!-- 固定为周视图 -->
<!-- view 默认初始视图 -->
<!-- view-gesture 取消手势控制 -->
<!-- areas 只保留四个区域，将viewbar和dragbar移除 -->
< calendar
view =" week "
view-gesture =" {{ false }} "
areas =" {{ ['header', 'title', 'subinfo', 'today'] }} "
/> Consejo
Acerca de marks de atributo
// 标记里的日期，要么输入年月日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 > ;
}El contenido del subtítulo debe tener un carácter. Solo se ha corregido la posición de un carácter. Si hay caracteres adicionales, ajuste la posición usted mismo.
Importante
Si la página donde se encuentra el componente no tiene habilitada una barra de navegación personalizada, establezca el atributo customNavBar en false
carga del calendario bindload completada
type LoadEventDetail = {
checked : CalenderDay ; // 当前选择日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
range : [ start : CalenderDay , end : CalenderDay ] ; // 当前渲染的月份范围
}Obtener instancia de componente
< 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 la fecha hacer clic
type LoadEventDetail = {
checked : CalenderDay ; // 当前点击日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
} Nota
Evento de clic de fecha, si es necesario, manéjelo usted mismo
bindchange cambio seleccionado
type ChangeEventDetail = {
checked : CalenderDay ; // 当前选择日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
range : [ start : CalenderDay , end : CalenderDay ] ; // 当前渲染的月份范围
} cambio de vista del panel bindviewchange
type ViewChangeEventDetail = {
checked : CalenderDay ; // 当前选择日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
} bindschedule haga clic en el activador de programación
type ScheduleEventDetail = {
schedules ?: Array < ScheduleEventDetail > ; // 所有日程
schedule ?: ScheduleEventDetail ; // 当前点击日程
all : boolean ; // 是否所有日程
} checked
{
/**
* @param date 选中日期
* yyyy-mm-dd | timestamp | Date | CalendarDay
*/
( date : string | number | Date | CalendarDay ) : Promise < void > ;
} toggleView cambiar vista
{
/**
* @param [view] 要切换的视图
* 当view未指定时，会在周月视图之间切换
*/
( view ?: 'month' | 'week' | 'schedule' ) : void ;
} openAnuual abre el panel anual
{
( ) : Promise < void > ;
} getMarks obtiene la marca de fecha completa
{
/**
* @param date 获取日期
*/
( date : CalendarDay ) : PluginEntireMarks ;
} getPlugin obtiene la instancia del complemento
{
/**
* @param key 插件的KEY
*/
( key : string ) : InstanceType < PluginConstructor > ;
} updateDates actualiza los datos de la fecha
{
/**
* 若不指定哪些日期更新，默认刷新全部
*/
( dates ?: Array < CalendarDay > ) : Promise < void > ;
}El componente tiene activado el aislamiento de estilo. Solo se puede ajustar el tamaño de fuente y el número de color. Puede modificar las siguientes variables CSS pasando el atributo de estilo para ajustar el tema.
. 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 ; /** 年面板左上角年份标题右侧信息字体字号 */
}Modificar estilo
< calendar style =" --wc-bg-light: #000; " />Debido a la particularidad de la construcción npm de miniprogramas, este componente no es una biblioteca js pura. Para obtener el mensaje de tipo correcto, debe especificar la ruta en el archivo jsconfig.json o tsconfig.json en el directorio raíz de. El miniprograma.
{
"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 引入时的插件选项
}
} Registre los tres ganchos del ciclo de vida del componente de calendario created detacched attached .
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 {
}
} Agregue sellos de fecha de modificación y eliminación y complete datos de programación complementarios.
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 {
}
} Captura la acción del gesto del usuario cuando se completa la acción, pero antes del comportamiento predeterminado del componente de calendario.
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 { }
} Nota
Hay siete acciones principales en las estadísticas de este calendario. Actualmente, solo se capturan las acciones de clic en fecha y las acciones de salto de fecha. Las siete acciones son:
Responda a la load del evento del componente del calendario, 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 } // 单点日期
]
}
} 数据标记sobrescribe los datos del complemento introducidos primero动作捕捉响应事件los eventos en el orden en que se introducen los complementos, y los que se introducen primero responden primero. 有任何问题或是需求请到 `Issues` 面板提交 忙的时候还请见谅 有兴趣开发维护的道友加微信
