FullCalendar无法解析控制器返回含daysofWeek的JS对象数组求助
看起来你遇到的核心问题是控制器返回的重复周事件无法渲染,但硬编码的可以,同时还有时间显示错误的问题。我帮你拆解下可能的原因和解决步骤:
一、重复周事件不显示的核心原因
FullCalendar对重复事件的格式有严格要求,对比你硬编码的有效代码和控制器返回的数据,大概率是这几个点出了问题:
1. 属性名错误:daysofWeek → dow
FullCalendar识别重复周事件的字段是小写的dow,而不是daysofWeek。如果你的控制器返回的事件对象里用了daysofWeek作为键名,FullCalendar会直接忽略这个字段,自然无法渲染重复事件。
2. dow的类型必须是数字数组,而非字符串
你硬编码的代码里写的是dow: '[1,2,3,4,5]'(字符串形式的数组),但实际上FullCalendar要求dow是纯数字数组(比如dow: [1,2,3,4,5])。如果你的数据库存的是字符串格式的数组(比如"[1,2,3,4,5]"),一定要在控制器里把它转换成真正的数字数组再序列化JSON。
举个C#控制器的示例:
// 正确构造重复事件对象 var recurringEvent = new { title = "OFA-0001 : (test event log)", dow = new int[] {1,2,3,4,5}, // 周一到周五(0=周日,1=周一) start = "10:00:00", end = "11:00:00", allDay = false // 必须设为false,因为是带时间的事件 };
序列化后返回的JSON应该是这样的:
[ { "title": "OFA-0001 : (test event log)", "dow": [1,2,3,4,5], "start": "10:00:00", "end": "11:00:00", "allDay": false } ]
3. 重复事件不能包含固定日期的start字段
如果你的控制器返回的重复事件里附带了具体日期(比如"start": "2024-05-20T10:00:00"),FullCalendar会把它当成固定日期事件,而非每周重复事件,这也会导致重复规则失效。
二、时间显示错误的解决方法
时间显示异常通常和格式不匹配有关:
- 对于重复事件:
start和end只需要保留时间部分(比如"10:00:00"),不要带日期。 - 对于固定日期事件:需要返回完整的ISO格式日期时间(比如
"2024-05-20T10:00:00")。 - 检查FullCalendar版本:如果你用的是v4+版本,
timeFormat已经被替换为eventTimeFormat,需要修正配置:// v4+版本的时间格式配置 eventTimeFormat: { hour: '2-digit', minute: '2-digit', meridiem: 'short' }
三、额外的前端检查
确保前端正确解析了控制器返回的JSON:
在$.post的回调里,确认result已经是JavaScript数组,而非JSON字符串。如果控制器返回的是纯文本格式的JSON,可以手动解析:
$.post('/SchedulingManager/SetVariable', { key: a, value: "Test" }, function (result) { // 手动解析JSON(如果需要) var eventArray = typeof result === 'string' ? JSON.parse(result) : result; GenerateCalendar(eventArray); });
四、版本适配提醒
如果你的FullCalendar是v4及以上版本,重复事件的API已经变更,不再使用dow字段,而是需要用recurrenceRule(RFC5545格式的 recurrence 规则):
{ "title": "OFA-0001 : (test event log)", "start": "10:00:00", "end": "11:00:00", "recurrenceRule": "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR" }
内容的提问来源于stack exchange,提问作者user14603474

