Menu icon
RedCrackle
Menu icon
Services
01Design Transformation
About UsCase StudiesBlogContact Us

<

Blog post

Working with the Drupal Calendar Module.

Neerav Mehta

Founder & CEO

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: Drupal Calendar Module

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) Drupal Calendar Module

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

Enable the modules after you are done with the downloads.

Click “Modules” on the top-level menu:

Drupal Calendar Module

Search and enable the following modules:

  • Calendar
  • Date
  • Date API
  • Date Popup
  • Date View
Drupal Calendar Module

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”:

Drupal Calendar Module

Click “Add content type”:

Drupal Calendar Module

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:

Drupal Calendar Module

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”:

Drupal Calendar Module

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”:

Drupal Calendar Module

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

Drupal Calendar Module

Scroll further below and click “Save settings”:

Drupal Calendar Module

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

Drupal Calendar Module

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

Drupal Calendar Module

Click “Add content”:

Drupal Calendar Module

Click “Events”:

Drupal Calendar Module

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

Drupal Calendar Module

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

Drupal Calendar Module

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

Drupal Calendar Module

Click “Save” at the bottom of the page:

Drupal Calendar Module

Your event for World Environment Day has been created:

Drupal Calendar Module

Let’s create one more event:

Drupal Calendar Module Drupal Calendar Module

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

Drupal Calendar Module

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

Click “Structure”:

Drupal Calendar Module

Click “Views”:

Drupal Calendar Module

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

Drupal Calendar Module

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:

Drupal Calendar Module

Click “Continue” to go to the next screen:

Drupal Calendar Module

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:

Drupal Calendar Module

Click “View Month” as shown below:

Drupal Calendar Module

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

Drupal Calendar Module

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

Neerav Mehta

Neerav Mehta

Founder & CEO

Neerav Mehta is the Founder & CEO of Red Crackle. With sterling qualities, Neerav’s technological acumen is firing a generation of progressive companies on the digital path. With an undergraduate degree in Electrical Engineering from India's most prestigious institution IIT Bombay and having spent seven years developing and contributing to the launch of AMD's innovative line of computer products, Neerav founded Red Crackle where he is lauded for his dynamic and innovative genius.

View all posts

>

Read Next

10 Tips For Entrepreneurs In 2015

10 Tips For Entrepreneurs In 2015

Learn more

10 Ways To Increase Productivity At Work

10 Ways To Increase Productivity At Work

Learn more

30 best WordPress widgets for your site

30 best WordPress widgets for your site

Learn more

Let’s get you started!

Contact Us

>

RedCrackle

Explore

About Us

Services

Contact Us

Our address

5346 Gerine Blossom Dr,

San Jose, CA 95123

USA

Socials

Twitter
LinkedIn

© 2023 RedCrackle. All rights reserved.