FullCalendar 1.5 Released

Today marks the release of FullCalendar 1.5, which contains improvements in theming and visual customization, as well as increased flexibility with the JavaScript API. It also marks the first time a release has been announced on this shiny new blog, an upgrade from the boring changelog format.

New Default Look

FullCalendar has always provided a default styling for its buttons that looks consistent across all browsers (including the IEs) without using any image dependencies. That styling now looks more sleek and modern:
after
compared to the old version:
before

HTML/CSS Restructuring and jQuery UI Theming

A lot of FullCalendar’s internal HTML, CSS, and class names have been changed in order to simplify the codebase and solve some bugs. This might be a backwards-compatibility issue for developers that have written advanced CSS.
This changes the way FullCalendar inherits jQuery UI theme styles (for the better). If you are familiar with the jQuery UI ThemeRoller, it separates the “Clickable” button styles from the “Header” and “Content” styles so you can manipulate them independently.

Here is how the stock “Cupertino” theme looks, which is now bundled with FullCalendar:

8854370

Event Colors

It has always been a bit of a pain to change the color of your calendar’s events. It has traditionally been done through a [rather complicated] CSS statement you had to write by hand. However, the new preferred way of coloring events is through the eventColor, eventBackgroundColor, eventBorderColor, and eventTextColor options in the JavaScript (more info).
You can also change the color of individual events using the color, backgroundColor, borderColor, and textColor options of each Event Object.
Additionally, you can easily change the color of all events within a given “event source” (talked about in the next section…)

Event Source Options

Many developers have used the eventSources option to include events from a number of different feeds onto a single calendar. Developers are now able to embed options into these event sources, such as color and className. This avoids having to include the same data within every event of a feed.
If you want to use this new feature, it requires you to write your event sources a little differently.
One of the cool things about this new format is that you can include any of the jQuery $.ajax settings in your JSON feed sources! This lets you easily pass additional parameters to your server-side script, change from GET to POST, or even listen to callbacks such as success or error (more info).
Issues that have been closed:

  • Event coloring through Event properties [117]
  • Day numbers not visible in certain jQuery UI themes [299]
  • Default cursor for non-editable no-url events [327]
  • Allow json feed caching [355]
  • Control $.ajax options when fetching feed [386]
  • Don’t use <a> tags for events with no URLs [395]
  • SSL in IE7 forces a nonsecure popup [504]
  • Ajax error callback [754]

View the Changelog

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

    Hi,
    I tried your calendar under IE9 (which was just released last week), and it show no calendar 🙁

    Any update for IE9 soon??

    Thanks

    • The calendar is quiet amazing and it looks so wonderful
      Regards,
      Jacob Smith

      • Calendar has many functions that can be used by many people. You can find many types of calendars that can be stored in a room that can be seen.

      • Everyone needs a calendar to remember there are many people looking for many types of dates that should they make the schedule. You can find many types of calendars with many versions.

      • Calendar application that you show on this page is an application that is required by any computer user. I think by having this application, the users of the computer can be easier to manage their schedules.

    • Shri

      How to right click and open the context on full calendar?

  • Sorry if this is a little off topic or posted in the wring place.

    Firstly I would like to thank your for recent upgrades and your hard work on fullcalednar which I am testing on my website. I will also be making a donation if the tests and my users like it and everything seems perfect so far.

    I am also writing to see if you would consider an additional view like a very simple schedule (Gantt) type layout.

    My site has a single column of names down the left with a time time across the page. You could say its like a 1 line month view which palying with your month view code it can do. But 1 line for each resource.

    I would also be willing to purchase this if it is an option.

    We love fullcalendar so a schedule view following the same style and functionality as fullcalendar would be our dream situation.

    Keep up the great work.

  • Steven

    Seems the IE 9 bug is related to a jQuery issue.
    http://bugs.jquery.com/ticket/8052

    Supposedly fixed in jQuery 1.5.1 but I haven’t had a chance to test it.

  • Steven

    Just replaced 1.5 with 1.5.1 in the samples… The ones I tested work fine in IE 9, so looks like it was a jQuery bug…

  • Bernard

    Adam, Thanks for that event colouring.
    Your component is masterpiece, both concerning functionality and coding style and architecture.

  • Thanks for the great update. 🙂

  • godbout

    ‘ve been working with your calendar for about a week, nice job! and nice to see it’s still in dev 🙂

  • Thank you! I can’t wait to try it.

  • godbout

    Hi again Adam,

    I got 2 small issues that I’ve quickly solved with some css, so I feel like sharing it. Not sure it’s bugs though, up to you to check it out!

    First the title, even with text-align:center is not centered correctly because the left menu part seems too wide (in my case, but my menu is tuned already). I just changed:
    width: 25%;
    to
    width: 10%;
    in
    .fc-header-left
    Might be just related to my menu tuning though.

    The second might affect more people. In some cases the event title in the month view is eating on the following divs (see http://img189.imageshack.us/i/screenshot20110323at157.png/)
    I’ve added
    overflow: hidden;
    in
    .fc-event-inner
    and now it seems much better! (http://img827.imageshack.us/i/screenshot20110323at201.png/)

    Hope this helps some people!

  • WOW this is awesome. The changes to colors are rockin! Thanks alot.

  • Eric is right, your site is down.

    I have been looking around and I guess I just don’t get this part. Here is what I am trying to do, if anyone has seen an article that tells me what to do please let me know, thanks!

    1) I would like it so each time the calendar opens the days that are not other months will be green by default, the other months will stay grey

    2) I have created a DB that will store the events and their dates. All events are full day events. I would like it so when the calendar is rendered the calendar will change from green to red. NOT THE EVENT, but the Calendar in teh background. The events will have their own colors. Or maybe I just need to make the event colors red and somehow make the event take over the full background of the day cell

    I just can’t figure out how to get this done automatically. I am using a jQueryUI theme and in order to change the color of the cell I need to remove the background image and change the bg color, but when I click on the next month it’s not correct..

    any help would be appreciated, I was going to read all the docs today and see where I was wrong, but website down..

  • Ok, the website is back up. It got hacked (and I was away all weekend). But nothing to worry about, everything has been restored and the hole has been plugged. Sorry for the inconvenience.

    I wish I could address everyone’s technical questions/problems here, but the best way to proceed is to use the support page (http://arshaw.com/fullcalendar/support/)

  • Brynjar Harðarson

    How do I get the borders (date (horiz) and time (vert)) of Fullcalendar to be the same as it was in version 1.4, it stands out way to much for the site I’m working on right now.

    Example, with blitzer theme, date and time is grey in 1.4 but red in 1.5.

    I assume what needs to be done is to change some class names?

  • Brynjar Harðarson

    What I meant by my last reply, if it’s a bit unclear, is that I want to get the color/themeing scheme of 1.4 for date and time on the top and left of the Fullcalendar widget while still using 1.5.

    Going to look around in the code tomorrow to see if I can find a solution, but if anyone knows of a good solution then please tell.

  • Sorry your site was hacked Adam, I will check out the support options..

    If I can come up with a solution I will post about it.

    This is a great plugin, thanks!

  • marius

    Great news! I love the “color” through event Properties. Excellent! Thank you for your work.

  • anonymous

    …seems like the site is still having problems. I’m not able to bring up the plugin pages.

  • hmm, if you are getting any bad pages on the site, try refreshing. you might have the bad version cached.

  • vincent

    thanks for your job adam, that is an awesome plugin, i like it.

  • ps

    Is there any planning of .ics/iCal support?

  • Rick

    I’m using the WordPress Plugin Event Espresso that includes Fullcalendar. Is it possible to add an image thumbnail as a background image in a calendar day cell?

    I haven’t seen this done in Event Espresso or examples of Fullcalendar. I’ve also looked at the Themeroller site and found no examples of a background image used on the calendar.

    Great plugin!

  • Just updating, I did find a solution and it’s too big to type here, but if you want the like is here

    http://thejimgaudet.com/jquery-fullcalendar-example-change-bg-colorusing-jqueryui-themes/1090/

    There is a demo on that page as well as code, hope this helps someone. 😀

    This plugin is great, just had to say it again. Thanks!

  • Aamir Talib

    How to change background color in full-calendar plugin
    I am using full-calendar jQuery plugin in my application with Grails.

    1). Is it any way to change the background color of a specific day in week view and in month view?
    for example background color of Saturday and Sunday should be Gray and background color of Monday should be Green (Others are default or white)

    2) and how to change background color of specific time duration in day view?
    for example background color of time 09:00 AM to 06:00PM should be yellow and other should be Gray.

    Important: I don’t want to change the plugin source code. I want to change if this plugin support that we can change the background color as these requirements.

    Thanks in Advance

  • month and year not work in ie7.please tel me the solutions

  • Hi Aamir,
    I can’ get the grails full-calendar jQuery plugin to run.
    Is there any examples?

    Alois

    • ankit

      events are not editable how to make them editable or updatable?

  • anil

    how we set contentWidth dynamically as an contentHeight.

  • san

    Hi, Can you please help me in this.
    In Month view, I want to set different color to that date cell if it is a holiday.So how can I set that?And how to pass any custom data to FullCalendar.js?

  • preetham geedi

    Hi if someone has tried adding any event in this calender please post a sample document of it.Not static but dynamic data ..because convertion of date is a big challenge iam facing

  • Satyam

    Hi,

    Great tutorial re-sizable will work on right only.
    i want implement re-sizable in left side can any one hep it out.

  • The calendar is really good. I have almost used it for 10 days now, and I can say that it is very good. Thanks for such a wonderful creation.

  • HTML/CSS gives a nice and attractive look. The calendar do look nice with the normal theme, but it looks great with some graphics.

  • Ashwin

    Hey Adam, Id like to know if any code is available to disable dragging the elements horizontally.

  • Manish

    I am unable to change cell color according to date and I want to set background image in cell.

    Please help me

  • JP

    What is the correct way to set the resources for fullCalendar using grails 2.0.4? The only way I can get the calendar to render is by providing full paths to the js and css files.

  • Been looking around and I guess I just don’t get this part. Here is what I am trying to do, if anyone has seen an article that tells me what to do please let me know: I would like it so each time the calendar opens the days that are not other months will be green by default, the other months will stay grey, how do I do this?

  • shimrit

    hi

    i’m really new to HTML and am not able to figure out what I have to do to inbed the calendar in an HTML on my PC. I copied the entire source code to a new HTML file and when dragging it my browser window, I get all the links but when entering them get the message: No webpage was found for the web address: file:///C:/fullcalendar/.
    I guess I need to link the code to the files attached on the website, tried saving all of them but I don’t seem to be linking it as I should.
    Can somebody give me a short explanation?

  • I like the new design,but what I like more, is that the code is much cleaner than it used to be. For me personally, page speed is more important than the design.

  • Finally downloaded it! It’s very useful in setting up my appointments! 🙂

  • I honestly do like this newly released full calendar. I am sure things would be then so fine and it’s really awesome.

    • A calendar that can be used by a lot of people will certainly help them all. You can find many different types of characters in the calendar.

      • Thank you for the improvements in theming and visual customization for FullCalendar!

      • Thank you for the updates although I’m a little bit late for this. I just hope you can also post some more updates! Thank you very much!

  • This might be a backwards-compatibility issue for developers that have written advanced CSS.

  • Its a great pleasure reading your post. Its full of information I am looking for and I love to post

  • I am aslo a web developer and i love jquery and ajax. I have made my website inline of which i have given the backlink.

  • Mrityunjay

    hi,,

    how to change the background color of specific day for whole year