purpose

Recently, in order to manage attendance, I needed to display the attendance status of employees through the calendar, so I used the calendar component of Element and Ant-Design for the first time. In addition, I also tried to use the plug-in fullCalendar. It is indeed a powerful plug-in, but I am still using it Customizing content also hit a wall

The former could not find a way to display a fixed month (after selecting the date, it would move forward, so it could not only be the date of the previous month, and the custom content did not need to be satisfied), the latter customized content after operating the influence of some default events of a single date, and finally decided to implement the calendar itself without complicated requirements

implementation

Just to show you what it looks like, it looks something like this

Through an operation, the page successfully rendered, the implementation process is divided into the following steps

  1. Create table first week data, monthly data

    Weekly data [Sunday-Saturday] can be defined directly

    For monthly data, moment.js is used to calculate the number of days in a month in a year

    monthsDay() {
      let monthDate = moment(this.dataform.date)
        .format('YYYY-MM')
        .split(The '-')
      return this.getDaysOfMonth(Number(monthDate[0]), Number(monthDate[1]))},// Count the days of the month
    getDaysOfMonth(year, month) {
      switch (month) {
        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10:
        case 12:
          return 31
        case 4:
        case 6:
        case 9:
        case 11:
          return 30
        case 2:
          return (year % 4= =0 && year % 100! =0) || year % 400= =0 ? 29 : 28
        default:
          return 0
      }
Copy the code

2. Calculate the day of the first day of each month and accurately correspond to the position of the calendar. For example, the first day of September falls on Wednesday, and then the empty data of three days before the days of each month is obtained

    // Gets the first day of the selected month
    getCurrentMonthFirst() {
      let startdate = new Date(this.dataform.date)
      startdate.setDate(1)
      return moment(new Date(startdate)).format('YYYY-MM-DD')},// Calculate the day of the week
    weekDay(date) {
      let dt = new Date(date.split(The '-') [0], date.split(The '-') [1] - 1, (date = date.split(The '-') [2]))
      return dt.getDay()
    },
    // Add data to the loop to calculate the days of the week
    for (let i = 0; i < this.weekDay(this.getCurrentMonthFirst()); i++) {
         this.columnData.unshift({
             date: ' '})},Copy the code

3. Finally, add a class and a background color for the weekend date

    <div class="calendar-date" :class="isWeekDay(day.date) ? 'disable-background' : ''">
    isWeekDay(date) {
      let weeks = ['day'.'一'.'二'.'三'.'four'.'five'.'六']
      let dt = new Date(date.split(The '-') [0], date.split(The '-') [1] - 1, (date = date.split(The '-') [2]))
      return weeks[dt.getDay()] == '六' || weeks[dt.getDay()] == 'day'
    },
Copy the code

According to the gain in attendance data and data matching the date it is ok to calculate, rendering the above, a minimalist calendar component implementation, the operation of the calendar not show one by one, the follow-up if you have access to holidays such as data can also be on the calendar shows the holiday supplement, component is very rough, just try a little. Welcome to mock [Dog head]