How to use FullCalendar

Last updated September 26, 2012. Created by aspilicious on August 3, 2011.
Edited by carwin, liberatr, rsgracey, sirtet. Log in to edit this page.

Usage

Drupal 7

Here you can find the information for version 2. Version 1 is deprecated.

If you want to make a new calendar you need to choose "FullCalendar as display format. We recommend that you disable the normal pager and change the "items to display" to 0. Setting the number of items to "0" ensures that all items will be shown.

When pressing continue, you'll see a warning. The FullCalendar view must have at least one date field, or else the calendar will be blank. You should also look at the settings of the FullCalendar to see if you need to change the basic settings.

After adding at least one date field the warnings are gone and your calendar should work.

NOTE: if you're working with a big dataset it is advised to turn on the ajax setting.

Drupal 6

An example view named "fullcalendar" is added by default.

Version 2

1. Install the required modules
2. Create a new content type that has a date field (can also be datetime or datestamp)
3. Create a view
   • Change the style plugin to "FullCalendar"
   • Change the row style plugin to "Fields (FullCalendar)"
   • Add at least one date or Google Calendar field
   • [optional] Add a fullcalendar display
   • [optional] Add filters for the content type
   • [optional] Change field style settings
   • [optional] Change row style settings

Version 1 (deprecated)

1. Install the required modules
2. Create a new content type that has a date field (can also be datetime or datestamp)
3. Create a view
   • Change the style plugin to "FullCalendar"
   • Change the row style plugin to "Node - FullCalendar"
   • Add a fullcalendar display
   • [optional] Add filters for the content type
   • [optional] Change field style settings
   • [optional] Change row style settings

Note:
In version 1 the module will automatically find the first date field and use it to place the items on the calendar. If you would like to have more control use version 2.

Deep Linking into FullCalendar

There are a number of ways to create "deep links" into your calendar - that is, to change the JavaScript Settings via the URL. Several options from the JavaScript API are available in the query string:

Examples:
(where http://example.com/fullcalendar is the path to your newly created View page from the above examples)

http://example.com/fullcalendar?year=2013&month=7

loads your default view in July 2013

http://example.com/fullcalendar?year=2013&month=7&day=4&mode=agendaDay

display the "Agenda Day" view for July 4th, 2013

http://example.com/fullcalendar?year=2013&month=7&day=4&mode=basicWeek

show the "Basic Week" view for the week containing July 4th, 2013

Available Modes (from developer website)

The following 5 views are all built in to FullCalendar:

• month - see example
• basicWeek - see example (available since version 1.3)
• basicDay - see example (available since version 1.3)
• agendaWeek - see example (available since version 1.4)
• agendaDay - see example (available since version 1.4)

Google Calendar

Fullcalendar can create a read-only display of a Google Calendar from a feed as mentioned above.

Make your calendar public:

1. In the Google Calendar interface, locate the "My Calendar" box on the left
2. Click the arrow next to the calendar you need.
3. A menu will appear. Click "Calendar settings."
4. In the "Calendar Address" section of the screen, click the XML badge.
5. Your feed's URL will appear.

Get your calendar's feed:

1. In the Google Calendar interface, locate the "My Calendar" box on the left
2. Click the arrow next to the calendar you need.
3. A menu will appear. Click "Calendar settings."
4. In the "Calendar Address" section of the screen, click the XML badge.
5. Your feed's URL will appear.

Adjust the view in Drupal

In the view, add the Fullcalendar: Google Calendar field and in the settings input the correct feed link to the calendar you wish to display in the format:
https://www.google.com/calendar/feeds/youremailaddr%40gmail.com/public/basic

More information can be found here in the FullCalendar documentation.