Alpha Release: jQuery Removal

Removing jQuery from the codebase will make FullCalendar more lightweight and allow for better integration with React/Vue/Angular. We have completed the detangling process!

Removing jQuery as a dependency is a non-backwards-compatible change of course, warranting a major version bump to v4.0.0. We will use this as an opportunity to introduce other breaking changes. A spec will soon be released detailing these changes. Subsequently,  community feedback will be gathered.

Prior to v4.0.0, we wanted to release an alpha containing the jQuery removal. If you are interested in playing around with it, here are some things you should know about the API:

  • Initializing a calendar and calling a calendar’s methods are now done in an object-oriented way.
  • All parts of the API that previously exposed jQuery objects now expose raw DOM nodes or arrays of raw DOM nodes.
  • We now rely on SuperAgent for ajax requests. We will eventually provide a way for you to tree-shake it away if you don’t need it.
  • Drag-and-drop of external elements into a calendar instance can still be done with jQuery UI, but you’ll need to use a connector. We’ve provided this connector, along with a connector for Dragula if you want to use that instead.
  • We’ve dropped support for IE9

For API examples and downloads:

Please leave a comment if you have feedback!

Paid Contractor Positions

We are hiring for two paid contractor positions. These positions will help out with the release of v4 as well as contribute on an ongoing basis:

  • Test Automation Engineer
  • Technical Documentation Writer

More information + How to Apply »

Psst... there are separate pages for feature requests, bug reports, and getting help.
  • Rthr Swckwsk

    When do you guys estimate a full release of 4.0?

  • Doug Black Jr.

    This is excellent news! Thank you for your hard work!

  • Calvin Sellers

    Why not just support HTML5 drag and drop capabilities? It is super easy and can be transferred across browser windows. So a user could have a list of items on one monitor and the calendar on another monitor. Dragging the items onto the calendar…this can be done firefox to chrome, chrome to chrome, etc with a lot of flexibility. So far Dragula and Jquery UI draggable limits dragging to same window/browser. This is a downer in my opinion when HTML5 drag and drop is super super easy!

    • Thanks for mentioning this Calvin. I’ve been researching this and the major downside seems to be lack of touch support. If another library is required to do this, then we’re sort of back where we started.

      • Calvin Sellers

        That’s fair. FullCalendar is an amazing tool from what I have seen so far and anyone would be crazy not to use it. I was able to get HTML5 DnD api to work for my needs. When I look at the application as a whole it looks very decoupled, but in the dragging and dropping it has a dependency which is why I “scream”. The calendar in my opinion shouldn’t care what is dropped on it but rather be capable of handling dropping from any source and the developer determines if it is allowed. It’s a great calendar, keep up the great work, and I will definitely never look for a different calendar!…unless you screw it up lol jk

        • sapristi

          @calvin_sellers:disqus Would you be so kind to share your implementation of DnD?

  • Svein Soermo

    Very good. I’ve been doing a lot investigation related to schedulers, and ng-FullCalendar was the winner. Removing jQuery is a BIG step in the right direction. I have two questions: Will V4 include recurring events? Any plans for an Angular Material Design theme?

    • 21Junipers

      Adam replied to me elsewhere that the intent was to do recurring events in V4. When I inquired as to the general approach to the implementation, I understood his response to be that recurrence would be based on rrule.js. There appears that determining how dates are handled (see below) may effect recurrence implementation with respect to time zones, etc. Add recurrence to FulCalendar would make it an easy choice.

      • Svein Soermo

        Thx a lot

  • Damien

    Hi, thank you for your hard work.
    Do you think V4 will include the full year view?
    (https://github.com/fullcalendar/fullcalendar/issues/1140)

  • Mirco Widmer

    How would I integrate the v4 alpha version into an Angular component? Until now I was used to do it like the following:

    ngAfterViewInit(): void {
    this.zone.runOutsideAngular(() => {
    jQuery(this.elementRef.nativeElement).fullCalendar(this.fullCalendarOptions);
    });
    }

    But the fullCalendar method is not available anymore on that element.

  • Hossein

    Hello,

    Have u an example with Symfony 3.4, please ? i would like to integrate fullcalendar v3 but i’m stuck with add/edit/delete action. Can u help ? please

    thank you

  • Alexander Grein

    Hi, I’m very interested in testing/using this new version without jQuery.
    Unfortunatelly I didn’t get it running in my webpack/vuejs environment.
    How do I have to import the packages?
    I tried to add a “import FullCalendar from ‘fullcalendar’;” in the head of my script section of my vue component.
    In the following code (mount method) I added this:
    let calendarElement = document.getElementById(‘fullcalendar-123’);
    let calendar = new FullCalendar.Calendar(calendarElement, { …. });
    calendar.render();
    The ‘…’ between the example contains the settings from this page: https://github.com/fullcalendar/fullcalendar/blob/jquery-removal/demos/default.html
    But I just get an error (r.a is undefined), if I try to execute my compiled js.
    Is there a simple example somewhere else, how to do?