初始化日历属性
data(){ return{ calendarOptions : { plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin // needed for dateClick ],// 引入的插件,比如fullcalendar/daygrid,fullcalendar/timegrid引入后才可显示月,周,日 dragScroll: false, headerToolbar: { left: null, center: 'prev,title,next', right: null }, initialView: 'timeGridWeek',// 默认为那个视图(月:dayGridMonth,周:timeGridWeek,日:timeGridDay) allDaySlot:false,//是否显示日历上方的allDay dayMaxEvents: false,// allow "more" link when too many events,只能选中或拖动一次 firstDay: new Date().getDay(), // 设置一周中显示的第一天是哪天,周日是0,周一是1,类推 locale:'zh-cn',// 切换语言,当前为中文 // eventColor: 'red', // 事件的颜色 //nowIndicator: false, // 当前的时间线显示 // axisFormat:'H:(mm)', // slotLabelFormat:'H:mm', // soltDuration:'01:00:00', // soltMinutes:40, initialEvents: [], // alternatively, use the `events` setting to fetch from a feed editable: true, selectable: true, selectMirror: true, weekends: true, select: this.handleDateSelect,//当用户拖拽日期或时间时传递的参数 //dateClick: this.handleEventClick,//当用户点击日期或时间时触发的事件 // eventClick: this.handleEventClick, viewRender:this.handleViewRender, datesRender:this.handleViewRender, selectOverlap: true, moreLinkClassNames:'more-btns', moreLinkContent : "查看更多", // validRange: { // start: new Date() // }, events:[], customButtons: { prev: { click: () => { this.prevWeekClick(); } }, next: { click: () => { this.nextWeekClick(); } } }, // hiddenDays: [3,6], //隐藏一周中的某一天或某几天,数组形式,如隐藏周二和周五:[2,5],默认不隐藏,除非weekends设置为false。 slotMinTime: "08:00:00", slotMaxTime: "18:00:00", unselectAuto:false,//当点击页⾯⽇历以外的位置时,是否⾃动取消当前的选中状态。false是不取消 slotLabelFormat: { hour: '2-digit', minute: '2-digit', meridiem: false, hour12: false // 设置时间为24小时 },//设置左侧栏为08:00,而不是8时 disableAllweekTime:false,//设置今天之前的页面不可选------5月18新加的 slotDuration: "01:00:00", //一格时间槽代表多长时间,默认00:30:00(30分钟) eventStartEditable: false, // eventColor: '#3BB2E3', // 全部日历日程背景色 // themeSystem: 'bootstrap', // 主题色 // timeGridEventMinHeight: '20', // 设置事件的最小高度 // aspectRatio: 1.65, // 设置日历单元格宽度与高度的比例。 // displayEventTime: true, // 是否显示时 // eventLimit: true, // 设置月日程,与all-day slot的最大显示数量,超过的通过弹窗显示 }, } },
面板不可选置灰
// 今天之前的日期置灰 this.calendarOptions.selectable=false srt.push({ startTime:'00:00', endTime:'00:00', daysOfWeek:[0,1,2,3,4,5,6] }) //面板灰色 this.calendarOptions.businessHours = this.calendarOptions.selectConstraint =srt
面板已选日期回显色块 let newD = data.map((item,index)=>{ return { id:, start: ,//开始时间 end: ,//结束时间 color:,//设置不同状态所选区域背景色 className:,//所选区域class num: ,//小时 status: ,//状态 isCurrData:,//编辑时是不是当前要编辑的色块 flag:,//是否为当前审核 } }) this.$refs.calendar.pushData(newD);