最新版fullcalendar 4.3.1 应用实践(二)

前言

上一篇笔记已经引入了fullcalendar,并成功在页面上显示了日历，然后我们要与后台数据交互，在网上找了很多都是旧版的方式，这篇笔记主要记录改版之后如何通过ajax请求将新建日程实现。

正文

我们下载fullcalendar 4.3.1压缩包解压后，发现官网上的例子都是前端的实现，并未和后台数据进行交互，然后我百度了之后发现网上大部分都是用的旧版的方法$('#calendar').fullCalendar({}），然而在新版中已经被弃用了，然后我查看了新版的js,发现新版的提供了calendar.addEvent()这个方法。

然后我们就开始尝试将ajax返回的结果用这个方法显示在日历上。

form.on('submit(formDemo)', function(data){
                formula.post({
                    url: "${ctx}/personSchedule/add",
                    params: {
                        name :data.field.name,
                        isPublic:data.field.isPublic,
                        startTime:data.field.startTime,
                        endTime:data.field.endTime,
                        address:data.field.address,
                        isLock:data.field.isLock,
                        description:data.field.description
                    },
                    successCallback: function (result) {
                        var eventObj = new Object();
                  
                        eventObj.id = "1234";
                        eventObj.title = "测试";
                        eventObj.start = new Date();
                        eventObj.end = new Date();
                       
                        calendar.addEvent(eventObj);

                    },
                    failureCallback: function () {
                        layer.msg("失败");
                    }
                });
                return false;
            });

我们构建一个实体，其中的参数设置要按照官网上要求的进行设值。（中文文档地址：https://www.helloweba.net/javascript/454.html）

然后通过 addEvent() 方法将值设置进去，最后在页面上就能看到我们后台传过来的数据了。