Development

Building a Task Calendar in Drupal 7

Drupal 7 is a powerful and robust content management system. Of course, if you’re reading this, you probably already know that. After many years of using various platforms, Drupal – for all of it’s clunkiness – is still, in my opinion, the best so far. Drupal is great not only for making websites but also for building web applications.

In this article I am going to talk you through the steps for creating a personalised calendar app using Drupal. Before we begin, let’s outline our goals:

  • We want to be able to add tasks
  • Tasks should have some basic fields, such as title and description, as well as use a taxonomy to change its status
  • We should also be able to view the tasks on a calendar

Installing our modules

We’re going to use Drush for this, using the simple download and enable commands. If you’re not comfortable using the command line, simply download and install the modules as you normally would. These are the modules we’ll be using:

  • Views
  • Ctools
  • Date API
  • Date popup
  • Calendar

Setting up the data

After we’ve downloaded and enabled our modules, lets create a content type. Visit structure > content types and create a new content type.

drupal-01

Keep the default title and body fields – these will form our task title and the body will be used as the description. If you wish, rename the body field to description (there is little point in deleting this field and recreating it as description).

Add a new field – call it due – this will be the date field which tells the user when the task is due. It will also be used to display on the calendar. Choose date as the field type and pop-up calendar as the widget. This will give us a nice javascript calendar when the field is used.

drupal-02

For now, this completes our Task content type, but feel free to add more fields if you wish.

Next, head over to your taxonomy page – structure > taxonomy. Add a vocabulary called “Task States”, and then create four terms:

  • Open
  • In progress
  • Waiting feedback
  • Closed

These will be our task states, but what we’re doing here is separating our states from the task content type itself. This is good practice because it means the taxonomy might be used by other content types in the future.

Next, goto structure > content types and click “manage fields” on the Task content type.

Add a new field called “Status”, for the field type select “Term reference” and the widget choose “Select list”. Then click save.

Next you’ll be asked which taxonomy to reference, select Task states.

drupal-03

Save these settings (the defaults are fine) and essentially, this is our content type complete. Again, add more fields if you wish.

Before continuing, spend a few moments to create some dummy content for your new content type. Goto Add content and select Task.

Working with the calendar

In Drupal 7, the calendar module uses Views to display data. Head over to the Views module in structure > views and click “Add view from template”.

Initially, you’ll find lots of calendars in here. This is particularly intuitive because you won’t be interested in most of them however, the one you do want has the following description:

A calendar view of the ‘field_due’ field in the ‘node’ base table.

Click “add” under the Operation column. Click Save, and then once the view is open, click Save again. So we have added a calendar View from the template and then saved it.

This now behaves like any other View. You can add fields change sorting order, add filters and even expose filters to the View or in a block.

Point your browser to: http://yoursite.local/calendar-node-field-due/month (obviously changing yoursite.local to whatever your local dev URL is).

You should be presented with the calendar complete with items from the Task content type:

drupal-04

As stated above; this is a normal View. Remember the “Status” field we added? You can even expose this as a filter which the user can change and this will provide a way to show only tasks with a specific status.

I’m sure you’ll agree that this is extremely powerful – in less than 30 minutes we have created a fully functioning task list with calendar output. Go ahead and extend this further with more fields and functionality, and you can quite quickly build a genuinely useful web application in Drupal 7.

Subscribe to our mailing list