小程序日历插件

Posted 2020-11-06 Faded露露

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序日历插件相关的知识，希望对你有一定的参考价值。

首先引入第三方极点日历插件

wxml

<view class="container-fluid">
     <text class="title">Demo1</text>
    <view class="calendar-box">
        <view class="left">
            <view class="today">
                <text>{{day}}</text>
                <text class="monthStr">{{str}}</text>
            </view>            
        </view>
        <view class="right">
            <calendar header="{{false}}" cell-size="40" days-color="{{demo1_days_style}}" active-type="square" />
        </view>
    </view>
     <text class="title">Demo2</text> 
    <view class="demo2">
        <view class="cal_header">
          <text>取消</text>
          <text>选择出发时间</text>
          <text>确定</text>
        </view>
        <view class="time_unlimited">
            <text>不限</text>
        </view>
        <calendar cell-size="30" days-color="{{demo2_days_style}}" header-style="demo2-header" board-style="demo2-board" weeks-type="cn" bindnextMonth="next"   bindprevMonth="prev"   binddateChange="dateChange" binddayClick="dayClick" />
    </view>
    <text class="title">Demo3</text>
    <view class="demo3">
        <calendar cell-size="30" header-style="demo3-header" board-style="demo3-board" weeks-type="cn" />
    </view>
     <text class="title">Demo4</text>
    <view class="demo4">
        <calendar 
        weeks-type="cn" 
        cell-size="30" 
        next="{{false}}" prev="{{false}}" show-more-days="{{true}}"
        calendar-style="demo4-calendar" 
        header-style="demo4-header" 
        board-style="demo4-board" 
        days-color="{{demo4_days_style}}" 
        />
    </view>
    <text class="title">Demo5</text>
    <view class="demo5">
        <calendar        
        cell-size="30" 
        next="{{false}}" prev="{{false}}" show-more-days="{{true}}"
        calendar-style="demo5-calendar" 
        header-style="demo5-header" 
        board-style="demo5-board" 
        days-color="{{demo5_days_style}}" 
        />
    </view>
    <text class="title">Demo6</text>
    <view class="demo6">
        <calendar       
        weeks-type="full-en"  
        cell-size="30" 
        next="{{false}}" prev="{{false}}" show-more-days="{{true}}"
        calendar-style="demo6-calendar" 
        header-style="demo6-header" 
        board-style="demo6-board" 
        days-color="{{demo6_days_style}}" 
        bindnextMonth="next"   bindprevMonth="prev"   binddateChange="dateChange" binddayClick="dayClick"/>
    </view>  
</view>

wxss

/* pages/demo/index.wxss */
page {
    background-color: #efefef;
}

.cal_header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:0rpx 50rpx;
  font-size:32rpx;
}
.cal_header text:nth-of-type(1){
  color:#7C7C7C;
}
.cal_header text:nth-of-type(2){
  color:#000;
}
.cal_header text:nth-of-type(3){
  color:#335BE2;
}
.time_unlimited{
  text-align: center;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}
.time_unlimited text{
  border: 1px solid #D8D8D8;
  font-size:30rpx;
  padding: 10rpx 30rpx;
  text-align: center;
}
 .calendar-box {
    display: flex;
    align-items: center;
    padding-top: 10px; 
    padding-bottom: 10px; 
    color: white;
    background-image: linear-gradient(to bottom, #6295eb 0%, #586fc2 50%, #5052a4 100%);
    box-shadow: 0px 11px 2px 1px rgba(234, 234, 229, 0.3);
}

.calendar-box .left {
    width: 30%;
    text-align: center;
}

.calendar-box .left .today {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;    
    background-color: #ef7a82;
    margin-left: auto;
    margin-right:auto;
}

.calendar-box .left .today p {
    font-size: 2rem;    
}

.calendar-box .left .today .monthStr {
    font-size: 0.8rem;
}

.calendar-box .right {
    width: 70%;
    font-size: 12px;
}

.calendar-box .right .box {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.title {
    margin-top: 20px;
    text-align: center;
    margin-bottom: 10px;
    display: block;
} 

.demo2 {
    background-color:#fff; 
    background-image: linear-gradient(to bottom, #2e5d91 0%, #2f3e79 100%);
    padding-top: 10px;
    padding-bottom: 10px;    

}

.demo2-header {
    font-size:32rpx;
    color: #3ed7f6; 
    font-weight: normal;
}


.demo2-board {
     color: #3ed7f6; 
    padding: 0 60rpx;
    font-size: 28rpx;
}

 
.demo3 {
    background-color: #eeedff;
    padding-top: 10px;
}

.demo3-header {
    font-size: large;
    color: #605eac;
}


.demo3-board {
    background-color: #dddcff;
    color: white;
}


.demo4-calendar {
    background-color: #413a60;
    padding-top: 10px;
}

.demo4-header {
    font-size: large;
    color: white;
}

.demo4-board {
    color: white;
}

.demo5 {
    padding: 15px;
}

.demo5-calendar {
    background-color: white;
    padding-top: 10px;
    border-radius: 15px;
}

.demo5-header {
    font-size: large;
    color: #59518d;    
}

.demo5-board {
    color: #c7cbe2;
    font-weight: bold;
}

.demo6 {
    padding: 15px;
}

.demo6-calendar {
    background-color: #fff043;
    padding-top: 10px;    
    box-shadow: 5px 5px 2px 1px rgba(255, 240, 67, 0.5);
}

.demo6-header {
    font-size: large;
    color: black;    
}

.demo6-board {
    color: #ff8a43;
    font-weight: bold;
}

// pages/demo/index.js
const MONTHS = [‘Jan.‘, ‘Feb.‘, ‘Mar.‘, ‘Apr.‘, ‘May.‘, ‘June.‘, ‘July.‘, ‘Aug.‘, ‘Sept.‘, ‘Oct.‘, ‘Nov.‘, ‘Dec.‘];
let demo2_days_style= [];

Page({

  /**
   * 页面的初始数据
   */
  data: {
    year: new Date().getFullYear(),      // 年份
    month: new Date().getMonth() + 1,    // 月份
    day: new Date().getDate(),
    str: MONTHS[new Date().getMonth()],  // 月份字符串

    demo1_days_style: [],
    demo2_days_style: [],
    demo4_days_style: [],
    demo5_days_style: [],
    demo6_days_style: [],
  },
  next: function (event) {//监听点击下个月事件:nextMonth
    console.log(event.detail);
  },
  prev: function (event) {//监听点击上个月事件:prevMonth
    console.log(event.detail);
  },
  dateChange: function (event) {//监听点击日历标题日期选择器事
    console.log(event.detail);
  },
  dayClick: function (event) {//监听点击日历具体某一天的事件:dayClick
    const days_count = new Date(this.data.year, this.data.month, 0).getDate();

    console.log(event.detail);
    for (let i = 1; i <= days_count; i++) {
      if(event.detail.day==i){
        demo2_days_style.push({
          month: ‘current‘, day: event.detail.day, color: ‘white‘, background: ‘#335BE2‘
        });
      }else{
        demo2_days_style.push({
          month: ‘current‘, day: i, color: ‘#4a4f74‘, background: ‘#fff‘
        });
      }
     

    }
   
    this.setData({
      demo2_days_style
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const days_count = new Date(this.data.year, this.data.month, 0).getDate();
    let demo1_days_style = new Array;
    for (let i = 1; i <= days_count; i++) {
      if (i <= 9 && i != 7) {
        demo1_days_style.push({
          month: ‘current‘, day: i, color: ‘white‘, background: ‘#8497ee‘
        });
      } else {
        demo1_days_style.push({
          month: ‘current‘, day: i, color: ‘white‘
        });
      }
    }
    this.setData({
      demo1_days_style
    });

    let demo2_days_style = new Array;
    for (let i = 1; i <= days_count; i++) {
      if (i == 12) {
        demo2_days_style.push({
          month: ‘current‘, day: i, color: ‘#314580‘, background: ‘#ffed09‘
        });
      } else if (i == 16) {
        demo2_days_style.push({
          month: ‘current‘, day: i, color: ‘white‘, background: ‘#30558c‘
        });
      } else if (i == 21) {
        demo2_days_style.push({
          month: ‘current‘, day: i, color: ‘white‘, background: ‘#3c5281‘
        });
      } 
      
        demo2_days_style.push({
          month: ‘current‘, day: i, color: ‘#4a4f74‘
        });
      
    }
    this.setData({
      demo2_days_style
    });

    let demo4_days_style = new Array;
    for (let i = 1; i <= days_count; i++) {
      if (i == 3) {
        demo4_days_style.push({
          month: ‘current‘, day: i, color: ‘white‘, background: ‘#46c4f3‘
        });
      } else if (i == 7) {
        demo4_days_style.push({
          month: ‘current‘, day: i, color: ‘white‘, background: ‘#ffb72b‘
        });
      } else if (i == 12 || i == 23 || i == 24) {
        demo4_days_style.push({
          month: ‘current‘, day: i, color: ‘white‘, background: ‘#865fc1‘
        });
      } else if (i == 21 || i == 22) {
        demo4_days_style.push({
          month: ‘current‘, day: i, color: ‘white‘, background: ‘#eb4986‘
        });
      } else {
        demo4_days_style.push({
          month: ‘current‘, day: i, color: ‘white‘
        });
      }
    }
    this.setData({
      demo4_days_style
    });

    let demo5_days_style = new Array;
    for (let i = 1; i <= days_count; i++) {
      const date = new Date(this.data.year, this.data.month - 1, i);
      if (date.getDay() == 0) {
        demo5_days_style.push({
          month: ‘current‘, day: i, color: ‘#f488cd‘
        });
      } else if (i == 12) {
        demo5_days_style.push({
          month: ‘current‘, day: i, color: ‘white‘, background: ‘#b49eeb‘
        });
      } else if (i == 17) {
        demo5_days_style.push({
          month: ‘current‘, day: i, color: ‘white‘, background: ‘#f5a8f0‘
        });
      } else if (i == 21) {
        demo5_days_style.push({
          month: ‘current‘, day: i, color: ‘white‘, background: ‘#aad4f5‘
        });
      } else if (i == 25) {
        demo5_days_style.push({
          month: ‘current‘, day: i, color: ‘white‘, background: ‘#84e7d0‘
        });
      } else {
        demo5_days_style.push({
          month: ‘current‘, day: i, color: ‘#a18ada‘
        });
      }
    }

    this.setData({
      demo5_days_style
    });

    let demo6_days_style = new Array;
    for (let i = 1; i <= days_count; i++) {
      const date = new Date(this.data.year, this.data.month - 1, i);
      if (i == 12) {
        demo6_days_style.push({
          month: ‘current‘, day: i, color: ‘white‘, background: ‘#b49eeb‘
        });
      } else if (i == 17) {
        demo6_days_style.push({
          month: ‘current‘, day: i, color: ‘white‘, background: ‘#f5a8f0‘
        });
      } else if (i == 21) {
        demo6_days_style.push({
          month: ‘current‘, day: i, color: ‘white‘, background: ‘#aad4f5‘
        });
      } else if (i == 25) {
        demo6_days_style.push({
          month: ‘current‘, day: i, color: ‘white‘, background: ‘#84e7d0‘
        });
      } else {
        demo6_days_style.push({
          month: ‘current‘, day: i, color: ‘black‘
        });
      }
    }

    this.setData({
      demo6_days_style
    });
  },
})

json

{
  "usingComponents": {
    "calendar": "plugin://calendar/calendar"
  },
  "navigationBarTitleText": "Demo"
}

以上是关于小程序日历插件的主要内容，如果未能解决你的问题，请参考以下文章

小程序手写日历

微信小程序下订单插件（日历）

微信小程序日历插件，适用于酒店订房类小程序

推荐简约漂亮的小程序插件 calendar

钉钉小程序如何做出日历选择器的效果？

小程序学习:vs code 安装插件