搭建FullCalendar项目JSFiddle遇异常，寻求技术指导

Hey there, let's work through the problems you're facing with your FullCalendar setup in JSFiddle. Both the Chrome POST error and Firefox's missing time slots point to common dependency or configuration gaps, so let's break this down step by step:

1. Make Sure You're Loading All Required Dependencies #

The version of FullCalendar you're using (since you're calling $('#calendar').fullCalendar()) relies on two core libraries to work properly, plus its own CSS for rendering the UI:

• jQuery: Must load before FullCalendar's JavaScript file—FullCalendar uses jQuery for DOM manipulation.
• Moment.js: Older FullCalendar versions (v3 and earlier) need this for date parsing and handling.
• FullCalendar CSS: Without this, the time slots, month grids, and other UI elements won't render at all (this is almost certainly why Firefox shows no time slots).

In JSFiddle's "External Resources" tab, add these in this exact order:

1. A stable jQuery version (e.g., https://code.jquery.com/jquery-3.6.4.min.js)
2. Moment.js (e.g., https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js)
3. FullCalendar's CSS file (e.g., https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css)
4. FullCalendar's JavaScript file (e.g., https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js)

2. Fix the "Please use POST request" Error in Chrome #

Even if you aren't using forms or AJAX explicitly, older FullCalendar versions can trigger silent internal requests (like fetching locale files) if certain configurations are missing. Here's how to fix it:

• Add the locale option to your FullCalendar initialization and set it to your preferred language (e.g., locale: 'en'). This prevents the library from trying to auto-fetch locale data via GET, which might be triggering JSFiddle's error.
• Ensure all your external resources use HTTPS URLs (not HTTP)—mixed-content issues can cause unexpected request blocks in Chrome that manifest as weird errors like this.

3. Double-Check Your HTML Setup #

Make sure you have a valid target element for the calendar in JSFiddle's HTML panel:

<div id="calendar"></div>

Without this, your JavaScript code has no DOM element to attach the calendar to, which could lead to silent failures or partial rendering.

4. Wrap Your Initialization Code in $(document).ready() #

JSFiddle sometimes loads scripts before the DOM is fully ready, which can cause FullCalendar to fail to find the #calendar element. Wrap your code like this to avoid that:

$(document).ready(function() {
  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    defaultView:'agendaWeek',
    defaultDate: '2018-01-18',
    editable: true,
    selectable: true,
    selectHelper: true,
    slotDuration: '00:15:00',
    snapDuration: '02:00:00'
  });
});

Give these steps a try—most likely the missing dependencies or DOM-ready wrapper are the root causes of both issues.

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