wx-calendar

WX Calendar

微信小程序日历

· 年月周日程视图
· 支持skyline和webview渲染
· 支持插件扩展

设计

点此预览日历组件！

使用

小程序基础库 SDKVersion >= 3.0.0

1.安装

npm i @lspriv/wx-calendar -S

2.构建

微信小程序开发工具菜单栏：工具 --> 构建 npm 官方文档

3.引入配置

在页面或全局配置文件中配置

{
    "usingComponents": {
        "calendar": "@lspriv/wx-calendar"
    }
}

4.页面使用

在页面wxml文件中使用

const { WxCalendar } = require('@lspriv/wx-calendar/lib');
const { LunarPlugin } = require('@lspriv/wc-plugin-lunar');
// 使用农历插件
WxCalendar.use(LunarPlugin);

Page({
  handleLoad(detail) {
    console.log('calendar load', detail);
    
    const calendar = this.selectComponent('#calendar');
    console.log('calendar', calendar);
  }
})

5.类型检查

由于小程序构建npm的特殊性，日历组件本身是非纯js库，为了获得正确的的类型提示，需要在小程序根目录的jsconfig.json或是tsconfig.json文件中指明路径。

{
  "compilerOptions": {
    "paths": {
      "@lspriv/wx-calendar/*": [
          "./node_modules/@lspriv/wx-calendar/dist/*"
        ]
    }
  }
}

[!IMPORTANT] 请在 bindload 事件后执行 selectComponent('#calendar') 操作。

二次开发

alpha分支是最新开发分支，develop是测试包分支，master是稳定包分支

启动

npm install
# 启动，默认skyline配置
npm run dev
# 设置webview
# npm run dev @webview 或者 npm run dev @W

打包

npm run build

发包（预览包）

npm run package

[!NOTE] 这个发包命令执行了打包、发包和推送仓库三部分，所以不必重复执行打包命令

测试

测试尚未写完

多端支持

Donut

需要开启以下选项，开发工具右上角 -> 详情 -> 本地设置

• 使用 SWC 编译脚本文件
• 编译 worklet 代码
• Android XWeb SDK，在 project.miniapp.json中开启

UniApp

1. 项目根目录下创建 components 文件夹，将打包后dist里的文件拷贝过来放到单独的一个文件夹，比如 components/wx-calendar/**
2. 在 pages.json 的 globalStyle 中配置 usingComponents

   {
      "globalStyle": {
        "wx-calendar": "/components/wx-calendar"
      } 
   }
   

注意事项请参考 UniApp小程序自定义组件支持

Taro

请使用日历组件 Taro插件

[!NOTE] 如果在 Taro 项目引用了小程序原生的组件，那么该项目将不再具备多端转换的能力。

类型说明

以下出现的类型定义：

type CalendarDay = {
  year: number; // 年
  month: number; // 月
  day: number; // 日
};

Props 属性

以下所有属性都是可选填属性

    属性
    类型
    说明
    默认值




    view
    string
    视图
    month [week|schedule]




    marks
    array
    日程、角标和节假日标记
    []




    vibrate
    boolean
    点选日期是否震动
    true




    darkmode
    boolean
    深色模式（跟随系统）
    false




    date
    string|number
    选中日期
    xxxx-xx-xx|timestamp




    weekstart
    number
    周首日，0|1|2|3|4|5|6
    0




    style
    string
    设置主题样式变量
    ''




    font
    string
    设置字体
    ''




    areas
    array
    自定义布局区域
    ['header', 'title', 'subinfo', 'today', 'viewbar', 'dragbar']




    viewGesture
    boolean
    是否滑动手势控制视图
    true




    sameChecked
    boolean
    保持选中日期样式一致
    false




    customNavBar
    boolean
    组件所在页面是否自定义导航栏
    true




    alignDate
    string
    日期排布（居中｜基线对齐）
    center [center|baseline]




    showRest
    boolean
    非本月日期是否显示
    true

[!TIP] 1.7.0+版本已经移除了固定视图属性，新增手势控制属性 viewGesture ，用以下方式实现固定视图，有更高的自由度

固定视图的新方式

[!TIP] 关于属性 marks

// 标记里的日期，要么输入年月日year｜month｜day，要么输入日期 date
type CalendarMark = {
  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; // 标记样式
}
// 样式标记
type CalendarStyleMark = {
  year?: number; // 年
  month?: number; // 月 
  day?: number; // 日
  date?: string | number | Date; // 日期 yyyy-mm-dd | timestamp | 
  style: string | Record;
}

角标内容最好一个字符长度，只对一个字符校正了位置，多出的请自行调整位置

[!IMPORTANT] 如果组件所在页面未开启自定义导航栏，请设置属性 customNavBar 为 false

Events 事件

bindload 日历加载完成

type LoadEventDetail = {
    checked: CalenderDay; // 当前选择日期
    view: 'week' | 'month' | 'schedule'; // 当前视图
    range: [start: CalenderDay, end: CalenderDay]; // 当前渲染的月份范围
}

获取组件实例

import { CalendarExport } from '@lspriv/wx-calendar/lib';

Page({
  handleLoad() {
    const calendar = this.selectComponent('#calendar') as CalendarExport; 
    // 如果你使用了其他插件，比如 WxCalendar.use(AnyPlugin)，则可以
    // const calendar = ... as CalendarExport;
  }
});

bindclick 日期点击

type LoadEventDetail = {
    checked: CalenderDay; // 当前点击日期
    view: 'week' | 'month' | 'schedule'; // 当前视图
}

[!NOTE] 日期点击事件，若有必要请自行防抖处理

bindchange 日期选中变化

type ChangeEventDetail = {
    checked: CalenderDay; // 当前选择日期
    view: 'week' | 'month' | 'schedule'; // 当前视图
    range: [start: CalenderDay, end: CalenderDay]; // 当前渲染的月份范围
}

bindviewchange 面板视图变化

type ViewChangeEventDetail = {
    checked: CalenderDay; // 当前选择日期
    view: 'week' | 'month' | 'schedule'; // 当前视图
}

bindschedule 点击日程触发

type ScheduleEventDetail = {
    schedules?: Array; // 所有日程
    schedule?: ScheduleEventDetail; // 当前点击日程
    all: boolean; // 是否所有日程
}

Methods 方法

checked 选中日期

{
  /**
   * @param date 选中日期
   * yyyy-mm-dd | timestamp | Date | CalendarDay
   */
  (date: string | number | Date | CalendarDay): Promise;
}

toggleView 切换视图

{
  /**
   * @param [view] 要切换的视图
   * 当view未指定时，会在周月视图之间切换
   */
  (view?: 'month' | 'week' | 'schedule'): void;
}

openAnnual 打开年度面板

{
  (): Promise;
}

getMarks 获取完整的日期标记

{
  /**
   * @param date 获取日期
   */
  (date: CalendarDay): PluginEntireMarks;
}

getPlugin 获取插件实例

{
  /**
   * @param key 插件的KEY
   */
  (key: string): InstanceType;
}

updateDates 更新日期数据

{
  /**
   * 若不指定哪些日期更新，默认刷新全部
   */
  (dates?: Array): Promise;
}

样式

组件开启了样式隔离，仅可以调整字体大小和色号，可通过传入style属性修改以下css变量调整主题

…

修改样式

插件

插件使用

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) {
    // options 引入时的插件选项
  }
}

生命周期

注册日历组件的三个生命周期钩子 created attached detacched。

…

数据标记

添加修改和删除日期标记，以及完善补充日程数据。

…

动作捕捉

捕获用户的手势动作，此时动作已完成，但在日历组件默认行为之前。

…

[!NOTE] 本日历统计共有七个主要的动作，当前仅提供日期点击动作和日期跳转动作的捕获，七个动作分别是

• 日期点击
• 日期跳转（今日按钮点击跳转到今日或者调用toDate方法）
• 头部标题点击（打开年面板）
• 视图按钮点击（按钮切换视图）
• 垂直手势滑动（手势切换视图）
• 水平手势滑动（swiper滑动滑块）
• 年面板点击月份（主面板跳转到某月）

事件响应

响应日历组件事件 load click change viewChange。

…

其他

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): Array {
     // 获取日历组件实例
    const component = service.component;

    return [
      [{ year: 2024, month: 6, day: 1 } , { year: 2024, month: 6, day: 28 }], // 日期范围
      { year: 2024, month: 7, day: 1 } // 单点日期
    ]
  }
}

使用装饰器声明上述钩子

import { WcPlugin, Track, Catch, On, Filter } from '@lspriv/wx-calendar/lib';

export const MY_PLUGIN_KEY = 'my-plugin';

@WcPlugin(MY_PLUGIN_KEY) // 声明插件和KEY
class MyPlugin {

  @Track('date')
  trackDate() {}

  @Track('year')
  trackYear() {}

  @Catch('tap')
  catchTap() {}

  @On('load')
  onLoad() {}

  @Filter
  datesFilter() {}
}

插件说明

• 数据标记 后引入的插件数据覆盖先引入的插件数据
• 动作捕捉 后引入的先执行
• 响应事件 按插件的引入顺序响应事件，先引入的先响应

已完成插件

• @lspriv/wc-plugin-lunar 农历插件
• @lspriv/wc-plugin-disabled 日历禁用插件
• @lspriv/wc-plugin-multiple 日历多选插件
• @lspriv/wc-plugin-ics ICS日历订阅插件
• Locale本地化插件

关于

有任何问题或是需求请到 `Issues` 面板提交
忙的时候还请见谅
有兴趣开发维护的道友加微信