在某视频剪辑软件项目中用完整日历制作日程表的示例代码

前言

最近老牌日历插件完整日历更新了v4版本，而且添加了某视频剪辑软件支持，所以用最新的完整日历v4制作一个完整日历体验一下，效果图：

安装

完整日历的功能被分解为"插件"。如果您需要它提供的功能，您只需要包含一个插件。也就是说，完整日历v4所有插件都得单独安装引用。

新公共管理安装-保存@完整日历/vue @完整日历/core @完整日历/日网格

引用并初始化

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

脚本从“@完整日历/vue”导入完整日历从“@完整日历/日网格”导入dayGridPlugin导出默认值{ components 3360 {完整日历}，data(){ return { calendarPlugins :[dayGridPlugin]} } }/脚本模板完整日历默认视图=' dayGridMonth ' : plugins=' calendarPlugins '/模板样式lang=' less '//用什么插件必须引入相应的样式表，否则不能正常显示@ import "[电子邮件保护]/core/main。CSS”；@ import "[电子邮件保护]/day grid/main。CSS”；/style功能定制

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

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

语言设置简体中文

完整日历区域设置='zh-cn' /如果表头加了按钮的话，按钮文字要单独做处理，给每个按钮的英文名称加一个中文的映射，例：

完整日历：标题=' { left : ' prev，next today '，center: 'title '，right: 'dayGridMonth，timeGridWeek，timeGridDay，listWeek ' } ' :按钮文本=' button text '/data(){ return { button text : { today : '今天，month: '月第：周周第：天天' } } }点击日历添加事件

想要触发日期点击事件必须先安装引用互动插件，文档链接：https://完整日历。io/文档/日期点击

新公共管理安装-保存@完整日历/交互

完整日历@日期点击=' handledate点击'/handledate点击(arg){ if(confirm)('是否要将事件添加到' arg.dateStr '？)){ this.calendarEvents.push({ //添加新事件数据标题：“新事件”，开始时间： arg.date，全天： arg .全天}) } }点击事件查看详情

完整日历@事件点击=' handleevent click '/handleevent click(信息){ alert(' event : '信息。事件。标题)}完整例子在我的开源代码库项目里，项目地址：https://github。com/inspiration 1/小行星

官方文档：

https://fullcalendar.io/docs/vue

https://fullcalendar.io/docs#toc

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。