Full Calendar

Usage

Add the following tag to the head to include the fullcalendar javascript and css, as well as jquery and jquery-ui resources.

<fullcal:resources/>

To use the unminimised version of fullcalendar.js add the debug option:

<fullcal:resources debug="true"/>

Then you can either use the javascript directly in the page, as specified at http://arshaw.com/fullcalendar/docs/usage/:

$(document).ready(function() {
    // page is now ready, initialize the calendar...
    $('#calendar').fullCalendar({
        // put your options and callbacks here
    })
});

Or there is a very simple tag to output the javascript above, with the body of the tag being output into the 'put your options and callbacks here' line above:

<fullcal:calendar id="cal">
    header: { left: "", center: "", right: "prev, today, next" },
    columnFormat: { week: 'ddd d/M' },
    timeFormat: 'HH:mm{ - HH:mm}'
</fullcal:calendar>

There is comprehensive documentation about all the available options at http://arshaw.com/fullcalendar/docs/

If you check out the plugin source from https://svn.codehaus.org/grails-plugins/grails-full-calendar/tags/LATEST_RELEASE/ and run it with

grails run-app

Working demos can be seen at http://arshaw.com/fullcalendar/

Month View

Week View

Day View

Events can be dragged and dropped