用vue该怎么设计一个和这个一样的校历

用vue该怎么设计一个和这个一样的校历，求各位解答！谢谢了
框架该怎么搞该用什么插件

https://juejin.cn/post/7029484602011975717

vue-fullcalendar ，剩下的逻辑自己按照要求来修改就可以了。样式基本和你的差不多

不需要设计你去引入 elementui 框架，使用里面的日期模块，两行代码搞定，如有帮助给个采纳谢谢

可以不需要插件， vue + css + html 纯原生的方式也能实现。

vue制作一个日历

<template>
  <div id="wfcalendar">
    <div class="calendar_header">
     <p style="width:33%"  @click="monthtoleft"> 《 </p>
      <p style="width:34%;text-align:center">
        <span>{{thisyear}}</span>-
        <span>{{thismonth&lt;=9?'0'+thismonth:thismonth}}</span>-
        <span>{{today&lt;=9?'0'+today:today}}</span> <br>
        <span>星期{{week[weekday]}}</span>
      </p>
      <p style="width:33%;text-align:right" @click="monthtoright">》</p>

    </div>
    <hr>
    <ul class="wf-week">
      <li v-for="(item,index) in week" :key="index"><span
          :class="{weektoday:index==weekday}">{{item}}</span></li>
    </ul>
    <ul class="wf-days">
      <li v-for="(item,index) in daylist" :key="index" @click="checkday(item.day,item.ismonth)"
        :class='{check:thisyear==year&&thismonth==month&&item.day==today&&item.ismonth==1}'><span
          :class="{fontcolor:item.ismonth==0}">{{item.day}}</span></li>
    </ul>
  </div>
</template>

<script>
const myDate = new Date();
export default {
  data () {
    return {
      week: ['日', '一', '二', '三', '四', '五', '六'],
      daylist: [],
      thisyear: '',
      thismonth: '',
      today: '',
      weekday: '',
      year: '',
      month: '',
      day: '',
      weeks: '',
    };
  },
  created () {
    //初始化年月日星期
    this.year = this.thisyear = myDate.getFullYear()
    this.month = this.thismonth = myDate.getMonth() + 1
    this.day = this.today = myDate.getDate()
    this.weeks = this.weekday = myDate.getDay()
    this.getcalendar()
  },
  methods: {
    getcalendar () {
      let daysnumber = new Date(this.thisyear, this.thismonth, 0).getDate();//获取当月天数
      let beginweeks = new Date(this.thisyear, this.thismonth - 1, 1).getDay();//获取当月1日是星期几，确定1日开始位置
      let list = []
      let mos = ''
      // 获取上个月的天数
      if (this.thismonth == 1) {
        mos = new Date(this.thisyear, 11, 0).getDate()
      } else {
        mos = new Date(this.thisyear, this.thismonth - 1, 0).getDate()
      }
      //补全当前月之前空缺位置
      for (var i = beginweeks; i > 0; i--) {
        let arr = {
          day: mos--,
          ismonth: '0'
        }
        list.push(arr)
      }
      this.daylist = list.reverse()

      for (var j = 1; j <= daysnumber; j++) {
        let arr = {
          day: j,
          ismonth: '1'
        }
        this.daylist.push(arr)
      }
      let endweeks = new Date(this.thisyear, this.thismonth - 1, daysnumber).getDay();//获取当月最后一天是星期几
      //补全每月结束之后空缺位置
      for (var m = 1; m < 7 - endweeks; m++) {
        let arr = {
          day: m,
          ismonth: '0'
        }
        this.daylist.push(arr)
      }
    },
    //上一月
    monthtoleft () {
      if (this.thismonth > 1) {
        this.thismonth = this.thismonth - 1
      } else {
        this.thismonth = 12
        this.thisyear = this.thisyear - 1
      }
      this.getcalendar()
    },
    //下一月
    monthtoright () {
      if (this.thismonth < 12) {
        this.thismonth = this.thismonth + 1
      } else {
        this.thismonth = 1
        this.thisyear = this.thisyear + 1
      }
      this.getcalendar()
    },
    //获取点击日期
    checkday (days, ismonth) {
      if (ismonth == 1) {
        this.year = this.thisyear
        this.month = this.thismonth
        this.day = this.today = days
        this.weeks = this.weekday = new Date(this.thisyear, this.thismonth - 1, days).getDay()
      }
    },
  }

};
</script>
<style scoped>
#wfcalendar {
  background: white;
  padding: 10px;
  /* width: 624px; */
  border: 1px solid #eaebed;
  max-height: 503px;
}

#wfcalendar hr {
  background: #eaebed;
  height: 1px;
  border: none;
  margin: 0;
  /* width: 644px; */
  margin-left: -10px;
}
#wfcalendar .wf-week li {
  width: 14%;
  height: 58px;
  line-height: 58px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  margin-bottom: 1px;
}
#wfcalendar .wf-week li .weektoday {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: #ffb400;
  line-height: 30px;
  border-radius: 15px;
  color: white;
}
#wfcalendar .wf-days li {
  display: inline-block;
  height: 58px;
  width: 14%;
  line-height: 58px;
  margin: 0px auto;
  border-radius: 4px;
  background: #eef7fe;
  text-align: center;
  margin-right: 1px;
  cursor: pointer;
  margin-bottom: 1px;
}
#wfcalendar .wf-days li .fontcolor {
  color: #ccc;
  cursor: not-allowed;
  display: inline-block;
  width: 100%;
  height: 100%;
  /* pointer-events:none; */
}
#wfcalendar .wf-days .check {
  background: #95cffd;
}
#wfcalendar .calendar_header {
  height: 67px;
  width: 100%;
  color: #5e7a88;
  display: flex;
}
#wfcalendar .calendar_header p {
  display: inline-block;
}
#wfcalendar .calendar_header p img {
  width: 26px;
  height: 26px;
  cursor: pointer;
}
#wfcalendar .calendar_header p span {
  display: inline-block;
  cursor: pointer;
  /* width: 100%; */
}
#wfcalendar .calendar_header p span:hover {
  color: #5cb3ff;
}
#wfcalendar .checkyears li {
  display: inline-block;
  width: 25%;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}
#wfcalendar .checkyears .check {
  color: #2176d9;
}
</style>

使用vue实现的日历效果如下，看下是否满足你的需求：

Vue日历源代码地址：https://blog.csdn.net/weixin_45289656/article/details/128397918

可以使用ElementUI或Vue Material等UI框架来实现

要使用Vue来设计一个类似的校历，您可以考虑以下步骤和要点：

创建Vue项目：首先，您需要使用Vue CLI（Vue的脚手架工具）创建一个新的Vue项目。可以使用以下命令进行项目初始化：
```
vue create project-name
 
```
设计数据结构：根据校历的需求，设计适当的数据结构来存储日期、事件等信息。可以使用Vue的数据响应式机制来跟踪数据的变化。
组件划分：根据页面的布局和功能，将校历拆分为多个组件。例如，可以创建一个顶部导航栏组件、一个日期选择组件、一个展示校历内容的组件等。
样式设计：使用CSS或CSS预处理器（如Sass、Less）来设计校历的样式。您可以根据原始校历的样式进行参考，并根据需要进行自定义样式。
数据渲染：在Vue组件中，通过绑定数据和使用Vue的指令（如v-for和v-if）将数据渲染到页面中。根据日期和事件数据，动态生成对应的日历表格和事件列表。
交互功能：为校历添加交互功能，例如点击日期时显示该日期的事件，支持切换月份或年份等操作。可以使用Vue的事件处理和计算属性来实现交互功能。
插件选择：根据需要，您可以选择使用一些Vue插件来辅助开发。例如，您可以考虑使用日期选择器插件、日历插件或弹窗组件等。根据具体需求，选择适合的插件可以提高开发效率。

需要注意的是，以上只是一个大致的指导，具体的实现方式还需要根据您的具体需求和项目的复杂程度进行调整和优化。建议您参考Vue的官方文档、教程和社区资源，以便更深入地了解Vue的用法和最佳实践。

希望以上信息对您有所帮助！如有任何进一步的问题，请随时提问。