Working with the Drupal Calendar Module.

In this article, we will create a basic view to display a Drupal calendar with events.

By the end of this article, you will be able to configure a basic Drupal event calendar for your website that looks like this:

In order to get started, I want you to download and unzip the following modules to your Modules folder:

1.Drupal Calendar Module (drupal.org/project/calendar)

2.Drupal Date Module (drupal.org/project/date)

Enable the modules after you are done with the downloads.

Click “Modules” on the top-level menu:

Search and enable the following modules:

• Calendar
• Date
• Date API
• Date Popup
• Date View

We assume you already have Views module downloaded and enabled.

Let’s now create a new content type to feature the events. I will be creating two events for June – World Environment Day and Father’s Day.

Click “Structure”:

Click “Add content type”:

I am adding the new content type as “Events”. I have given “Title of Event” as the label. Click “Save and add fields”. View the screenshot below for more info:

Under Add new field, I have provided the value “Date of Event”. Under FIELD TYPE, I chose "Date" from the dropdrown. The WIDGET field gets automatically updated with the value “Pop-up calendar”. Click “Save”:

The next screen that comes up is the FIELD SETTINGS screen. Here are the important fields you will come across:

• Date attributes to collect: It lets you choose the attributes you want highlighted in the Date field. I have kept the values as default.
• Collect an end date: It allows you to provide an end date for an event. I ticked the box.
• Time zone handling: Provide your time zone. I have gone with the default “Site’s time zone”.

Click “Save field settings”:

You won’t have to do anything in the new screen. Enter content for Help text if you wish to:

Scroll further below and click “Save settings”:

Notice the newly created “Title of Event” and “Date of Event”. Click “Save”:

Let’s now create the Events! Click "Content" on the top-level menu:

Click “Add content”:

Click “Events”:

In the new page, provide the title and details about your event. I have pasted from Wikipedia for this page:

Scroll below and you will be asked to fill in the timings for the event by using a pop-up calendar:

This is how the timings for the event looks like after details have been filled:

Click “Save” at the bottom of the page:

Your event for World Environment Day has been created:

Let’s create one more event:

Click “Save” and the page for Father’s Day shows up:

Let’s now configure the calendar to show these events. We can do this by creating a View that highlights the calendar.

Click “Structure”:

Click “Views”:

Click “Add view from template” to completely personalize your view:

You will be allowed to select a template based on a pre-configured value. In this case, Date.

In the new screen search for the newly created field created above – Date of event. Click “Add on the extreme right. Refer the screenshot below:

Click “Continue” to go to the next screen:

You will be taken to the following screen. It features basic configuration for your calendar. On the top-left, you will find several buttons – Month (default), Week, Day, Year, Block and Upcoming. Clicking them will take you to similar screens. I want you to click “Save” on the top-right:

Click “View Month” as shown below:

You will now be able to see the calendar with the events featured. Clicking on any event will take you to its respective page:

We have now completed the basic configuration to enable a Calendar view with events.