This is the second day of my participation in the August More Text Challenge

To implement the following calendar, you can switch months. By default, the current month is displayed. There is a little dot below the date with events.

Originally, I wanted to use Vant’s Van-Calendar directly, but it didn’t meet the needs at all, so I had to do it by myself. The code is redundant, so I can record it by myself and learn something new by reviewing the past!

1. Monthly calendar rendering

  • WXML for the parent component
<van-popup show="{{ show }}" round position="bottom" custom-style="height: 55%" bind:close="onClose" closeable>
    <the-calendar bindonCalendarClose="onCalendarClose"></the-calendar>
</van-popup>
Copy the code
  • WXML for the calendar component
<view class="calendar-container"> <view class="top-title"> <text class="fs16 black"> Test time </text> </view> <view class="choose-month"> <view class="month-left"> <view class="left-par"> <text class="iconfont iconxiangyou" Bindtap ="chooseMonth" data-state="-1"></text> </view> <text class="title">{{year}} year {{month}} month </text> <view class="right-par"> <text class="iconfont icongengduo" bindtap="chooseMonth" data-state="1"></text> </view> </view> </view> <view class="days-area"> <view class="day week black-65 fs12" wx:for="{{weeks}}" wx:key="index">{{item}}</view> <view wx:for="{{days}}" wx:key="index" wx:for-item="day" class="day day-time fs12 {{day.chooseDay? 'choose-day' : ''}} {{day.className}} {{day.event? 'day-event':''}}" bindtap="chooseThisDay" data-year="{{day.year}}" data-month="{{day.month}}" data-gregorian="{{day.gregorian}}" data-className="{{day.className}}">{{day.title}}</view> </view> </view>Copy the code

2. Calendar event rendering

GetDays () {this.data.days = []; getDays() {this.data.days = []; const day = new Date(); day.setFullYear(this.data.year, this.data.month - 1, 1); Const month = new Date(); // Get the first day of the month const month = new Date(); month.setFullYear(this.data.year, this.data.month, 0); Const prevMonth = new Date(); prevMonth.setFullYear(this.data.year, this.data.month - 1, 0); Let prevDay = prevmonth.getDate (); // let nextMonth = new Date(); nextMonth = new Date(this.data.year, this.data.month, 0); Let nextDay = nextmonth.getDay (); For (let I = day.getday () + 1; i > 1; PrevM = this.data.month1, prevYear = this.data.year; if (prevM < 1) { prevM = 12; prevYear = prevYear - 1 } this.data.days.unshift({ year: prevYear, month: prevM, title: prevDay, gregorian: prevDay, className: 'grey' }) prevDay--; } for (let i = 1; i <= month.getDate(); I ++) {// let title = I; if (this.data.year === this.data.yearNow && this.data.month === this.data.monthNow && this.data.todayNow === i) { title = 'today'; }; this.data.days.push({ year: this.data.year, month: this.data.month, title: title, gregorian: i, className: 'grey' }) } let j = 0, nextM = this.data.month + 1, nextY = this.data.year; if (nextM > 12) { nextM = 1; nextY = nextY + 1; } for (let i = nextDay + 1; i < 7; I++) {// the last day of the month from the Saturday of the week blank placeholder j++; this.data.days.push({ year: nextY, month: nextM, title: j, gregorian: j, className: 'grey' }) nextDay++; } / / date selected effect this. Data. Days. ForEach ((itemD) = > {the if (this. Data. ChooseDate. Year. = = = itemD year && this.data.chooseDate.month === itemD.month && this.data.chooseDate.gregorian === itemD.gregorian) { itemD.chooseDay = true; }}) this.setData({days: this.data.days})}, // Change the year chooseYears(state) {this.setData({year: this.data.year += state }) this.getDays(); this.getEventsList('change-month'); } / / access events, / / change in chooseMonth (event) {let state = event. The currentTarget. Dataset. The state; This.setdata ({month: this.data.month += Number(state)}) // If (this.data.month < 1) {this.setData({month: this.data.month += Number(state)}) 12 }) this.chooseYears(-1) } else if (this.data.month > 12) { this.setData({ month: 1 }) this.chooseYears(1); } else { this.getDays(); } this.getEventsList('change-month'); },Copy the code

3. Use today as the boundary to render events

GetEventsList (flag) {let obj = {starDate: this.data.stardate, endDate: this.data.enddate, resId: this.data.resId, } $post(getCalendarBoardByResId, obj).then(res => { this.getEventData(res); GetEventData (newData) {let nowDate = new Date().getTime() -8.64e7; if (newData.length > 0) { newData.forEach((itemN) => { this.data.days.forEach((itemD) => { if (itemN.year === itemD.year  && itemN.month === itemD.month && itemN.day === itemD.gregorian ) { itemD.event = true; let thisDate = new Date(itemD.year + '-' + this.addZero(itemD.month) + '-' + this.addZero(itemD.gregorian)).getTime(); If (thisDate >= nowDate) {// If (thisDate >= nowDate) {itemd. className = "; } } }) }) } else { this.data.days.forEach((itemD) => { itemD.event = false; }) } this.setData({ days: this.data.days }) },Copy the code

4. Date click events

Select chooseThisDay(e) {if (e.currenttarget && e.currenttarget. Dataset && e.currentTarget.dataset.classname == 'grey') { return; } let day = e.currentTarget.dataset; let flag = 0; this.data.days.forEach((itemD) => { itemD.chooseDay = false; if (day.year === itemD.year && day.month === itemD.month && day.gregorian === itemD.gregorian) { if (itemD.className ===  'grey') { flag++; } else { itemD.chooseDay = true; // Select}} If (this.data.yearNow === Itemd.year && this.data.monthNow == itemD.Month && this.data.todayNow === itemD.gregorian) { itemD.isToday = true; // today}}) if (flag > 0) {return false; } this.setData({ today: day.gregorian, chooseDate: { year: day.year, month: day.month, gregorian: TriggerEvent (' calendarClose ', {year: calendarClose, month: calendarClose, month: calendarClose}) day.month, gregorian: day.gregorian }); },Copy the code

Well, that’s all the code for the calendar component. Thanks for watching!