wx calendar
v1.8.0
Calendrier du mini-programme WeChat
· 年月周日程视图 · 支持skyline和webview渲染 · 支持插件扩展
Bibliothèque de base du mini programme SDKVersion >= 3.0.0
npm i @lspriv/wx-calendar -S Barre de menu de l'outil de développement d'applet WeChat :工具-> Documentation officielle构建npm
Configurer dans la page ou dans le fichier de configuration globale
{
"usingComponents" : {
"calendar" : " @lspriv/wx-calendar "
}
}Utilisé dans le fichier wxml de la page
< 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
Veuillez effectuer l'opération selectComponent('#calendar') après l'événement bindload.
La branche alpha est ma branche de travail et la branche avec les derniers progrès. La branche issue/* sert à résoudre les problèmes mentionnés dans le problème. La branche de développement est équivalente à SIT. Envoyer PR au maître pour le balisage. tirer.
npm install
# 启动，默认skyline配置
npm run dev
# 设置webview
# npm run dev @webview 或者 npm run dev @W npm run buildnpm run packageNote
Cette commande d'envoi de colis effectue trois parties : l'emballage, l'envoi et le transfert vers l'entrepôt, il n'est donc pas nécessaire d'exécuter la commande d'emballage à plusieurs reprises.
Le test n’a pas encore été écrit, le sera-t-il quand j’aurai le temps ?
Vous devez activer les options suivantes, coin supérieur droit des outils de développement -> Détails -> Paramètres locaux
usingComponents dans globalStyle de pages.json {
"globalStyle" : {
"wx-calendar" : " /components/wx-calendar "
}
}Veuillez vous référer à la prise en charge des composants personnalisés de l'applet UniApp pour les questions nécessitant une attention particulière.
Référez-vous à Taro 使用原生模块
Note
Si le projet Taro référence les composants natifs du mini programme, le projet n'aura plus la possibilité de convertir plusieurs terminaux.
Les définitions de type suivantes apparaissent :
type CalendarDay = {
year : number ; // 年
month : number ; // 月
day : number ; // 日
} ;Tous les attributs suivants sont facultatifs
| propriété | taper | illustrer | valeur par défaut |
|---|---|---|---|
| voir | chaîne | voir | mois [semaine|horaire] |
| marques | tableau | Agenda, badges et marqueurs de vacances | [] |
| vibrer | booléen | Cliquez si la date vibre | vrai |
| mode sombre | booléen | Mode sombre (suivre le système) | vrai |
| date | chaîne|numéro | Date sélectionnée | xxxx-xx-xx|horodatage |
| début de semaine | nombre | Premier jour de la semaine, 0|1|2|3|4|5|6 | 0 |
| style | chaîne | Définir les variables de style de thème | '' |
| fonte | chaîne | Définir la police | '' |
| domaines | tableau | Zone de mise en page personnalisée | ['en-tête', 'titre', 'sous-info', 'aujourd'hui', 'viewbar', 'dragbar'] |
| vueGeste | booléen | S'il faut contrôler la vue avec des gestes coulissants | vrai |
| mêmeVérifié | booléen | Gardez le style de date sélectionné cohérent | FAUX |
| barre de navigation personnalisée | booléen | Si la page où se trouve le composant possède une barre de navigation personnalisée | vrai |
| alignDate | chaîne | Disposition des dates (centrée | alignée sur la ligne de base) | centre [centre|ligne de base] |
| afficherRepos | booléen | S'il faut afficher des dates autres que ce mois-ci | vrai |
Conseil
La version 1.7.0+ a supprimé l'attribut de vue fixe et ajouté l'attribut de contrôle gestuel viewGesture . La vue fixe est implémentée de la manière suivante, avec un degré de liberté plus élevé.
Nouvelle façon d'épingler des vues
<!-- 固定为周视图 -->
<!-- view 默认初始视图 -->
<!-- view-gesture 取消手势控制 -->
<!-- areas 只保留四个区域，将viewbar和dragbar移除 -->
< calendar
view =" week "
view-gesture =" {{ false }} "
areas =" {{ ['header', 'title', 'subinfo', 'today'] }} "
/> Conseil
À propos marks d'attribut
// 标记里的日期，要么输入年月日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 > ;
}Le contenu du sous-titre doit comporter un caractère. Seule la position d'un caractère a été corrigée. S'il y a des caractères supplémentaires, veuillez ajuster la position vous-même.
Important
Si la page où se trouve le composant n'a pas de barre de navigation personnalisée activée, veuillez définir l'attribut customNavBar sur false
chargement du calendrier bindload terminé
type LoadEventDetail = {
checked : CalenderDay ; // 当前选择日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
range : [ start : CalenderDay , end : CalenderDay ] ; // 当前渲染的月份范围
}Obtenir une instance de composant
< 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 clic
type LoadEventDetail = {
checked : CalenderDay ; // 当前点击日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
} Note
Événement de clic de date, si nécessaire, veuillez le gérer vous-même
bindchange modification sélectionnée
type ChangeEventDetail = {
checked : CalenderDay ; // 当前选择日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
range : [ start : CalenderDay , end : CalenderDay ] ; // 当前渲染的月份范围
} changement de vue du panneau bindviewchange
type ViewChangeEventDetail = {
checked : CalenderDay ; // 当前选择日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
} déclencheur de planification de clics bindschedule
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 changer de vue
{
/**
* @param [view] 要切换的视图
* 当view未指定时，会在周月视图之间切换
*/
( view ?: 'month' | 'week' | 'schedule' ) : void ;
} openAnuual ouvre le panel annuel
{
( ) : Promise < void > ;
} getMarks obtient la marque de date complète
{
/**
* @param date 获取日期
*/
( date : CalendarDay ) : PluginEntireMarks ;
} getPlugin récupère l'instance du plug-in
{
/**
* @param key 插件的KEY
*/
( key : string ) : InstanceType < PluginConstructor > ;
} updateDates met à jour les données de date
{
/**
* 若不指定哪些日期更新，默认刷新全部
*/
( dates ?: Array < CalendarDay > ) : Promise < void > ;
}Le composant a l'isolation de style activée. Seules la taille de la police et le numéro de couleur peuvent être ajustés. Vous pouvez modifier les variables CSS suivantes en passant l'attribut style pour ajuster le thème.
. 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 ; /** 年面板左上角年份标题右侧信息字体字号 */
}Modifier le style
< calendar style =" --wc-bg-light: #000; " />En raison de la particularité de la construction npm des mini-programmes, ce composant n'est pas une pure bibliothèque js. Afin d'obtenir l'invite de type correcte, vous devez spécifier le chemin dans le fichier jsconfig.json ou tsconfig.json dans le répertoire racine de. le mini programme.
{
"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 引入时的插件选项
}
} Enregistrez les trois hooks de cycle de vie du composant de calendrier 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 {
}
} Ajoutez des horodatages de modification et de suppression et complétez les données de planification supplémentaires.
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 {
}
} Capture l'action gestuelle de l'utilisateur lorsque l'action est terminée, mais avant le comportement par défaut du composant de calendrier.
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
Il y a sept actions principales dans ces statistiques de calendrier, seules les actions de clic sur la date et les actions de saut de date sont capturées.
Répondez au load de l'événement du composant de calendrier, 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 } // 单点日期
]
}
} 数据标记écrasent les données du plug-in introduites en premier动作捕捉响应事件événements dans l'ordre dans lequel les plug-ins sont introduits, ceux introduits en premier répondant en premier. 有任何问题或是需求请到 `Issues` 面板提交 忙的时候还请见谅 有兴趣开发维护的道友加微信
