Fullcalendar View

The Calendar project provides bridge modules to integrate a Drupal website with the Calendar service.

Table of contents

• Introduction
• Installing and enabling the module
• Final word

Drupal extension discussed in this chapter: Fullcalendar View.

Introduction

An alternative bridge module to the same JavaScript librray is Fullcalendar. It has fewer installs and a lot more unresolved issues.

This is a module that provides a calendar view format powered by FullCalendar JavaScript library.

This module requires no modules outside of Drupal core. The Fullcalendar View module will load all required JavaScript libraries from CDN. If you want to host the libraries locally, you need to download the files for each library into the /web/libraries. See README.md for details.

The following libraries are used:

• fullcalendar* – 4.4.2
• jsframe.js – 1.5.16
• moment – 2.26.0
• rrule – 2.6.4

You may switch between year, month, and day views. Back and next navigation is provided for all views.

Installing and enabling the module

Install as you would normally install a contributed Drupal module. See: Installing modules in the community documentation for further information.

To install with composer:

$ composer require 'drupal/fullcalendar_view:^5.1'
$ drush en fullcalendar_view

After enabling the module and clearing the cache, a link "+ add from template" should appear at the top the Views overview page. This should list the different options to create a calendar based on core fields (created and updated) or any other custom defined date field. However, this does not seem to be applicable to creting an event calendar.

Configuration

To configure, navigate to Manage » Configuration » Calendar » Calendar administration. This let you configure the following by means of radio buttons:

• Track current date in session.
• Add Colorbox settings to Node calendar templates.

Creating an event content type

First create a content type "Event":

• Name: Event
• Description: Create an event to be put in the event calendar.
• Title field label: Event
• Explanation: -
• Add field: field_event, type "Date" (help text), default date: current..
• Created for user.

The input widget may be "Date and time" (date picker) or "Select list" (pulldown menus). I currently use "Select list".

Creating a view

1. Create a view, showing content of type "Event".
2. Under "Format", select the "Full Calendar Display" as the view format.
3. Choose the fields for Title, Start date, End date (optional). The description field (showing in the pop-up dialog) is the last field of the fields list.
4. Format settings (Default Date, field of start date, field of end date).
5. Other view settings (optional), such as filter criteria, pager.

24 hour calendar

Issues:

• DO: How to get time in 24 hour format?
• DO: How to get time in 24 hour format in day and week views?
• SE: 24 hour time format (so no AM to PM) for fullCalendar
• DO: Allow changing the week/agenda time display via theme preprocess

It looks like time formats are controlled by two settings:

• eventTimeFormat
• slotLabelOption
• slotLabelFormat

fullcalendar.io docs:

• slotLabelFormat
• Date Formatting

Example:

eventTimeFormat: {
  hour: '2-digit', //2-digit, numeric
  minute: '2-digit', //2-digit, numeric
  second: '2-digit', //2-digit, numeric
  meridiem: false, //lowercase, short, narrow, false (display of AM/PM)
  hour12: false //true, false
}

Final word

Careful about using along with Smart Date. Seems to disable 24 hour clock.

[TBA]

---

Last update: 2022-03-30 [gh].