In this video, we'll customize a few features of FullCallendar, including the theme, whether or not to open events in the same window and choose to allow or prevent editing events via drag-and-drop. Then we'll take a look at how we can customize what content is displayed for each event on the calendar, and finish up by enabling AJAX to improve the page load speed.

Style Settings

  • [x] Use jQuery UI Theme (If you uncheck this, FullCalendar will use a different theme. The jQuery UI Theme is lighter, while the FullCalendar theme is a little more dark. I'll open the calendar, and show you the difference.)
  • [x] Open events in same window (Currently, when you click on an event, the event node is opened in a new window. If this option is checked, it will open in the same window.)
  • Calendar height: 0px (You can set a custom height here. Note that if you try to set anything below 200px or so, it will be about 200px because that is the height of all of the dates and labels. Setting a higher number like 1000px will stretch the week heights evenly. And setting it to 0px will use a default height of about 515px. Regardless of your setting, the weeks will automatically stretch if there are more events than there is room for. It won't add scroll bars or make you click a day to view all events for that day.)
  • [ ] Prevent editing events via drag-and-drop (If you'd like to disable the drag-and-drop functionality, you can do that here. I, however, like the ability to drag-and-drop events, so I'll leave it unchecked.)
  • (Apply (all displays))

Customize Fields

The FullCalendar module accepts three variables: one for the Title of the event, one for the Date of the event, and one for the URL to load when the event is clicked. Currently we are using the content title and event date field, and the content URL is automatically extracted for the URL. We can add additional fields to the view, and use those to change what is displayed and linked to in the "Customize Fields" section of the FullCalendar Settings.

As an example, I'm going to add the "Activity Type" field, and rewrite the title field so that the Calendar will show the Activity type, followed by the event title.

  • Click "Add" next to "Fields"
    • Select "Content: Activity"
    • (Apply (all displays))
    • [ ] Create a label
    • (Apply (all displays))
  • Click the Dropdown next to "Add" (fields)
    • Choose Rearrange
    • Drag "Content: Title" to the bottom of the list
    • (Apply (all displays))
  • Click "Content: Title"
    • Rewrite Results
    • [x] Rewrite the output of this field
      • Text: [field_activity] - [title]
  • (Apply (all displays))

Now, we can go back to the FullCalendar settings and use that field as the Title field.

  • Click "Settings" next to "Format"
  • Customize Fields
    • [x] Use a custom title
    • Title field: Content: Title
  • (Apply (all displays))

Okay, here I have to give a quick disclaimer: There's an issue with the live preview. If we scroll down, it looks like there isn't any text... However, if we save the view and view it live, the text we've entered is displayed. Let's do that.

  • (Save) (Save the view)
  • Click "View page"

So, here we see that the custom title is applied. If we go back into the Customize Fields settings, the last two options perform similar functions.

The "Use a custom redirect URL" field could be really useful if you have a calendar that displays events from other websites, and you want to redirect visitors to those other sites when they click the event. You could add a URL field to the content type, and use that as the redirect URL here, so when visitors click the event, they are taken to the site that has more information.

The "Use a custom date field" could be useful if you're showing something like a list of projects that need to be done. In that case, you might have a start date, and an end date, and want to use the "End date" to show when the project should be completed, instead of when you should start working on it.

  • (Cancel)

Use AJAX

The last thing we're going to cover in this video is the use of AJAX. AJAX can make your calendar load millions of times faster if you've got a lot of past, present or future events on your site. Basically, without using AJAX, your site will load EVERY event in the database before displaying the calendar. With AJAX enabled, only the events that apply to the current view are loaded, and more are fetched when you page through the calendar. It's as easy as turning it on, so let's see how to do that now.

  • Click the "Advanced" link
  • Other
    • Use AJAX
    • Click "No"
    • [x] Yes
  • (Apply(all displays))
  • (Save) (Save the view)

And that's all there is to it! If we reload the calendar, it won't look any different, but only the events for the current view area are loaded, and more are loaded when I page through the calendar.

In the next video, we'll take a look at some advanced options that come with the FullCalendar Options sub-module like what time the calendar show show when loaded, whether or not to show weekends, and whether or not to load a different view when a date is clicked on the calendar.