FullCanendar V5.4使用

场景：纺纱企业的维保计划编制及调整，点击日期可以添加计划，通过拖动事件可以调整计划。

从12月16日拖动到12月17日后提示是否要调整计划，点击确定自动修改日期等相关信息，如果点击取消则事件还原到12月16日。

点击计划的事件后弹出编辑窗口，输入保养日期及周期

考虑之前使用旧版本函数及参数都和新版本不一致，特此说明一下版本：FullCalendar V5.4.0、Bootstrap 3.3.6 

HTML文件引入Bootstrap css、fullcalendar包里面的main.css、jQuery.js、fullcalendar包里面的main.js\Locales-all.js

添加JS代码

document.addEventListener('DOMContentLoaded', function() {
        var initialLocaleCode = 'zh-cn'; //当前版本直接使用中文的，未使用其他语言的，这个可以查询其他博客
        var localeSelectorEl = document.getElementById('locale-selector');
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            timeZone: 'local',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridWeek,dayGridMonth,listWeek' //'dayGridMonth,dayGridWeek,listWeek,timeGridWeek
              },
            initialView: 'dayGridWeek', //此处使用这个就是为了不显示时间，因为当前我的场景不需要展示时间
            firstDay:1,
            allDaySlot:true,
            locale: initialLocaleCode,
            buttonIcons: false, // show the prev/next text
            weekNumbers: true, //展示当前是第几周
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            selectable: true,
            dayMaxEvents: true, // allow "more" link when too many events
            contentHeight:750, //设置日历主体内容的高度，不包括header部分，默认未设置，高度根据aspectRatio值自适应。
            aspectRatio:1.5,//设置日历单元格宽度与高度的比例。
            //点击事件的回调
            eventClick: function(info) {
                edit(info.event.id,info.event.status);
            },
            //点击没有事件单元格的回调，当前是点击后添加一个计划
            dateClick: function(info) {
                add(info.dateStr);
            },

           //拖动时间的回调，当前是拖动调整计划使用，需要明确function里面info相关属性
            eventDrop: function(info) {
                //var str = JSON.stringify(info);  //此处调试时比较有用，当时因为之前用的旧版本，新版本的搞不清这个info到底有什么属性，所以通过这样的方式输出所有属性。
                //console.log("str="+str);
                //询问框
                layer.alert('确认要调整计划?', {
                      btn: ['确定','取消'] //按钮
                      ,icon: 6    // icon
                      ,yes:function(index){
                          updatePlan(info); //事件拖动并且事件改变时触发
                          layer.close(index);
                      }
                     ,btn2:function(index){
                         info.revert();          //点击取消按钮后还原
                         layer.close(index);
                     }});
            },
            events: function(arg, callback) {  //此处的arg里面的参数也可以参照上面的那个info输出后进行研究，要把参数都明确什么意思
                $.ajax({
                    url:"/maintenance/spinningMaintenanceRecord/getMaintenancePlan",
                    type : "POST",
                    //下面的startDate必须用单引号，不能用双引号
                    data: {'startDate':formatDate(arg.startStr),'endDate':formatDate(arg.endStr)},
                    //contentType:"application/json;charset:utf-8",
                    cache:false,
                    dataType: "json",
                    success:function(data){
                           var events=[];
                           for(var i=0;i<data.length;i++){
                               events.push({
                                   id:data[i].id,
                                   title:data[i].title,
                                   start:data[i].start,
                                   allDay: true,
                                   //background:'none',//背景颜色。
                                   //color: '#01A8F7',// 背景和边框颜色。
                                   //textColor:'#01A8F7',// 文本颜色。
                                   status:data[i].maintenanceStatus,
                                   editable:data[i].editable //事件可编辑
                               });
                           }       
                           callback(events);
                    },
                    
                }); 
            },
            //html内容前置条件，如果没有这一句，自定义的html不生效，必须
            eventContent: function(arg, createElement) {
                var italicEl = document.createElement('span');
                italicEl.innerHTML = arg.event._def.title
                var arrayOfDomNodes = [italicEl]
                return {
                    domNodes: arrayOfDomNodes
                }
            }
        });
        calendar.render();
});
      

function formatDate(date) {   //格式化日期函数
      var d = new Date(date),
      month = '' + (d.getMonth() + 1),
      day = '' + d.getDate(),
      year = d.getFullYear();                 
      if (month.length < 2) 
          month = '0' + month;
      if (day.length < 2) 
          day = '0' + day;                 
      return [year, month, day].join('-');
}

function updatePlan(info){   //更新计划函数，info.event表示拖动后的事件
    $.ajax({
        url:"/maintenance/spinningMaintenanceRecord/updatePlan",
        type : "POST",
        //下面的startDate必须用单引号，不能用双引号
        data: {'maintenanceId':info.event.id,'newDate':formatDate(info.event.start)},
        //contentType:"application/json;charset:utf-8",
        cache:false,
        dataType: "json",
        success:function(data){
            if(data.code>0){
                layer.msg(data.msg);  
                info.revert();  //拖动调整计划失败返回
            }
        },
        
    });    
}

function add(today) {
    layer.open({
        type : 2,
        title : '增加',
        maxmin : true,
        shadeClose : false, // 点击遮罩关闭层
        area : [ '800px', '400px' ],
        content : '/maintenance/spinningMaintenanceRecord/add/'+today // iframe的url
    });
}

function edit(maintenanceId,status) {
    if(status!='SUCCESS'){
        layer.open({
            type : 2,
            title : '编辑',
            maxmin : true,
            shadeClose : false, // 点击遮罩关闭层
            area : [ '800px', '400px' ],
            content : '/maintenance/spinningMaintenanceRecord/edit/' + maintenanceId // iframe的url
        });
    }    
}
 

下载Fullcalendar V5.4.0 https://github.com/fullcalendar/fullcalendar/tree/v5.4.0