Last updated November 10, 2014. Created on August 3, 2011.
Edited by ALeicht, francescosciamanna, Cottser, carwin. 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 the 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.

fullcalendar_d7_views1.jpg

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(Attention: before you adding any date field, make sure that you have installed a 1.x version of the FullCalendar plugin, you can check it at your Administration » Reports » Status report, otherwise you'll get an error! This because currently the 2.x series of the plugin is not supported). You should also look at the settings of the FullCalendar to see if you need to change the basic settings.

fullcalendar_d7_views2.jpg

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

fullcalendar_d7_views3.jpg

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(Attention: before you adding any date field, make sure that you have installed a 1.x version of the FullCalendar plugin, you can check it at your Administration » Reports » Status report, otherwise you'll get an error! This because currently the 2.x series of the plugin is not supported)
    • [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:

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.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

patbranch’s picture

Where did the Content:datum field come from?

retswerb’s picture

I had to suss that out too. It has to be created using the Date Wizard.

Marek H’s picture

Hi,

Based on the direction provided I am not able to use Full calendar.
in Drupal 6 installation.

My modules are installed and enabled. All of the dependent modules are installed and enabled as well. Fullcalendar and Jquery UI plugins are installed in the /libraries folder.

My site report shows no errors.

I created new content type called Calendar.

Label: Date
Name: field_events_dates
Type: Datetime

Then I went to views to "add" views:

View name: Calendar
View Description: Events
View type: Node (first on the list)

I clicked "next" and got to views setup page.
I clicked on "Styles" which was set to "Unformatted".

These were the choices I could pick from:
Grid
HTML List
Scrollable Content
Table
Unformatted

I was unable to get fullcalendar under styles.

Thanks for your thoughts and updates!

Marek

doublejosh’s picture

This is an old post, but agreed... the FullCalendar style plugin does not show for Drupal 6 (with a full cache flush).

a.milkovsky’s picture

How can I add "Year view" display?

DrupalMan’s picture

Hello there,

Don't forget to add the external library and configure the FullCalendar path to the proper folder where the fullcalendar.min.js is in:

Drupal 7:
Configuration/User Interface/FullCalendar

Otherwise you'll get an error when the module searched for it.

Regards