微信小程序使用日历插件

﹏ヽ暗。殇╰゛Y 2022-12-23 14:22 469阅读 0赞

一，添加插件

1，在你的小程序关联的微信公众平台打开

设置》第三方服务》添加插件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

2，直接AppID（wx92c68dae5a8bb046）搜索到该插件并申请授权，授权成功即可在小程序使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1][]

二，小程序使用插件

app.json配置

"plugins": {
        "calendar": {
            "version": "1.1.3",
            "provider": "wx92c68dae5a8bb046"
        }
    },

使用插件页面的.json页面引入插件

index.json

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

index.wxml

index.js

//监听点击下个月事件
      next: function (event) {
        console.log(event.detail);
    },
    //监听点击上个月事件
    prev: function (event) {
      console.log(event.detail);
    },
    // 监听点击日历标题日期选择器事件
    dateChange: function (event) {
      console.log(event.detail);
    },
    //监听点击日历具体某一天的事件
    dayClick: function (event) {
      console.log(event.detail);
    },

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 2][]

![20201125141420748.png][]

三，修改样式

1，给点击的日期设置一个背景颜色

wxml

/**
       * 页面的初始数据
       */
      data: {
        dayStyle: [
          {month: 'current', day: new Date().getDate(), color: 'white', background: '#AAD4F5'},
          { month: 'current', day: new Date().getDate(), color: 'white', background: '#AAD4F5' }
        ],
      },
     
      //给点击的日期设置一个背景颜色
      dayClick: function (event) {
        let clickDay = event.detail.day;
        let changeBgColor = `dayStyle[0].color`;
        let changeBg = `dayStyle[0].background`;
        let changeDay = `dayStyle[1].day`;
        let changeEndBg = `dayStyle[1].background`;
     
        this.setData({
          [changeDay]: clickDay,
          [changeBg]:"rgba(255,255,255,0)",
          [changeBgColor]:"black",
          [changeEndBg]: "#AAD4F5"
        })

2,标题,插件背景，副标题

wxml

calendar-style="calendar" header-style="header"  board-style="board"

wxss

.calendar {
      background-color:white;  /*背景色为白色*/
      padding-top: 10px;       /*上内边距为 10px*/
      border-radius: 15px;     /*添加边框圆角*/
    }
    
    
    .header {
      font-size: large;
      /* color: #0081ff; */
      color: #59518d;   
    }
    
    .board {
      color: #c7cbe2;
      font-weight: bold;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 3][]

具体事件方法和属性可查看文档：

[https://github.com/czcaiwj/calendar/wiki/%E6%97%A5%E5%8E%86%E5%B1%9E%E6%80%A7%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3][https_github.com_czcaiwj_calendar_wiki_E6_97_A5_E5_8E_86_E5_B1_9E_E6_80_A7_E6_8E_A5_E5_8F_A3_E6_96_87_E6_A1_A3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: /images/20221120/33abc2a1201748219c1d64cd3c237c38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1]: /images/20221120/6d9283ef2e234a55a11e7093a8db9e11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020112514135641.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[20201125141420748.png]: https://img-blog.csdnimg.cn/20201125141420748.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201125150737322.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[https_github.com_czcaiwj_calendar_wiki_E6_97_A5_E5_8E_86_E5_B1_9E_E6_80_A7_E6_8E_A5_E5_8F_A3_E6_96_87_E6_A1_A3]: https://github.com/czcaiwj/calendar/wiki/%E6%97%A5%E5%8E%86%E5%B1%9E%E6%80%A7%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3