wx calendar

WXカレンダー

WeChat ミニ プログラム カレンダー

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

デザイン

使用

ミニプログラム基本ライブラリSDKVersion >= 3.0.0

1.インストール

npm i @lspriv/wx-calendar -S

2.ビルド

WeChat アプレット開発ツールのメニュー バー:工具-->构建npm公式ドキュメント

3.構成の紹介

ページまたはグローバル構成ファイルで構成する

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

4. ページの使用方法

ページの wxml ファイルで使用されます

 < 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 ) ;
  }
} ) 

重要

bindload イベントの後に selectComponent('#calendar') オペレーションを実行してください。

二次開発

alpha ブランチは、私が作業しているブランチであり、issue/* ブランチは、issue で言及されている問題を解決するためのものです。devel ブランチは、タグ付けのために SIT に送信するブランチに相当します。引っ張る。

起動する

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

パック

npm run build

パッケージの送信 (パッケージのプレビュー)

npm run package

注記

このパッケージ送信コマンドは、パッケージング、送信、倉庫へのプッシュの 3 つの部分を実行するため、パッケージング コマンドを繰り返し実行する必要はありません。

テスト

テストはまだ書かれていません。時間があれば書きますか?

複数端末のサポート

ドーナツ

次のオプションを有効にする必要があります。開発ツールの右上隅 -> 詳細 -> ローカル設定

• SWCを使用してスクリプトファイルをコンパイルする
• ワークレットコードをコンパイルする
• Android XWeb SDK、project.miniapp.json で有効化

ユニアップ

1. プロジェクトのルート ディレクトリに wxcomponents フォルダーを作成し、パッケージ化されたファイルを dist にコピーして、wxcomponents/wx-calendar/** などの別のフォルダーに置きます。
2. pages.jsonのglobalStyleでusingComponents設定する

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

注意が必要な事項については、「UniApp アプレット カスタム コンポーネントのサポート」を参照してください。

タロウ

Taro 使用原生模块を参照してください。

注記

Taro プロジェクトがミニ プログラムのネイティブ コンポーネントを参照している場合、プロジェクトは複数の端末を変換できなくなります。

タイプの説明

次の型定義が表示されます。

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

小道具属性

次の属性はすべてオプションです

財産	タイプ	説明する	デフォルト値
ビュー	弦	ビュー	月 [週|スケジュール]
マーク	配列	アジェンダ、バッジ、休日のマーカー	[]
振動する	ブール値	日付が振動するかどうかをクリックします	真実
ダークモード	ブール値	ダークモード（システムに従います）	真実
日付	文字列|数値	選択した日付	xxxx-xx-xx|タイムスタンプ
週の始まり	番号	週の最初の日、0|1|2|3|4|5|6	0
スタイル	弦	テーマスタイル変数を設定する	」
フォント	弦	フォントを設定する	」
地域	配列	カスタムレイアウトエリア	['ヘッダー'、'タイトル'、'サブ情報'、'今日'、'ビューバー'、'ドラッグバー']
ビュージェスチャー	ブール値	スライドジェスチャでビューを制御するかどうか	真実
同じチェック済み	ブール値	選択した日付スタイルの一貫性を保つ	間違い
カスタムナビゲーションバー	ブール値	コンポーネントが配置されているページにカスタマイズされたナビゲーション バーがあるかどうか	真実
日付を揃える	弦	日付の配置 (中央揃え | ベースライン揃え)	中心 [中心|ベースライン]
ショー休憩	ブール値	今月以外の日付を表示するかどうか	真実

ヒント

バージョン 1.7.0 以降では、固定ビュー属性が削除され、ジェスチャ制御属性viewGestureが追加され、より自由度の高い固定ビューが次のように実装されます。

ビューを固定する新しい方法

 <!-- 固定为周视图 -->
<!-- view 默认初始视图 -->
<!-- view-gesture 取消手势控制 -->
<!-- areas 只保留四个区域，将viewbar和dragbar移除 -->
< calendar 
  view =" week "
  view-gesture =" {{ false }} "
  areas =" {{ ['header', 'title', 'subinfo', 'today'] }} "
/> 

ヒント

属性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 > ;
}

字幕の内容は1文字の位置のみ修正しておりますので、余分な文字がある場合はご自身で位置を調整してください。

重要

コンポーネントが配置されているページでカスタム ナビゲーション バーが有効になっていない場合は、 customNavBar属性をfalse

イベント

bindloadカレンダーのロードが完了しました

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

コンポーネントインスタンスの取得

 < 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日付クリック

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

注記

日付クリックイベントは必要に応じてご自身で処理してください

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 < ScheduleEventDetail > ; // 所有日程
    schedule ?: ScheduleEventDetail ; // 当前点击日程
    all : boolean ; // 是否所有日程
}

メソッド

checked日付

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

toggleViewビューを切り替える

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

openAnuual年次パネルを開きます

 {
  ( ) : Promise < void > ;
}

getMarks完全な日付マークを取得します

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

getPluginプラグイン インスタンスを取得します

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

updateDates日付データを更新します

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

スタイル

コンポーネントではスタイル分離がオンになっています。調整できるのはフォント サイズと色番号のみです。style 属性を渡すことで、次の CSS 変数を変更してテーマを調整できます。

. 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 ; /** 年面板左上角年份标题右侧信息字体字号 */ 
}

スタイルを変更する

 < calendar style =" --wc-bg-light: #000; " />

型チェック

ミニ プログラムの npm 構築の特殊性により、このコンポーネントは純粋な js ライブラリではありません。正しいタイプ プロンプトを取得するには、ルート ディレクトリにある jsconfig.json または tsconfig.json ファイルにパスを指定する必要があります。ミニプログラム。

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

ライフサイクル

created attached detacched解除されたカレンダー コンポーネントの 3 つのライフサイクル フックを登録します。

 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 {

  }
} 

データマークアップ

変更および削除の日付スタンプを追加し、補足スケジュール データを完成させます。

 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 {

  }
} 

モーションキャプチャー

ユーザーのジェスチャ アクションが完了したとき、ただしカレンダー コンポーネントのデフォルト動作の前に、そのアクションをキャプチャします。

 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 { }
} 

注記

このカレンダー統計には 7 つの主なアクションがあり、現在、日付クリック アクションと日付ジャンプ アクションのみがキャプチャされます。

• 日付をクリック
• 日付ジャンプ (今日ボタンをクリックして今日にジャンプするか、toDate メソッドを呼び出します)
• ヘッダーのタイトルをクリックします (年パネルを開きます)
• 表示ボタンのクリック (ボタンで表示が切り替わります)
• 垂直ジェスチャースライド（ジェスチャー切り替えビュー）
• 水平ジェスチャー スワイプ (スワイパー スライド スライダー)
• 年のパネルで月をクリックします (メインパネルが特定の月にジャンプします)

インシデント対応

カレンダー コンポーネント イベントのloadに応答して、 change viewChange 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 } // 单点日期
    ]
  }
} 

プラグインの説明

• 数据标记後に導入されたプラグインデータは、最初に導入されたプラグインデータを上書きします
• 动作捕捉後に最初に導入された実行
• プラグインが導入された順序でイベント响应事件、最初に導入されたものが最初に応答します。

完成したプラグイン

• @lspriv/wc-plugin-lunar 太陰暦プラグイン
• @lspriv/wc-plugin-disabled カレンダー無効化プラグイン
• @lspriv/wc-plugin-multiple カレンダー複数選択プラグイン
• @lspriv/wc-plugin-ics ICS カレンダー サブスクリプション プラグイン
• ロケールローカリゼーションプラグイン

について

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