Vue3实现一个简单的日历组件

日历组件

需求

• 需要展示一个简洁的日历，支持切换展示的年份、月份，支持切换选中日期
• 特殊日期展示小红点，比如如果当日有日程，可以用小红点标注

效果展示

思路

• 表头：
  上一年、上一月、当前月份展示、下一月、下一年
  
  
• 表体：
  7列：["日", "一", "二", "三", "四", "五", "六"]
  6行：一共必须包含本月所有日期，会有两种情况：（1）5行能展示完全（2）6行能展示完全，兼容两种情况选择无论什么情况都展示6行
  
  想清楚以上，思路就非常清晰了，我们只需要找到表格中的第一个日期，然后42个格子每个格子依次往后推一天就可以了

import dayjs from "dayjs";
const getDateList = () => {
  const firstDay = showDate.value.dayjs.startOf("month").startOf("week");
  const rows = 6;
  return Array(rows * 7)
    .fill(0)
    .map((n, i) => {
      const day = firstDay.add(i, "day");
      return getCalendarDate(day);
    });
};

• 选中的日期：我们需要有一个值来记录选中的日期，方便高亮展示也方便后面切换时根据选中的日期展示当前月份，所以定义了一个对象，默认是选中当前日期

const getCalendarDate = (dayjs) => {
  return {
    year: dayjs.year(),
    month: dayjs.month(),
    date: dayjs.date(),
    value: dayjs.format(props.format),
    dayjs: dayjs
  };
};
const currentDate = ref(getCalendarDate(dayjs()));

• 展示的日期：因为可以切换上一年、上一月、下一月、下一年，所以展示的日期会存在和选中的日期不同的情况，也需要一个对象来记录，默认情况下展示的日期等于选中的日期

const showDate = ref(currentDate.value)

• 切换月份、年份：有了上面的这些，实现起来就非常容易，修改展示日期，然后根据展示日期重新获取6*7的日期列表

const nextMonth = (number) => {
  showDate.value = getCalendarDate(showDate.value.dayjs.add(number, "month"));
  dateList.value = getDateList();
};
const nextYear = (number) => {
  showDate.value = getCalendarDate(showDate.value.dayjs.add(number, "year"));
  dateList.value = getDateList();
};

• 修改日期：同样只需要修改选中日期、展示日期，然后根据展示日期重新获取日期列表，同时抛出一个change事件，给外部使用

const emit = defineEmits(["change"]);
const handleChangeCurrent = (dayjs: Dayjs) => {
  currentDate.value = getCalendarDate(dayjs);
  showDate.value = currentDate.value;
  dateList.value = getDateList();
  emit("change", currentDate.value);
};

• 小红点、非当前月日期灰色展示：这些就是一些简单的判断了，根据展示日期和选中日期来判断就行

<td v-for="date in dateList.slice((row - 1) * 7, (row - 1) * 7 + 7)" :key="date.value">
  <div
    class="calendar-date hand"
    :class="{
      'calendar-date--grey': date.month !== showDate.month,
      'calendar-date--today': date.value === currentDate.value
    }"
    @click="handleChangeCurrent(date.dayjs)"
  >
    <span>{{ date.date }}</span>
    <span v-if="props.dotDays.includes(date.value)" class="calendar-dot"></span>
  </div>
</td>

源码

<template>
  <div class="calendar">
    <div class="calendar-header">
      <div class="calendar-header__left">
        <el-icon class="hand" @click="nextYear(-1)"><DArrowLeft /></el-icon>
        <el-icon class="hand" @click="nextMonth(-1)"><ArrowLeft /></el-icon>
      </div>
      <div class="calendar-header__center">{{ showDate.year }} 年 {{ showDate.month + 1 }} 月</div>
      <div class="calendar-header__right">
        <el-icon class="hand" @click="nextMonth(1)"><ArrowRight /></el-icon>
        <el-icon class="hand" @click="nextYear(1)"><DArrowRight /></el-icon>
      </div>
    </div>
    <div class="calendar-main">
      <table class="calendar-table">
        <thead class="calendar-thead">
          <tr>
            <th v-for="(day, index) in sevenDay" :key="index">{{ day }}</th>
          </tr>
        </thead>
        <tbody class="calendar-tbody">
          <tr v-for="row in rows" :key="row">
            <td v-for="date in dateList.slice((row - 1) * 7, (row - 1) * 7 + 7)" :key="date.value">
              <div
                class="calendar-date hand"
                :class="{
                  'calendar-date--grey': date.month !== showDate.month,
                  'calendar-date--today': date.value === currentDate.value
                }"
                @click="handleChangeCurrent(date.dayjs)"
              >
                <span>{{ date.date }}</span>
                <span v-if="props.dotDays.includes(date.value)" class="calendar-dot"></span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import dayjs, { Dayjs } from "dayjs";

interface CalendarDate {
  year: number;
  month: number;
  date: number;
  value: string;
  dayjs: Dayjs;
}

interface Props {
  dotDays?: string[]; // 需要加点的日期
  format?: string; // 日期格式，必须保证格式化后的日期是唯一的，默认YYYY-MM-DD(参考dayjs)
  current?: string; // 当前选中的日期，格式与format保持一致,默认选择当前日期
  disabled?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  dotDays: () => [], // ["2023-09-19", "2023-09-20", "2023-08-31"]
  format: "YYYY-MM-DD",
  disabled: false
});
const sevenDay: Array<string> = ["日", "一", "二", "三", "四", "五", "六"];
const dateList = ref<CalendarDate[]>([]);

const getCalendarDate = (dayjs: Dayjs): CalendarDate => {
  return {
    year: dayjs.year(),
    month: dayjs.month(),
    date: dayjs.date(),
    value: dayjs.format(props.format),
    dayjs: dayjs
  };
};
// 选中的日期
const currentDate = ref<CalendarDate>(getCalendarDate(dayjs()));
// 当前日历展示的日期
const showDate = ref<CalendarDate>(currentDate.value);

// 获取日期列表，6*7天
const rows = 6;
const getDateList = (): Array<CalendarDate> => {
  const firstDay = showDate.value.dayjs.startOf("month").startOf("week");
  return Array(rows * 7)
    .fill(0)
    .map((n, i) => {
      const day = firstDay.add(i, "day");
      return getCalendarDate(day);
    });
};

const nextMonth = (number: number) => {
  showDate.value = getCalendarDate(showDate.value.dayjs.add(number, "month"));
  dateList.value = getDateList();
};
const nextYear = (number: number) => {
  showDate.value = getCalendarDate(showDate.value.dayjs.add(number, "year"));
  dateList.value = getDateList();
};

// 修改选中日期
const emit = defineEmits(["change"]);
const handleChangeCurrent = (dayjs: Dayjs) => {
  if (props.disabled) return;
  currentDate.value = getCalendarDate(dayjs);
  showDate.value = currentDate.value;
  dateList.value = getDateList();
  emit("change", currentDate.value);
};

onMounted(() => {
  if (props.current) {
    handleChangeCurrent(dayjs(props.current, props.format));
  } else {
    dateList.value = getDateList();
  }
});
</script>
<style lang="scss" scoped>
.calendar {
  user-select: none;
  .calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 22px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--el-text-color-primary);
  }
  .calendar-main {
    padding-bottom: 12px;
    margin-top: 12px;
  }
  .calendar-table {
    width: 100%;
    th,
    td {
      // width: (100/7);
      width: 14.285%;
      min-width: 40px;
      padding: 4px 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      color: var(--el-text-color-primary);
      text-align: center;
    }
    th {
      color: #bfbfbf;
    }
  }
  .calendar-date {
    position: relative;
    width: 24px;
    height: 24px;
    margin: -1px auto;
    border-radius: 2px;
    &--grey {
      color: #bfbfbf;
    }
    &:hover {
      background: var(--el-color-primary-light-9);
    }
    &--today {
      color: #ffffff !important;
      background: var(--el-color-primary) !important;
    }
  }
  .calendar-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 6px;
    height: 6px;
    background-color: #fc474c;
    border-radius: 50%;
  }
}
.hand {
  cursor: pointer;
}
</style>