小程序日历插件
首先引入第三方极点日历插件
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" }
