切换FullCalendar日视图时出现Cannot read property 'event' of undefined错误求助

Hey there, let's break down the error you're facing when switching to Day View in FullCalendar, especially when events exist for that date. Here are targeted troubleshooting steps based on your code and the error message:

1. Remove Unnecessary Internal FullCalendar Rendering Code #

Looking at your code, there's a snippet that appears to be copied from FullCalendar's internal rendering logic:

// Grab individual elements from the combined HTML string. Use each as the default rendering.
// Then, compute the 'el' for each segment. An el might be null if the eventRender callback returned false.
$(html).each(function (i, node) {
  var seg = segs[i];
  var el = view.resolveEventEl(seg.event, $(node));
  if (el) {
    el.data('fc-seg', seg); // used by handlers
    seg.el = el;
    renderedSegs.push(seg);
  }
});

This code relies on FullCalendar's internal variables (segs, view, html) that aren't meant to be accessed directly in your custom code. In Day View, the length of segs might not match the number of elements in html, leading to segs[i] being undefined — hence the error when trying to access seg.event. Remove this entire block first and test if the error goes away.

2. Fix Event Data Mapping #

You're pushing events with an eventID property, but FullCalendar expects the standard id field for event identifiers. Update your event mapping code to use id instead:

events.push({
  id: data.Id, // Replace eventID with id
  title: data.title,
  description: data.description,
  start: start,
  end: end,
  backgroundColor: data.type.TypeColour,
  textColor: 'white',
  borderColor: 'white',
  allDay: false,
});

This ensures FullCalendar can properly track and render events across views, which might resolve inconsistencies in Day View. Also, verify that your backend returns valid ISO8601 date strings (like "2024-05-20T14:30:00") for start and end — invalid date formats can cause unexpected rendering issues.

3. Correct eventClick Parameter Usage #

Your eventClick callback passes the info object to GetEventDetailByEventId, but you're accessing eventinfo.id incorrectly. In FullCalendar's eventClick handler, the event's ID is stored in info.event.id, not info.id. Fix this in your function:

function GetEventDetailByEventId(eventinfo) {
  $.ajax({
    type: "POST",
    url: '@Url.Action("GetAppointmentById", "Admin")',
    dataType: "JSON",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({ 'id': eventinfo.event.id }), // Use eventinfo.event.id
    // ... rest of your code
  })
}

While this might not be the direct cause of your Day View error, it will fix the subsequent appointment detail load and prevent related issues.

4. Fix Typos in FullCalendar Options #

You have a typo in your FullCalendar initialization: droppale: true should be droppable: true. Typos like this can cause unexpected behavior in view rendering or interactive features, so correcting it is a good practice.

5. Debug with Browser DevTools #

If the error persists after the above fixes:

• Open your browser's Developer Tools (F12) and go to the Console tab to see the exact stack trace of the error.
• Set a breakpoint on the line where the error occurs to inspect the seg variable and check why it's undefined.
• Compare the length of the segs array with the number of elements in $(html) to see if there's a mismatch causing the index to go out of bounds.

内容的提问来源于stack exchange，提问作者Stu