This is the fourth day of my participation in the August Text Challenge.More challenges in August

Calendar UI part of the source

  • Calendar panel 7 rows and 7 columns,UIPart of the code usedtableLayout, first action week, cyclic rendering Monday to Sunday; Lines 2 through 7trA two-layer loop, and the variable of the loop iscomputedAssembled inrows
// basic/date-table.vue

<template>
  <table
    cellspacing="0"
    cellpadding="0"
    class="el-date-table"
    @click="handleClick"
    @mousemove="handleMouseMove"
    :class="{ 'is-week-mode': selectionMode === 'week' }">
    <tbody>
    <tr>
      <th v-if="showWeekNumber">{{ t('el.datepicker.week') }}</th>
      <th v-for="(week, key) in WEEKS" :key="key">{{ t('el.datepicker.weeks.' + week) }}</th>
    </tr>
    <tr
      class="el-date-table__row"
      v-for="(row, key) in rows"
      :class="{ current: isWeekActive(row[1]) }"
      :key="key">
      <td
        v-for="(cell, key) in row"
        :class="getCellClasses(cell)"
        :key="key">
        <div>
          <span>
            {{ cell.text }}
          </span>
        </div>
      </td>
    </tr>
    </tbody>
  </table>
</template>
Copy the code
  • The UI components

Calendar Implementation Principle

  • The core idea is to get the location of the first day of the month displayed on the calendar panel: first, get the day of the week of the first day of the month, as shown in the picture above. Suppose the calendar displays Sunday in the first place, Saturday in the last place, and Monday through Friday in the order between the two. So Saturday is day 7, row 1 of the calendar panel. That is, we assume that the first day of the date is displayed in the last position on the first line. The calendar panel, the first day of the first line and on the seventh day and 5 days, so the date of the first calendar panel location is the total number of days last month minus the interval of five days, the second position is the date of last month, the total number of days minus the interval of 4 days, the total number of days on the third day is the date of last month, less interval of 3 days, and so on, it is concluded that the first line of all the rest of the date of last month. Now that we’re done, we just need to count the days of the month, arrange the render dates in order, and then arrange the render dates of the next month after the days of the month.
  • All the calculation methods involved in the above ideas can be adoptedDateNative method implementation, specific reference source codeelement-ui/src/utils/date-utilThe methods in
    • Calculate the day of the week on the first day of a month
    • Calculate the number of days in the month preceding a given month, involving common leap years
    • Calculate the number of days in a month, involving common leap years
  • After calculation, the assembled data is placed incomputedThe calendar panel changes when the currently selected date or the default date changes. The outer layertrSix loops represent six rows of data, inner layerstdSeven cycles represent seven days a week with seven columns of data.
  • Of course, the calendar display rule may also be Monday in the first row of the first position, Sunday in the seventh position, the same principle, calculate the day of the week of the first day of the month, determine the position of the first row, calculate the offset of the previous month relative to the day can be calculated.

reference

ElementUI source