使用FullCalendar拖拽功能时遇"$ (...) is not a function"错误求助

Hey there, let's work through these FullCalendar issues one by one—they're almost certainly tied together, so fixing the root jQuery problem will likely resolve most of the others.

First: Fix the "$(...) is not a function" Error #

This error usually means jQuery isn't loaded properly, is loaded after FullCalendar, or is conflicting with another library that's also using the $ alias. Here's how to fix it:

• Verify loading order: Make sure jQuery is loaded before any FullCalendar scripts. Example:

  <!-- Load jQuery first -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <!-- Then FullCalendar core and plugins -->
  <script src="/path/to/fullcalendar/main.js"></script>
  <script src="/path/to/fullcalendar/interaction/main.js"></script>
  

• Correctly use $.noConflict(): If you're using another library that hijacks $, you need to map jQuery to a different variable and use that for FullCalendar initialization:

  // Release the $ alias for other libraries
  var jq = $.noConflict(true);
  
  // Use jq instead of $ for all FullCalendar calls
  jq('#calendar').fullCalendar({
    // Your config here
  });
  

• Check modular environments (Webpack/Vite): If you're using a bundler, ensure jQuery is installed (npm install jquery) and properly imported before FullCalendar. You may also need to expose it globally if FullCalendar expects it on the window object.

Second: Fix the Missing Top Toolbar #

The toolbar not loading is likely a side effect of the jQuery error preventing FullCalendar from initializing correctly. Once the $ issue is fixed, double-check these:

• Load FullCalendar's CSS: Without the core CSS, the toolbar (and other UI elements) won't render properly:

  <link rel="stylesheet" href="/path/to/fullcalendar/main.css">
  

• Confirm headerToolbar configuration: If you've customized the toolbar, make sure the config is valid. Even if you want the default, explicitly setting it can help debug:

  jq('#calendar').fullCalendar({
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    // Other config
  });
  

Third: Fix the Non-Working Drop Functionality #

Drag working but drop failing usually means the Interaction plugin is missing, or drop-related settings aren't enabled.

• Ensure the Interaction plugin is loaded: This plugin is required for all drag-and-drop features. If using CDN, add its script; if using npm, import it:

  // For npm imports
  import { Calendar } from '@fullcalendar/core';
  import interactionPlugin from '@fullcalendar/interaction';
  import dayGridPlugin from '@fullcalendar/daygrid';
  
  const calendar = new Calendar(document.getElementById('calendar'), {
    plugins: [interactionPlugin, dayGridPlugin], // Include interaction!
    editable: true,
    droppable: true
  });
  

• Enable editable and droppable: These settings are mandatory for drag-and-drop to work:

  jq('#calendar').fullCalendar({
    plugins: ['interaction', 'dayGrid'],
    editable: true, // Allows dragging existing events
    droppable: true, // Allows dropping external elements into the calendar
    // Add a drop callback to handle the dropped element
    drop: function(info) {
      // Example: Create a new event from the dropped element
      jq(this).fullCalendar('renderEvent', {
        title: info.draggedEl.innerText,
        start: info.date,
        allDay: info.allDay
      }, true); // true = persist the event
    }
  });
  

• Check external draggable elements: If you're dragging elements from outside the calendar, make sure they're marked as draggable and use the fc-event class (or have custom drag setup):

  <div class="fc-event" draggable="true">My Draggable Event</div>
  

Quick Debug Tip #

Open your browser's DevTools (F12) and check the Console tab for any additional errors—often, there's a clue about missing plugins or invalid config that's easy to miss.

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