FullCalendar 2.1.0 Released

Version 2.1.0 has been officially release today, after being in beta for a month. It is jam-packed with features and bugfixes. 32 issues have been closed, many of which are major and required a significant code refactor.

Many of the calendar’s CSS class-names have changed, which is a backwards-compatibility concern. And the base CSS has been almost completely rewritten. So if you have custom CSS styling an old version of FullCalendar, it probably won’t work on the newest version. JavaScript API compatibility has been maintained however.

The too many events issue has been implemented, the most demanded feature. When eventLimit is enabled, a link will appear on days that have lots of events, with the option to see more. When enabled, the default behavior is to display a popover panel with all the events. This behavior can be fine-tuned with eventLimitClick.

more_before_open                more_after_open

Rendering for printers has been greatly improved. In the past, this behavior was rather glitchy, especially cross-browser, but it has been fixed with robust tailored CSS for each view.

printing_example

jQuery UI has been dropped as a dependency due to this version’s alternate techniques to event drag-n-drop and resizing. You no longer need to include any jQuery UI scripts on your page for anything FullCalendar-related.

no_jqui

Ironically, with addition of many new features and the removal of a dependency, because of smart code reuse, the file size of the minified JS stayed roughly the same.

For a full list of changes, in addition to some minor backwards-incompatibility notes, please see the full changelog.

Thank you to everyone who helped out with reporting issues during the beta period! Going forward, if you experience any issues, whether related to the new features or not, please follow the Bug Report Instructions.

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

    Great Job Adam… I will give it a try right now!!

  • Zach

    thanks for your hard work!!! giving it a go now…

  • Hakan Ataman

    Great job but there is a kind of problem. Where is them print demos? Espescially for agendaday. We cant print which we saw on screen in agendaday..

  • Guest

    No Jquery UI – GREAT 🙂

  • No Jquery UI – GREAT 🙂

  • Thanks so much! We’re live with 2.1.0 already 🙂

  • Nirmalya

    How could I edit or delete an event?

  • Viktor Pas

    Sorry there is a question whether in your calendar to add the mapping for the year? Thank you

  • handoyo

    Thanks a lot for the great plugin

  • RayT

    Dumb Question. Where in the css do I set the following items?

    Font Type/Style/Size of the Month

    Font Type/Style/Size of the Day Name

  • baxang

    Thanks for the great work!

  • billy

    is it possible (if yes, how?) to display an event half in on day and half in the next day in week/month view if start-time is 11am on 1st day and end-time is 11am 2nd day

  • Seungwoo Lee

    I’m afraid it’s right place to ask a question. Please understand our desperated situation.
    We’re using fullcalendar-2.1.1 with jquery mobile and touchSwipe plugin. We added swiping handlers to move day back and forth. When a user swipe on some events, swiping handler doesn’t get any notification, but on the empty calendar area it works fine. Please let us know how to overcome this problem!

    • Seungwoo Lee

      We solved this problem by replacing Touch-Swipe plugin with Hammer.js.
      jQuery mobile built-in swipe feature is considerable way but it has sensitivity problem on Cordova based mobile application.

      • Ian Mark Tabaco Muninio

        Can you provide an example on how?

        • Seungwoo Lee

          You can get hammer.js at http://hammerjs.github.io/

          Add some initialization code like below.
          * #calendar_view is a ID for fullcalendar.

          I hope this works for you.

          ———————————————————————
          $(document).ready(function(){

          (your code here)
          .
          .

          //swipe initialize
          var recognizers=["pan", "pinch", "press", "rotate", "tap"];
          var myElement = document.getElementById("calendar_view");

          var mc = new Hammer(myElement);

          for(i=0;i<recognizers.length;i++){
          mc.get(recognizers[i]).set({enable:false});
          }

          mc.get(‘swipe’).set(
          {
          direction: Hammer.DIRECTION_HORIZONTAL,
          threshold: 30,
          velocity: 0.5
          });

          mc.on("swipeleft swiperight", function(ev) {

          if(ev.type=="swipeleft"){

          $(‘#calendar_view’).fullCalendar(‘next’);

          }else{

          $(‘#calendar_view’).fullCalendar(‘prev’);

          }

          });

          });

  • Rock Malvia

    Awesome stuff.print css options are also great. We tried to export the excel but we missed the css applied. Are there any suggestions for this issue?

  • Vimal Ramakrishnan

    Hi All, I need kind help from all of you. I using fullcalendar-2.0.2 in my project. Please refer the attachment image, Requirement is I need to create circle in front of title for process completion. Can anyone please help me out this scenario

    • Wesley Moore

      Example below, I use eventRender to add in either an image or colored text prepended
      , eventRender: function(event, eventElement) {

      if (event.className == ‘fc-overdue’)

      eventElement.find(“div.fc-event-inner”).prepend(“”);

      if (event.source.data.stream == ‘myTasksOnTime’)

      eventElement.find(“div.fc-event-inner”).prepend(“ “);

      if (event.source.data.stream == ‘myTasksLate’)

      eventElement.find(“div.fc-event-inner”).prepend(“ “);

      }

  • Андрей Курицын

    Hello. Why the end of the calendar events shifted back one day. For example event ends 15/12/2014, but the calendar is displayed as 12/14/2014. I use fullcalendar-2.1.0

  • Hi All, Need help from you guys. I am using fullcalendar for my client project and have implemented many things by customizing the plugin. Am struck at some point(Pls refer screenshot). Please provide me your valuable inputs