Calendar

This case study is about working with dates and calendars in Drupal. In particular, it explains how to use views to create and tabular monthly calendar browser to display events (e.g. parties, appointments, events, meetups, etc) that include date information about the event stored in a custom field.

Table of contents

• Introduction
• Installing and enabling
• Get an Event content type
• Create an Event
• Add views
• Date picker
• Final word

Drupal contributed extension discussed in this chapter: Fullcalendar View, Smart Date, Smart Date Calendar Kit, Smart Date Starter Kit.

Introduction

This case study makes use of four contributed extensions to get the job done:

1. Fullcalendar View is a plugin for the core Views module that provides a calendar view format powered by Adam Shaw's FullCalendar JavaScript library.
2. Smart Date provides a more user-friendly date field.
3. Smart Date Starter Kit creates an Event content type and a related Events view, with tabs to show upcoming and past events.
4. Smart Date Calendar Kit.

The current version of Fullcalendar View (5.1.4, April 2022) uses version 4.4.2 of the library.

Installing and enabling

Fullcalendar View loads the Fullcalendar library from CDN. See the README for instructions for hosting the required libraries locally.

Start out by downloading the project with composer and enable it with drush:

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

Get an Event content type

Smart Date is a family of contributed extensions designed to work with Fullcalendar View. To get an Event content type to store events, install and enable these two:

$ composer require 'drupal/smart_date:^3.5'
$ drush en smart_date
$ composer require 'drupal/smart_date_starter_kit:^2.1'
$ drush en smart_date_starter_kit

Smart Date will provide a better UI, allowing all day events and repeated events.

Smart Date Starter Kit will provide an Event content type with a field named "When" that may hold a date range.

I am going to do some adjustmenst to the Event content type by navigating to Manage » Structure » Content types. Then, locate the content type "Event" and click "Edit" in the "Operations" column. Change "Title label field to "Short description" abd add this in the "Explanation or submission guidelinesExplanation or submission guidelines" field: "The 'Short description' is the string that appear in the calendar, It should be short – never more than two short words. Use the 'Notes' field to add details if neccessary." The click "Save content type".

Next go to the "Manage fields tab", locate the "Body" field and press "Edit". Change the label to "Notes". Then, in the "Help text" fields, put: "Type additional notes about the event. It will appear in a popup when the event is clicked in the calendar." Disable "Summary input".

Click "Save settings".

Click in "Edit" for the When (field_when) field and check "Required field".

Click "Save settings".

The Event content type now has the following fields, with the human and machine names as shown:

• Short description (title)
• When (field_when)
• Notes (body)

The contents of the Notes (body) field will be used for the pop-up dialog in the Calendar view that will be created later.

For the vertical tab "Publishing options", untick "Promoted to front page".

Make sure "Notes" is the last item on the form display.

Click on the tab "Manage display", and move "Links" under "Disabled". Set the label for the date fields "Inline".

Click "Save content type".

For Events to be useful, we must also enable permissions to create, edit and delete events. This is done by navigating to Manage » People » Permissions, ticking for the required permissions in the Node section.

Permissions for the Event content type

Permission	Anonymous user	Authenticated user	Content editor	Administrator
Event: Create new content	⬜	⬛	⬛	⬛
Event: Delete any content	⬜	⬜	⬛	⬛
Event: Delete own content	⬜	⬛	⬛	⬛
Event: Delete revisions	⬜	⬜	⬜	⬛
Event: Edit any content	⬜	⬜	⬛	⬛
Event: Edit own content	⬜	⬛	⬛	⬛
Event: Revert revisions	⬜	⬜	⬜	⬛
Event: View revisions	⬜	⬜	⬜	⬛

In this example, the "Authenticated user" are allowed to create, edit and delete own Events, but only the users that has the role of "Content editor" or "Administrator" are allowed to edit or delete events created by others. Only the "Administrator" can delete, review and revert revisions

Click "Save permissions" when you've set the permissions.

Create an Event

Now that you've created an Event content type, you can go ahead and add events. You do this like you would add any other node. Navigate to Manage » Content. Press "+ Add content" and click on "Event".

The Event content type has the fields "Short descripton", "Startdate", "Enddate" and "Notes".

To create our first event, we fill in "Short description" with text that describes the event. Keep it short – use one or two short words. Use the optional "Notes" field to add more detail.

You also need to add when the event takes place.

Then click "Save". The event is created as a Drupal node.

Add views

The Smart Date Calendar Kit provides two views and four displays to display lists. These are:

Events

Block
Page (/events)
Page (/events/past

Events Calendar

Page (/events/calendar

The page display in the Events Calendar display uses the "Full Calendar Display" format and provides a graphical calendar.

First, install and enable the extension:

$ composer require 'drupal/smart_date_calendar_kit:^2.0'
$ drush en smart_date_calendar_kit

Navigate to Manage » Structure » Views and locate the view named "Events Calendar". Click on "Edit" in the "Operations" column.

Now, only the "Title" and "When" fields are displayed. Add the "Body" field ending up with:

1. Title
2. When
3. Body

Make sure "Body" is the last field. That will make it show up in a pop-up when you click on the event.

Fullcalendar does not use general settings for date and time It has its own setting for the first day of the week. To alter these, click on "Settings" for "Format":

1. Set "Default date source", Start Date Field, "End Date Field" to sensible values.
2. Expand "Display". There are a lot of settings. You may want to change "First Day" to "Monday". For a 24-hour clock, set "Time Format settings for month view" to HH:mm. Press "Apply" when done.

You may optionally adjust other view settings, such as filter criteria, pager, etc.

When done, click "Save" to save this view.

If you, for instance, visit the path for the week page display for the weeks starting on Moday April 11, you should something like the screen dump below, showing our single, sample event on April 11, 2022.

If changes you do to the front does not appear when you refresh the screen, you may need to clear the cache. To do that, navigate to Manage » Configuration » Development » Performance, and click om Clear all caches.

Date picker

There is a long outstanding issue that the "Date and time" widget is locked on a US datetime format. For background see DO: Remove sample date from date field error message and description (issue). It is suggested that this contributed project may fix it DO: Datetime Flatpickr (project). There has also been discussion on SE: Date Field Type - Text Field Widget is Gone, where this contributed project is suggested as a fix, see DO: Bootstrap Datepicker (project);. For a general note about how do add JS to Fullcalander View, see DO: Adding JavaScript within plugin.

• Mozilla.prg: HTML5 input element of type "time"
• DO issue: Time form display 24h instead of AM/PM
• SO: How to change the time format (12/24 hours) of an input?

Final word

• FullCalendar JavaScript API – probably for the other Fullcalendar project.

Unresolved bugs:

1. FCV: Time misalignment in week and day views

---

Last update: 2016-05-22.