推薦簡約漂亮的小程序插件 calendar

公司團隊製做，主要用於內部使用，以爲這個感受不錯，因此推薦出來，讓你們試試~

日曆功能

日曆基本功能，自定義樣式

先睹爲快

使用方法：

一、 在微信小程序管理後臺——設置——第三方服務，按 AppID（ wx23a9cef3522e4f7c）搜索到該插件並申請受權。

二、在要使用該插件的小程序 app.json 文件中引入插件聲明。

"plugins": {
    "calendar": {
        "version": "1.0.0",
        "provider": "wx23a9cef3522e4f7c"
    }
}

三、在須要使用到該插件的小程序頁面的 JSON 配置文件中，作如下配置：

{
  "usingComponents": {
    "calendar": "plugin://calendar/calendar"
  }
}

四、在相應的 HTML 頁面中添加如下語句便可完成插件的嵌入。

<calendar />

五、說明：默認的用法，將具有如下樣式特色：

1. 顯示當前月份的日曆；
2. 顯示日曆標題、顯示上下月按鈕；
3. 顯示周標題，周標題默認爲 cn 類型，即中文簡寫；
4. 顯示日期下方的小圓點；

屬性名	類型	默認值	說明
curYear	Number	當前年份	年份
curMonth	Number	當前月份	月份 (0 - 11)
day	Number	當前日期	日期 (1-31 若日期超過該月天數，月份自動增長)
header_show	Boolean	true	主標題是否顯示
next	Boolean	true	是否顯示下個月按鈕
prev	Boolean	true	是否顯示下個月按鈕
remark_show	Boolean	false	備註是否顯示
remark_style	String	headline	備註類型
count_num	Number	0	備註類型爲date 備註信息1
count_ber	Number	0	備註類型爲date 備註信息2
count_txt	String	此處爲備註信息	備註類型爲headline 備註信息
weekTitle_show	Boolean	true	周標題是否顯示
week_type	String	cn	周標題類型
active_type	String	circle	選中日期樣式
circle_show	Boolean	true	日期下方的點是否顯示（每過一天添加一個）
pitch_on	String	circle	日期下方的點樣式
appear	Boolean	false	樣式線是否顯示
mystatus	Array	[ ]	想要的對應日期的狀態

<calendar 
cur-year="{{curYear}}"
cur-month="{{curMonth}}" 
day="{{day}}" 
header_show='{{header_show}}' 
prev='{{prev}}' 
next='{{next}}' 
/>

data: {
    curYear: new Date().getFullYear(), // 年份
    curMonth: new Date().getMonth(),// 月份 0-11
    day: new Date().getDate(), // 日期 1-31 若日期超過該月天數，月份自動增長
    header_show: true, // 主標題是否顯示
    prev: true, // 上一個月按鈕是否顯示
    next: true, // 下一個月按鈕是否顯示
  },

remark_style 有效值

值	說明
headline	普通備註
date	出勤備註

week_type 有效值

值	說明
cn	顯示爲：日, 一, 二, 三, 四, 五, 六
en	顯示爲：S, M, T, W, T, F, S
full-en	顯示爲：Sun, Mon, Tue, Wed, Thu, Fri, Sat

active_type 有效值

值	說明
circle	圓形背景
square	方形背景

pitch_on 有效值

值	說明
circle	圓形背景
square	方形背景

事件

注： 在js寫方法 在html傳入

事件方法	說明
nextMonth	點擊下個月
prevMonth	點擊上個月
selectDate	點擊日期

<calendar bindselectDate='selectDate'  bindnextMonth='nextMonth' bindprevMonth='prevMonth'/>

/**
    * 點擊上個月
    */
  nextMonth: function (e) {
    console.log(e)
    const currentYear = e.detail.currentYear;
    const currentMonth = e.detail.currentMonth;
    wx.showModal({
      title: '當前日期',
      content: '當前年份：' + currentYear + '年\n當前月份：' + currentMonth + '月'
    });
  },

樣式

類名	說明
calendar-style	日曆總體樣式
header-style	主標題樣式
weektitle-style	周標題面板樣式
datatitle-style	日期面板樣式
dotcolor-o	對應日期的狀態爲1 日期下方的點顏色變化 demo模擬的出勤狀況 0:未出勤 1:正常出勤 2:事假 3:病假 9:休息
dotcolor-t	對應日期的狀態爲其餘 日期下方的點顏色變化 demo模擬的出勤狀況 0:未出勤 1:正常出勤 2:事假 3:病假 9:休息
headline-style	備註類型爲headline的備註信息樣式
atefont-style	日期字體樣式

注： 在wxss自定義寫樣式 在html傳入

例：

/* 主題面板樣式  */
.header-style{
  background: #188be4 ;  
  color: #fff;
}

<calendar header-style='header-style' />