FullCalendar插件记录

中文文档地址（不全）：www.helloweba.net/javascript/…

var calendar

document.addEventListener('DOMContentLoaded', function () {

        var date = new Date();
        
        var d = date.getDate();
        
        var m = date.getMonth();
        
        var y = date.getFullYear();
        
        var calendarEl = document.getElementById('calendar');
        
         calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],//引用几种模板
            
            header: {
                left: ' ',
                center: 'dayGridMonth,timeGridWeek,timeGridDay',
                right: 'prev,title,next'
            },//设置头部的标签和视图标签
            
            //dayGridMonth,,listMonth
            
            defaultView: 'timeGridWeek',//默认视图
            height:$(window).height() //设置高度
            defaultDate: defaultDate,//默认时间
            
            locale: "zh-cn",//语言设置，需要引用语言包
            
            firstDay: 1,//周视图按照星期一展示
            
            editable: false,//禁止拖动
            
            slotEventOverlap:false,//内容不重叠
            slotLabelFormat: [
                {
				  hour: '2-digit',
				  minute: '2-digit',
				  omitZeroMinute: false,
				  hour12: false,
				  meridiem: 'short'
				}],//左侧展示24小时的时间
           
            scrollTime :'08:00',//默认时间
            minTime : '00:00',//最小时间
            maxTime:'24:00',//最大时间
           
           dragOpacity:{	//拖动时候的不透明度。
			agenda: .5, //对于agenda试图
			'':.6 //其他视图
		    },
           
           eventDrop:function(){ //当拖拽完成并且时间改变时触发
               
               
           },
           
           eventResize:function(){//在日程事件改变大小并成功后调用
               
           },
           
            //allDayDefault: true,//是否展示全天，（如果为true，周视图他不会按照时间展示，全都展示全天），如果全天和小时都要展示，默认不选择，时间一个只展示年月日，一个展示年月日时分秒，时间格式最好不要是（yyyy-mm-dd）,在ie上不支持，
            
            eventLimit: 10,//默认多少条，如果数据超过后面会加上更多提示
           
            events: function (start, callback) {
               var event=queryMonthSchedulesForPC(beginDay,endDay);
                callback(event);
            },//插件调用接口并渲染（他这里默认是周视图，切换月视图会调用接口，再次切换周视图就不会调用接口了）
            
            //绑定事件
            dateClick: function (arg) {
               
            },//点击日期就会触发这个事件
            eventClick: function (arg) {
               
            },选中日历上的内容就会触发这个事件
            
            eventRender: function (event, element) {
            	event.el.setAttribute("title",event.el.innerText);
             	//event.el.insertBefore(document.createElement("em"),event.el.firstElementChild);
            	event.el.insertBefore(document.createElement("i"),event.el.firstElementChild);
            }//页面渲染的时候就会触发这个事件，你可以在这里加更多的内容
        });
        calendar.render(); 
  
    });
    
    calendar.refetchEvents(); 刷新，每次引用这个方法就会触发events
    
    
    插件地址：https://fullcalendar.io/复制代码

转载于:https://juejin.im/post/5cb154b05188250df17d5191