FullCalendar 1.6 Released

Version 1.6 is the most feature-packed release in a while. The feature list was mainly driven by pull requests I received through Github. I want to make FullCalendar a more community-based project, so this is a good place to start. Thank you to all the contributors!

New Look

6972035_origFirst off, FullCalendar got a facelift. The default look now sports Bootstrap-inspired buttons and colors for a much more updated look. It utilizes CSS3, but degrades nicely on older browsers.

On a related note, the HTML markup that comprises buttons and events has been simplified. It will hopefully easier to style. If you are upgrading to this version and have custom CSS that depends on the old HTML skeletons for buttons or events, you might need to rework your CSS a bit.


New Features

View the full changelog

jQuery and jQuery UI Support

FullCalendar has been tested and bundled with the latest jQuery (1.9.1) and jQuery UI (1.10.2).

In the past, FullCalendar has always supported 2 versions of each library: one new version, and one “legacy” version. Starting with this release, FullCalendar will only support the newest minor version of each library. So, for this release, jQuery 1.9.x and jQuery UI 1.10.x are supported. Although older versions may work fine.

IE6 Support

To ease development, and because barely anyone uses this horrid browser anymore, support for IE6 has been officially dropped. There is still support for IE7 and above however.

License

FullCalendar has been dual-licensed under an open source MIT and GPL license (you could pick which one you wanted). Now, FullCalendar is only licensed under the MIT license. You can always relicense it under GPL if you need to. This is the exact direction the jQuery project took, because it simplifies things. Don’t worry, FullCalendar is still free and open source!

Internal Build System

For internal development, FullCalendar now harnesses the Grunt and Lumbar build systems. These systems improve development workflow and help organize a growing codebase.

Bower Component

Bower is a package manger for managing web-based dependencies. FullCalendar now has an entry in the Bower component registry, so installing FullCalendar could be as easy as typing “bower install fullcalendar”.
Psst... there are separate pages for feature requests, bug reports, and getting help.
  • I must say a state of the art plugin, very very useful.

  • Great to see it’s being well maintained. I like the community-driven direction! Thanks for all the hard work.

  • AWESOME!!!!

    YOU ROCK!

  • Phebe S

    Thanks, man! This is just what I needed.

  • Juukie14

    Great news. Thanks so much!

  • MaKN

    Thank you for this calendar, i have browsed many of the scripts but yours is still best! using in my second project!

  • QuBo

    NOW THAT’S GOOD NEWS!!

  • James Hinderks

    Just wanted to take the time to say thank you for this awesome plugin. I’ve been using it for several years and it’s worked very well. I was so excited to see a new version available!

  • Awesome, thanks!

  • Lv Mingzhou

    Great job. Thanks!

  • Thanks for the very useful updates!

  • Jacinda

    Hi, I was just wondering if you knew if this could be implemented on a facebook page? The code looks awesome

  • tony ho

    how can support jsonp?

  • ST

    Really great!

  • Wallouf

    Thanks alot for this good plugin. I use it for a long time now. Good job and again: Thank you !

  • Tudy

    Great plug-in, thanks very much!

  • Ibrahim

    You are quite cool man.

  • Great!!! Thanks for this update!!

  • Excellent Plugin !!!!! Good Job!

  • Hi Adam,
    this plugin is great stuff, Thanks a lot.
    I would love to know whether it is or whether you could make it possible to colorize working hours on an individual day basis in the calendar, potentially with an array attribute attached to each day
    so that multiple pause timeframes can be added as well.

    Any input is appreciated for this.

    Thanks and best

    Andreas

  • Ram Sudheer

    Hi Adam,

    i just followed the steps which you specified in “Basic Usage page”. I am unable to see the month-based calendar.

    I am sorry, i am new to jquery. please help me on this. Below is the my jsp code.

    <head>
    <link rel=”stylesheet” type=”text/css” href=”/common/styles/fullcalendar.css” />
    <script type=”text/javascript” src=”/common/styles/jquery-1.8.1.js”></script>
    <script type=”text/javascript” src=”/common/styles/fullcalendar.js”></script>
    <script>
    $(document).ready(function() {

    // page is now ready, initialize the calendar…

    $(‘#calendar’).fullCalendar({
    // put your options and callbacks here

    dayClick: function() {
    alert(‘a day has been clicked!’);}
    });

    });
    </script>
    </head>
    <html>
    <body>
    <div id=”sdusa_body”>
    <div id=”sdusa_2column_column2″>
    under process
    <div id=”calendar”>
    </div>
    </div>
    </div>
    </body>
    </html>

  • Thanks man you ar doing a great job

  • AK

    I can’t select on the calendar when in week or day view. It only seems to now work in the month view. Is there something that I need to do to enable selection in these views?

  • AK

    I have solved my problem – I was using the wrong version of jQuery

  • Nathan

    what is the suggested database setup/table layout for the calendar? The documentation doesn’t list the prerequisites for saving/retrieving information from the database or what the db schema should look like.

  • sj

    Super! Thank you very much!

  • excellent plugin, thank youu

  • I use FullCalendar in MakePlans.net (online appointment booking/scheduling application). Just wanted to say thanks!

  • I would like to upgrade from version 1.5 to 1.6.1.
    What files need to be replaced and which ones do I have to keep?
    Is there a guide on how to do this?
    I also added a request: is it possible to create a rss feed from the different groups of the calendar?

  • NickS

    Nathan: The db schema is up to you. Full Calendar consumes Event Objects, which are documented (see the Event Object documentation on the Full Calendar site). You could have a schema which identically mapped to that object, or you could transform your own information into Event objects.

    I use an object in my web service that I call CalendarEvent; it contains properties that match what the Event Object has, as well as some custom properties (Full Calendar doesn’t do anything with these additional properties, but it does retain them).

    Here’s a demo on the Full Calendar site:

    http://arshaw.com/js/fullcalendar-1.6.1/demos/json.html

    Try viewing the source for the demo, and accessing json-events.php at the same URL to see what Full Calendar is consuming.

    My web service serializes CalendarEvents to an array of events in JSON format; this web service is specified when instantiating Full Calendar by setting the events property to the URL of the web service (see “events (as a json feed)” in the Full Calendar documentation). Don’t forget that start and end will be including on the querystring, and take the form of Unix timestamps. Your back end code should parse these parameters, and restrict events that are served to ones that occur between start and end dates.

    I hope that helps.

    • Shreya Thakkar

      Hi
      I am facing an issue with showing the events. I have given the url of the Google Calendar events which are visible if i run the url as it is but the full calendar is not able to pick up events from there, it picks up events if i make my Calendar public and specify the url mentioned in the documents but not the url giving events as json feed.

      Please direct me as to what may be the problem.
      Thanks

      • Shreya Thakkar

        Also, does it work for private Google feeds as well?

  • Andrey

    It’s better to fix your source transformOptions for Google Calendar. Replace:
    url: sourceOptions.url.replace(//basic$/, ‘/full’) + ‘?alt=json-in-script&callback=?’

    with:

    url: sourceOptions.url.replace(//basic$/, ‘/full’) + (sourceOptions.url.indexOf(‘?’) == -1 ? ‘?’ : ‘&’) + ‘alt=json-in-script&callback=?’

    In that case it would be possible to customize requests to Google Calendar.

  • Andrey

    My final version:

    return $.extend({}, sourceOptions, {
    url: sourceOptions.url.replace(//basic$/, ‘/full’) + (sourceOptions.url.indexOf(‘?’) == -1 ? ‘?’ : ‘&’) + ‘alt=json-in-script&callback=?’,
    dataType: ‘jsonp’,
    data: data,
    startParam: false,
    endParam: false,
    success: function(data) {
    var events = [];
    if (data.feed.entry) {
    $.each(data.feed.entry, function(i, entry) {
    var startStr = entry[‘gd$when’][0][‘startTime’];
    var start = parseISO8601(startStr, true);
    var end = parseISO8601(entry[‘gd$when’][0][‘endTime’], true);
    var allDay = startStr.indexOf(‘T’) == -1;
    var url;

    if(typeof(entry.link) !== ‘undefined’) {
    $.each(entry.link, function(i, link) {
    if (link.type == ‘text/html’) {
    url = link.href;
    if (ctz) {
    url += (url.indexOf(‘?’) == -1 ? ‘?’ : ‘&’) + ‘ctz=’ + ctz;
    }
    }
    });
    }

    if (allDay) {
    addDays(end, -1); // make inclusive
    }

    events.push({
    id: entry[‘gCal$uid’][‘value’],
    title: entry[‘title’][‘$t’],
    url: url,
    start: start,
    end: end,
    allDay: allDay,
    location: entry[‘gd$where’][0][‘valueString’],
    description: entry[‘content’][‘$t’]
    });
    });
    }


    In that case i can disable URLs – i wanna prevent users clicks by default. For example, like this request:

    https://www.google.com/calendar/feeds/ru.russian%23holiday%40group.v.calendar.google.com/public/basic?fields=entry(gCal:uid,gd:where,gd:when,title,content)

  • Ken

    Adam Shaw you’re awesome. I prefer your calendar system over any other and have been using it for years. Good on you for continuing to improve it. clearly there are many people who greatly appreciate your top notch work.

  • Andres

    Hi Adam, there is any way to disable a date range in week or day view. Thanks

  • Abbas

    I would like to read some documentation where it tells me how to use the calendar, like each and every feature is described for example the repeat and duration dropdowns they are confusing, is that possible?

  • Hello, i want to put a scroll to each td but div with events it’s absolute position how i can do it ?

  • Great work on this features! i’ve the necessity to print the calendar, there is a way to do this?
    Thank you!

  • Nino

    Thank you very much for this calendar.
    I am writing a site in Hebrew,and I could not find anywhere Henrew support.
    Is there a possibility for Hebrew support?

    Kind regards,
    N.

  • Syed Daniyal Shah

    Excellent jquery plugin very useful

  • Very nice work … but having an issue calling a Java Servlet to get JSON data back:

    from the JSP (shows nice cal with all the functionality):

    header: {
    left: ‘prev,next today’,
    center: ‘title’,
    right: ‘month,agendaWeek,agendaDay’
    },
    eventSources: [{
    url: ‘http://localhost:777/GIPMS_PAIR/ActionServlet?action_type=calendar_data’
    }],
    editable: true,

    And my Google JS windows shows it is getting this data:

    [{id: ‘111’, title: ‘Event1’, start: ‘2013-06-29’}]

    yet nothing shows in June, July or August 2013 … any thoughts? Thanks!

  • Marc

    Just wanted to say thanks for the great calendar! Used it many times

  • sagar

    Just want to know how can we implement functionality for removing events?
    Else all are nice. Grete plugin…

  • gjang2

    You can’t just ask
    customers what they want and then try to give that to them. By the time you
    get it built, they’ll want something new.

    Comprar
    Views YouTube