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?

  • 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 { => {

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

  • Hossein


    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, { …. });
    The ‘…’ between the example contains the settings from this page:
    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?

    • Brett Erpel

      Hey, just actually had to do this myself in Vue.

      const FullCalendar = require(‘fullcalendar’)

      Works for me at the top of the file. Looks like only the old ES5 way is supported currently.

      • Helene Shaikh

        Do you happen to have a code sample on how to start using FullCalendar with VueJS? I’m new to Vue 🙂

      • rupesh dharma

        Hai, i had required for this one in my vue project. i had developed based upon that but i got some error is

        Uncaught TypeError: el.addClass is not a function,

        i think the problem is calendar.render(), but without of this vue is not work

        Please help me

  • Camilo Andres Quiroga

    Hi, i need make my calandar with Google API Calendar, i find this example:, How do I implement it? Is there any documentation for this example? Maybe source code?, thank you, sincerely (y)

  • Smiley

    Hi! Great great work here. 🙂
    I am planning to use this in my meeting reservation app. Can you provide me an example on how it should be implemented in ReactJS?

    Your reply would be greatly appreciated!

  • Helene Shaikh

    How can I remove an event with the new alpha release?
    Basic setup:

    Function in which I need to remove an event: (red square is how it used to be done in previous versions)

  • Andrew Aponte

    I found FullCalendar and was happy, it had all the features that my calendar (react-big-calendar) was missing. Then I saw it depended upon jQuery and became sad. Then I found this blog post and became happy again. Then I realized it’s only alpha, and 5 months later, still in alpha, and became sad again. #EmotionalRollercoaster

    I’m going to give the alpha version a spin however. Is it stable enough to use in production? Or would it be wiser to wait?

    • I enjoyed your post Andrew. Just wait one week. Alpha 2 is almost ready (where many parts of the API have been changed, including removing moment and changing how dates/timezones work). Code complete, but just writing the docs now. The API will be nearly frozen after that point.

      • Andrew Aponte

        Yes! Great news. Thanks for the update, and thanks for all of the hard work you’re putting into this.

  • rupesh dharma

    I got below error in my vue project

    Uncaught TypeError: el.addClass is not a function,

    Please help me

  • rupesh dharma

    Uncaught TypeError: specialTokens[fakePart.substring(…)] is not a function
    at renderFakeFormatStringParts (fullcalendar.js?49ae:4858)
    at renderFakeFormatString (fullcalendar.js?49ae:4841)
    at formatDate (fullcalendar.js?49ae:4642)
    at Moment.moment_ext_1.newMomentProto.format (fullcalendar.js?49ae:4559)
    at Object.oldMomentFormat (fullcalendar.js?a25c:1494)
    at renderFakeFormatStringParts (fullcalendar.js?a25c:5121)
    at renderFakeFormatString (fullcalendar.js?a25c:5114)
    at formatDate (fullcalendar.js?a25c:4915)
    at Moment.moment_ext_1.newMomentProto.format (fullcalendar.js?a25c:4832)
    at DayGridEventRenderer.EventRenderer._getTimeText (fullcalendar.js?a25c:4710)
    error in vuejs

    Please help me it’s urgent

  • i am looking for a developer who can help me with customization. I already have the calendar implemented, but when i open the cakephp page, it loads all the 10.000+ events of the database and as such loads slow. I want it to only load the current month:

  • Shashidhar Reddy

    I want to use timezones for my calendar, present i’m using fullcalendar alpha version, can anyone help me please ?

  • Chris Gali

    Hi! Thank you for FullCalendar. It’s just awesome! I do have a question in Alpha Release 4. In the click of a custom button how do I get access to the calendar. I want to do “fullCalendar.refetchEvents();” on the click of a custom button.

    • Chris Gali

      Was able to access fullCalendar variable (that created var fullCalendar = FullCalendar…) in the click function (I guess I will not understand JS variable scoping)