vue日历日程组件

要求：开发一个日历日程组件：包含回到今天、选择年度、选择月份及日期切换等功能，数据为静态数据。

效果：

 

 

代码：

<template>
  <div class="calendar-container">
    <div class="schedule-head">
      <div class="today" @click="toToday">回到今天</div>
      <div class="select one">
        <el-select class="select" v-model="yearModel" @change="yearChange" placeholder="">
          <el-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="select two">
        <el-select v-model="monthModel" @change="monthChange" placeholder="">
          <el-option v-for="item in months" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
    </div>
    <div class="weekdays">
      <div class="item" v-for="(item,index) in weekdays" :key="index">{
  {item}}</div>
    </div>
    <div class="days">
      <div class="days-item" 
        v-for="(item,index) in days" 
        :key="index" 
        @click="daySelect(item)">
        <div class="days-con" v-if="item.year == yyyy && item.month == mm && item.name == dd" :class="item.name == dd ? 'now': ''">
          {
  {item.name}}
          <div class="circle" v-if="item.content"></div>
        </div>
        <div class="days-con" v-else :class="item.name === currentDay ? 'select': ''">
          {
  {item.name}}
          <div class="circle" v-if="item.content"></div>
        </div>
      </div>
    </div>
    <div class="schedule-list">
      <div class="title">日程安排</div>
      <div v-if="scheduleList && scheduleList.length" class="schedule">
        <div class="schedule-item">
          <el-timeline>
            <el-timeline-item class="line-item" 
              v-for="(item,index) in scheduleList" 
              :key="index"
              color="#ffffff"
              size="large">
              <div class="time">{
  {item.time}}</div>
              <div class="circle">
                <div>{
  {item.type == 1 ? '会议': ''}}</div>
              </div>
              <div class="content">
                <div class="name">{
  {item.name}}</div>
                <div class="site">