Vue日历/日程表组件fullcalendar-vue的使用（1）

最新推荐文章于 2025-06-18 16:49:10 发布

youngsun30

最新推荐文章于 2025-06-18 16:49:10 发布

阅读量8.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_39792893/article/details/102527318

本文介绍了如何利用fullcalendar-vue这个强大的日历插件创建一个具备教师选课发布功能的日历。通过官方文档和GitHub资源，开发者可以实现日历的显示并计划进一步添加事件功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

fullcalendar是最强大的日历插件，其中一般开发工作中所需要的日历功能基本都满足了。

官方文档地址：https://fullcalendar.io/docs#toc

fullcalendar-vue的github地址https://github.com/fullcalendar/fullcalendar-vue

https://fullcalendar.io/docs/vue

我想要做的是一个能够让教师在日历上选取日期然后弹出时间选择，以提供给教师发布课程，然后学生端可以在日历上选取教师们已经发布的课程。

那么开始做些起步工作。

<template>
<div>
<el-row>
   <el-col :span="16">
      <FullCalendar
         defaultView="dayGridMonth"
         :firstDay="firstDay" // 把每周开始的第一天设置为周一 符合我们的习惯
         :plugins="calendarPlugins" // 使用我们所需要的插件
         :locale="locale" // 本地化，在用户进入页面时，我会将本地化信息保存到localStorage去
         :buttonText="buttonText" // 按钮文本，因为发现本地化改变时，按钮文本没有变化
         :validRange="validRange" // 时间范围，在今天之前的时间，当然不需要显示
         @dateClick="h