如何为FullCalendar新增users参数,是否需要修改fullcalendar.js文件?
解答
优先推荐方案:无需修改fullcalendar.js
FullCalendar本身不会拦截或校验自定义配置项,你代码里写的users:'https://events.com/usersjson'会被正常存储在日历实例的配置对象中,只要你额外手动请求这个接口拉取用户数据即可,完全不需要修改原库代码,也不会影响原有功能的正常运行。
你可以在日历初始化代码后补充以下逻辑:
$(document).ready(function() { // 你原有的日历初始化代码 var calendar = $('#calendar').fullCalendar({ // 这里放你原有的所有配置项,包括events、users配置 defaultView: 'agendaWeek', minTime: "08:00:00", maxTime: "20:00:00", editable:false, header:{ left:'prev,next today', center:'title', }, events: 'https://events.com/eventsjson', users:'https://events.com/usersjson', selectable:true, selectHelper:true, select: function(start, end, allDay) { var titlestart = $.fullCalendar.formatDate(start, "DD-MM-Y HH:mm:ss"); var r = confirm("Request Time " + titlestart); if (r == true) { event.preventDefault(); var subject = 'Booking '+titlestart; var emailBody = 'Create booking for '+titlestart showDialog(titlestart); } }, }); // 新增拉取用户列表的逻辑 var userApiUrl = $('#calendar').fullCalendar('option', 'users'); $.getJSON(userApiUrl, function(userList) { // 拉取到的用户列表可以存在全局变量或者你需要的位置直接使用 window.calendarUserList = userList; }); });
这种方案的优势是不会侵入原库代码,后续升级FullCalendar版本也不需要重新调整逻辑。
不推荐方案:修改fullcalendar.js添加原生支持
如果你一定要让FullCalendar原生支持自动拉取users接口数据,才需要修改原库代码,操作位置如下:
- 找到FullCalendar源码中的默认配置定义段(一般为名为
defaults的对象),新增一行users: null声明该配置项 - 找到源码中初始化完成后自动拉取events接口数据的逻辑,在其后新增同逻辑的拉取代码,判断如果配置了users的url地址,就自动发起请求拉取数据存储到日历实例的内部变量中
该方案的缺点是后续升级FullCalendar版本时,你修改的内容会被新的源码覆盖,需要重新调整,因此不建议使用。
内容的提问来源于stack exchange,提问作者aneuroo
相关产品推荐
相关产品推荐

