How to Create Calendars in Drupal

calendar

We’re going to show you how to create an event calendar in Drupal.

This tutorial is ideal for people who want to show a monthly, weekly or daily list of upcoming events.

First, we’ll show you how to set up a basic Calendar and then we’ll modify it to the needs of your content.

Installation

You’ll need to enable and install these modules:

When you’re enabling these modules, make sure to enable both Date API and Date Views.

Setting up the calendar

Go to Structure > Views > Add view from template.

media_1371647626258.png

You’ll now see a variety of default Views that can be created.

  • Click add next to “A calendar view of the ‘created’ field in the ‘node’ base table”.
media_1371647669125.png
  • Choose a name of your new Calendar view.
  • Click Continue,
media_1371647861090.png
  • Scroll to the bottom of the page for the preview.
  • You’ll see that there’s a calendar view with content inside.
media_1371647880886.png
  • Click Save in the top-right corner of your View.
  • Visit the site’s homepage.
  • There will be a link in the Navigation menu to your Calendar.
media_1371647903708.png
  • You’ll see your calendar on your site. The first tab will be a Month view.
media_1371647931988.png
  • Click the tabs across the top to get a Week, Day and Year view:
media_1371647950715.png

At the moment the calendar looks good, but we have some problems:

  • The calendar is showing all of the content on our site, not just events.
  • The calendar is sorting the content by the date it was published, not the date the event is happening.

Let’s modify the calendar to fix those problems.

Modifying the Calendar

The first thing we need to do is make sure we have a place to list our Events. If you haven’t done so yet. we’ll create a content type called Events.

  • Go to Structure > Content types > Add content type
  • Enter Events as the Name
  • Click Save and add fields
  • Create a field called Date and choose Date as the type of data to store.
  • Click Save, then Save field settings, then Save settings.
media_1371648217889.png

Your Events content type should like at least a little like this:

media_1371648244320.png
  • Go to Structure > Views
  • Click Edit in the row for our Calendar view.
media_1371651090082.png

We need to change two things on the left-hand side of our view. We need to change:

  1. Fields
  2. Filter Criteria
  3. Sort Criteria
media_1371648336204.png

First, let’s change the Fields. We’re going to remove the date that the content was posted to our site.

  • Click Content: Post Date
  • Click Remove

Now we’re going add the date of the events:

  • Click Add next to Fields.
  • Choose Content: Date
  • Click Apply (all displays) twice

When you’re finished, your Fields area will look like this.

media_1371648484344.png

Second, we’re going to use Filter Criteria to make sure that only our Events show on the calendar.

  • Click Add next to Filter Criteria.
  • Choose Content: Type
  • Click Apply (all displays)
  • Choose “Is one of” and then “Events”.
  • Click Apply (all displays)
media_1371648559433.png

Your Filter Criteria will look like this:

media_1371648611595.png

Now we need to look to the right-hand side of our Views editing screen.

  • Under Contextual Filters, click Date: Date (node) (Content: Post date)
media_1371649163260.png
  • At the top of the screen, make sure you are configuring this option for All displays:
media_1371649534444.png
  • Uncheck Content: Post date
  • Check Content: Date (field_date)
  • Click Apply (all displays)
media_1371649188435.png
  • Check the preview of your view and your events should be showing on the date they will happen.
  • Click Save
  • Visit your finished calendar on the front of your site.
media_1371651971852.png

Instructor

  • Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

0 0 votes
Blog Rating
Subscribe
Notify of
17 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Harvey

Is there a way to create categories within a calendar. For example, the full calendar is for events. When entering information, events can be “Movies” or “Concerts” or “Plays.” Check boxes. Then there is a calendar that shows all events…or a page that shows only Movies…or a view that shows Concerts and Plays. Perhaps some kind of color in the display?

wreckage

Hello. Very nice tutorial.

Is it possible, using the Calendar module, to have a calendar available for each logged-in user that they can use for their own appointments? It would be a nice resource for authenticated users. Thank-you.

mochou

Thanks,Steve.I need it.

Tom

Is there a tutorial/module/widget to have one event that takes place daily/ every friday / every monday and tuesday?

Anton

Thanks for the clear walk-through. It’s hard to find good beginner-level examples like this one.

sulman

Hi Steve,
I am not sure if my question is relevant this or not but i am sure you’ll find out from my question that i am very beginner in drupal and require some assistance with our existing site.

We are running D6 and LDAP module is enabled where user can login only with LDAP authentication. their is section where user book rooms for meetings and as user mentioned that previously they use to see who booked room when they click on event under calendar, (created by Joe Clark on 13-05-2013 – 10:43) but now its only shows Created by on 13-05-2013 – 10:43
Can you please assist me on this?

Much appreciated for your help and support.

Regards

Sujay Uvari

Hi Steve Burge,

Woww…. Its really working… Explained with each and every steps. Even first standard student can do this. Thanks for such a nice blog….

Roisin

Great tutorial, thanks.

Cylac

is there a way to add either a tab or button (next to >) which will bring the user back to today’s date? (now)

rsister

Thank you very much. This post helped me a lot.

Lurkerina

How do you create repeating events?

Maria

Hi,

thank you very much for your tutorial. It is great!

I have a problem with month view in firefox. The Month, Week, Day, Year bar does not display correctly.

Can you help me to fix this? I guess I have to put some -moz in .css file…

Thanks in advance!

Bert

Thank you so much, this helped me a lot and I’ve got an understanding of the drupal system.

Priyank Prajapati

i have modify the content creating a new content type. that content display in month. But theu arent display content in day.week,year wise so how can i display also in the week,day and year wise ??
please help me
thanks

iceman

Hi Steve, i need to archive my Blog Post everyday, and when my clients click in any date of the calendar, shows the blog according to the selected day, do you think this example could be what i’m looking for? Thank you.

Diane

Hi Steve, Have you ever tried making a calendar that tracks events in a historical context, thus showing events going back dozens of years? I find that the calendar module will only go back as far as 2015, and no further. It looks like nobody is minding the issues cue for this module, so I’m turning to the published experts for help. Thanks.

17
0
Would love your thoughts, please comment.x
()
x