在Vue项目中用fullcalendar制作日程表的示例代码_日程表源码 - CSDN文库

135 浏览量更新于2023-05-09 评论 1 收藏 47KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

在在Vue项目中用项目中用fullcalendar制作日程表的示例代码制作日程表的示例代码

主要介绍了在Vue项目中用fullcalendar制作日程表，文中通过示例代码介绍的非常详细，对大家的学习或者工作

具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言前言

最近老牌日历插件fullcalendar更新了v4版本，而且添加了Vue支持，所以用最新的fullcalendar v4制作一个完整日历体验一

下，效果图：

安装安装

FullCalendar的功能被分解为“插件”。如果您需要它提供的功能，您只需要包含一个插件。

也就是说，FullCalendar v4所有插件都得单独安装引用。

npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid

引用并初始化引用并初始化

引用、注册FullCalendar组件，得到一个月视图的日历。

<script>

import FullCalendar from '@fullcalendar/vue'

import dayGridPlugin from '@fullcalendar/daygrid'

export default {

components: {

FullCalendar

},

data() {

return {

calendarPlugins: [ dayGridPlugin ]

}

}

}

</script>

<template>

<FullCalendar defaultView="dayGridMonth" :plugins="calendarPlugins" />

</template>

<style lang='less'>

//用什么插件必须引入相应的样式表，否则不能正常显示

@import '~@fullcalendar/core/main.css';

@import '~@fullcalendar/daygrid/main.css';

</style>

功能定制功能定制

为了完成复杂功能，需要引用更多插件，插件列表：

https://fullcalendar.io/docs/plugin-index

语言设置简体中文

<FullCalendar locale="zh-cn" />

如果表头加了button的话，button文字要单独做处理，给每个button的英文名称加一个中文的映射，例：

<FullCalendar

:header="{

left: 'prev,next today',

center: 'title',

right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'

}"

:buttonText="buttonText"

/>

data () {

return {

buttonText: {

today: '今天',

month: '月',

week: '周',

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38555350

粉丝: 2
资源: 933

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈