FullCalendar |
您所在的位置：网站首页 › fullcalendar实例 › FullCalendar |
FullCalendar
|
Fullcalendar是一个非常受欢迎的日历日程处理的js组件，它功能强大，文档齐全，可定制化高，可与你的项目无缝对接。本站之前有很多文章介绍了Fullcalendar（v5）的使用。今天我们来看看如何在Vue框架下使用Fullcalendar。 FullCalendar官网：fullcalendar.io/ FullCalendar官方文档：fullcalendar.io/docs最新FullCalendar中文文档合集 大家可以参考这个网站的总结，挺到位 最新FullCalendar中文文档 先看效果图FullCalendar 以核心代码和插件形式提供给用户安装，因此我们需要哪些功能，就直接安装对应的插件即可。使用时可以参照：功能插件列表。 使用 1. 建立一个Fullcalendar.vue 待办任务 2. 引入所要用的插件 import FullCalendar from '@fullcalendar/vue' import dayGridPlugin from '@fullcalendar/daygrid' import timeGridPlugin from '@fullcalendar/timegrid' import interactionPlugin from '@fullcalendar/interaction' import zhCnLocale from '@fullcalendar/core/locales/zh-cn' 3. 所有的配置项在calendarOptions完成 calendarOptions: { plugins: [ // 加载插件，V5采用插件模块方式加入 dayGridPlugin, timeGridPlugin, interactionPlugin, // needed for dateClick ], height: 800, //日历高度 width: 600, headerToolbar: { // 头部toolba left: 'prev,next today', center: 'title', right: 'timeGridDay,timeGridWeek,dayGridMonth', // right: 'dayGridMonth' }, handleWindowResize: true, //随浏览器窗口变化 initialView: 'dayGridMonth', // 初始化插件显示 // initialDate:""//初始化日期 // initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed // editable: true, //是否可编辑 // droppable: true,//可拖拽的 // timeZone: 'local',//采用时区 selectable: true, // selectMirror: true, dayMaxEvents: true, // weekends: true, // 是否显示一周七天 // select: this.handleDateSelect, // eventClick: this.handleEventClick, // 日程点击事件 eventMouseEnter: this.handleEventMouseEnter, // 用户将鼠标悬停在事件上时触发 // eventsSet: this.handleEvents, // dateClick: this.handleDateClick,//日期方格点击事件 eventClick: this.handleEventClick, //日程点击事件 locale: zhCnLocale, nextDayThreshold: '01:00:00', events: [ //日程事件的json // { title: 'event 1', date: '2021-04-23 12:00:00' }, // { title: 'event 2', date: '2021-04-24 05:59:23' }, // { title: 'event 3', date: '2021-04-25 08:23:00' }, // { title: 'event 4', date: '2021-04-25 09:30:00' }, // { title: 'event 5', date: '2021-04-26 12:00:00' }, // { title: 'event 2', date: '2021-04-26 15:00:00' } ], // datesSet: this.handleDateSet, /* you can update a remote database when these fire: eventAdd: eventChange: eventRemove: */ }, 4. 日程表赋值 // 年度总结报告 that.calendarOptions.events.push({ color: '#ff9900', title: element.name, date: element.time, status: this.statusName, type: element.type, times: element.time, category: element.category }) 5. 本案例用到在日程上鼠标移入悬浮框显示详情，利用eventMouseEnter鼠标悬停事件,这里用到tippy.js插件，tippy.js文档。 // 用户将鼠标悬停在事件上时触发,这里数据做了类型判断，不同的类型数据页面悬浮框显示不用的内容 handleEventMouseEnter(info) { console.log(info, 'yyyy') let col = info.event.borderColor let eve = info.event._def.extendedProps let category = info.event._def.extendedProps.category tippy(info.el, { // content:"" + // "会议名称：" + info.event.title+"" + // "会议类型："+eve.type+"" + // "会议时间："+eve.times+"" + // "会议状态："+eve.status+"" + // "", content: ` 会议名称： ${info.event.title} 会议类型：${eve.type} 会议时间：${eve.times} 会议状态：${eve.status} 年份：${eve.year} 领域角色：${eve.depRoleName} 姓名：${eve.name} `, theme: 'light', //主题选取 // trigger: 'click', //触发类型 interactive: true, //可交互的 placement: 'top-start', //悬浮框位置 allowHTML: true, //是否允许html文本 zIndex: 99999, }) }, |
【本文地址】
今日新闻 |
推荐新闻 |