平铺日历组件

项目中有平铺日历的需求, 组件可以解决

效果图:

<!-- 日历年份 -->
<h2 class="year_title">{{ year }}年工作日历</h2>
<!-- 日历本体 -->
<YearCalendar
    v-model="year"
    :activeDates.sync="activeDates"
    @toggleDate="toggleDate"
    lang="tw"
    :showYearSelector="showYearSelector"
></YearCalendar>

<script>
import YearCalendar from 'vue-material-year-calendar'
export default {
  components: { YearCalendar },
    data () {
        return {
          year: new Date().getFullYear(),
          activeDates: ['2023-01-01'],
          showYearSelector: false
        }
    },
    method: {
        toggleDate (dateInfo) {
          setTimeout(() => {
            console.log(this.activeDates) // { date: '2010-10-23', selected: true }
          }, 100)
        }
    }
}
</script>

<style>
/deep/ .ant-card-head-title {
  color: #00095B;
  font-size: 20px;
}
/deep/ .vue-calendar__container {
  background-color: #fff;
  box-shadow: none;
  .c-wrapper {
    flex: 25%;
    .calendar {
      box-shadow: 4px 4px 8px 1px rgba(64,101,224,0.2);
      border: 2px solid #4065E0;
      border-radius: 16px;
      height: 352px;
      .calendar__day {
        height: 40px;
        .day {
          width: 33px;
          height: 33px;
        }
      }
    }
  }
  .calendar__title {
    color: #4065E0;
  }
}
</style>