zoukankan      html  css  js  c++  java
  • 小程序日历插件

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

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

    js

    // 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"
    }
  • 相关阅读:
    【Java学习笔记】<集合框架>Iterator的子接口ListIterator
    【Java学习笔记】<集合框架>List特有的取出方式之一
    【Java学习笔记】集合框架Ⅱ
    【Java学习笔记】集合框架Ⅰ
    【PS】Ⅱ图像合成与渐变工具笔记
    【PS】Ⅰ基础及选框工具笔记
    [PS]简单的智能电视制作案例
    Spring中线程池的使用
    SpringBoot 多线程
    solr DIH 设置定时索引
  • 原文地址:https://www.cnblogs.com/dalulu/p/9056040.html
Copyright © 2011-2022 走看看