Date and Calendar

by Gisle Hannemyr

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

Introduction
Installing and enabling the required modules
Creating an event content type
Building a date browser
Final word

Drupal projects discussed in this chapter: Calendar, Ctools, Date & Views.

Introduction

Before you start, you should check the general settings for date and time and make sure they are correct.

See also You may also want to read the community documentation for Date/Calendar. It contains a presentation of the date field types, the date locale, the date API, date form elements and guides to common date and calendar applications.

Installing and enabling the required modules

Before you start with the tutorials in this chapter, it is recommended that you install enable and all the modules you shall need. First, download the following four projects:

Chaos tool suite - required by Views.
Views - to create a custom view for display.
Date - to have access to a date type for the date fields.
Calendar - to have access to a calender view.

Start, as usual, by downloading the projects (if necessary) and installing them in the modules directory for our site.

Then, turn on the just some of the modules contained in these projects. To do so, navigate to Administration » Modules.

First, in the Chaos tool suite section, turn on Chaos tools.

Then, in Views section, turn on Views and Views UI.

Enabling views.

To work with the Views UI, you also need permission to administer views. To make sure you have this permissions, navigate to: Administration » People » Permissions and make sure you have the required permissions.

Then in the Date/Time section, we turn on the following modules: Calendar, Date, Date API, Date Popup and Date Views. You only need Date Popup if you want to enable the pop-up date picker widget.

Date enabling panel

The Date API is required to make the other date functions work. The Date module will give us access to date data types. The Calendar and Date Views is going to be used to create a calendar layout.

After installing and enabling all the functions we need, we need to click on Save configuration.

Create an event content type

Next, create a new content type to hold content that is going to be associated with events. Do this by navigating to Administration » Structure » Content types and then click the link Add content type.

Fill in the Name and Description fields for the new content type. You may also want to adjust the Submission form settings, Publishing options, Display settings and Comment settings for this content type.

Click Save content type.

Next, we should add new fields to the Event content type: Click on manage fields for the Event content type. This takes to a page that let us add new fields.

We are going to add a field_date to the event node. We do this by filling in the form below as indicated. The field (“Type of data to store”) determine how the date is stored in the database:

Date - A ordinary text string: 2015-08-22 10:30:00.
Date (ISO format) - An ISO format text string: 2015-08-22T10:30:00.
Date (Unix timestamp) - An integer with the number of seconds since epoch: 1440232200.

The last item (“Form element to edit the data”) determines the interface for user input, and the options available depends on the type field. The following alternatives exists for the Date type:

Select list - user selects the value from a controlled set of values.
Text field - user types in the value.
Pop-up calendar - user picks value from a pop-up calendar widget or types in the value (requires sub-module Date Popup).

The image below shows that Date and Select list is choosen:

After adding a field_date field, click Save. This will take you to the field settings page. Add that point, you may add an option to add an end date for the event. After you've adjusted the field settings and clicked Save field settings, you're taken to the Edit tab where you may adjust more settings for this field, before you can click Save settings.

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

In the example, all authenticated users are allowed to create, edit and delete own events, but only the users that has the role of administrator are allowed to edit or delete events created by others.

Click Save permissions when you've set the permissions.

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: Add content » Event.

The Event content type has an Event name and a Body. It also has a field panel called Date, where the author may specify the date of the event.

To create our first event, we fill in Event name and a Body with text that describes the event (not shown), and the add the date of the event.

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

You now have the capability to create content tagged with date information, but so far the only way to display is the default view (shown above).

Building a date browser

The Calendar project provides the site builder with pre-made templates that can be used to construct views that will display events in a tabular date browser. In this section, this will be used to create a calendar to show the events described in the previous section.

note The Calendar project has (like many contributed Drupal projects) gone through a number of versions. This tutorial is about version 3 of the project. Please note that the pre-made calendar views (e.g. date_browser) that used to be included, and the iCal submodule, are removed from version 3. (Use Date iCal instead if you need iCal support). If you find references to these in a tutorial about Calendar, it is probably about another version of the Calendar project.

To create a date browser, start by navigating to Administration » Structure » Views, and click the link Add view from template.

This produces a list of available templates. Pick “A calendar view of the 'field_date' field in the 'node' base table.“ by clicking on the link add to the right of it. Give it the name “Calendar”.

This will launch the views editor with the following display:

Notice that at the top there is already a selection of ready to use displays (Month, Week, Day, Year, Block, Upcoming). For each page display, there is a Path under Page settings. The block displays are not yet named, but you can assigm names to them if you want to allocate a block view to a region.

The only thing you need to do at this point is to click Save to save this view.

If you, for instance, visit the path for the month page display, you should something like the screen dump below, showing our single, sample event om November 21.

tip 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 Administration » Configuration » Development » Performance, and click om Clear all caches.

Final word

The Date and Calendar modules that are the topic of this tutotial is just one of the many modules that can be used for calendar displays in Drupal, but it is probably the simplest pair of modules to get started with.