推薦簡約漂亮的小程式外掛 calendar

coding01發表於2018-06-29

公司團隊製作，主要用於內部使用，覺得這個感覺不錯，所以推薦出來，讓大家試試~

日曆功能

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

先睹為快

IMG_2556

使用方法：

1、 在微信小程式管理後臺——設定——第三方服務，按 AppID（ wx23a9cef3522e4f7c）搜尋到該外掛並申請授權。

2、在要使用該外掛的小程式 app.json 檔案中引入外掛宣告。

"plugins": {
    "calendar": {
        "version": "1.0.0",
        "provider": "wx23a9cef3522e4f7c"
    }
}
複製程式碼

3、在需要使用到該外掛的小程式頁面的 JSON 配置檔案中，做以下配置：

{
  "usingComponents": {
    "calendar": "plugin://calendar/calendar"
  }
}
複製程式碼

4、在相應的 HTML 頁面中新增以下語句即可完成外掛的嵌入。

<calendar />
複製程式碼

5、說明：預設的用法，將具備以下樣式特點：

  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' />
複製程式碼

相關文章