In this video, I will show you how to customize the Calendar view. We'll change the way event dates and times are displayed, add filter criteria, shorten the URLs and display the mini calendar in a block.

When looking at the month view, we see that events are display with the event date field in the "mm/dd/yyyy - h:mm" format. Let's change this to only display the event start time.

Adding a New Date/Time Format

First, we'll need to create a new date/time format

  • Go to "Configuration => Regional and Language => Date and time => Formats"(admin/config/regional/date-time/formats)
  • Click "Add format"
    • Format string: g:ia
  • (Add format)

Next, add a new date type

  • Click "Types" tab
  • Click "Add date type"
    • Date type: Time
    • Date Format: (Choose the time format we've created)
  • (Add date type)

Now that we've created the date format we want, we can modify the way our event date field is displayed in our Calendar view.

  • Go to “Structure => Views => Calendar” (admin/structure/views/view/calendar/edit)

Changing the way the Event Date Field is displayed

  • Click "Content: Event Date"
    • Choose how users view dates and times: choose "Time"
    • Display: Start date only
  • (Apply (all displays))

Now, if we scroll down to the preview, we'll see that only the start time is displayed. I don't actually like that for multi-day events, so I'm going to set it to display both the start and end dates.

  • Click "Content: Event Date"
    • Display: Both Start and End dates
  • (Apply (all displays))

Now both the start and end times are displayed.

One common practice is to add a filter criteria to make sure that only Events show on the calendar. Whether or not you should add this filter will rely on your requirements. If you have multiple content types that use the "Event Date" field (for example, "Events" and "Room Reservations"), not adding this filter will display all content types with that field. (If you have multiple event types, you might consider creating a "public" calendar that only displays events, and a "private" calendar that shows events, room reservations, and any other event based content types you might have.)

Filter Criteria

  • Click "Add"
  • [x] Content: Type
  • (Apply(all displays))
  • Operator: Is one of
  • Content types
    • [x] Event
  • (Apply(all displays))
  • (Save) (Save the view)

The default paths for the calendar displays are unnecessarily long, so let's shorten them to make them more meaningful.

Page Settings

Path

  • Click "calendar-node-field-event-date/month"
    • calendar/month
  • (Apply)

Menu

  • Click "Parent menu item"
    • Menu: Main menu
  • (Apply)

Select the "Week" display

Week Display

  • Page Settings
  • Path
  • Click "calendar-node-field-event-date/week"
    • calendar/week
  • (Apply)

Next, click "Day"

Day Display

  • Page Settings
  • Path
  • Click "calendar-node-field-event-date/day"
    • calendar/day
  • (Apply)

Next, click "Year"

Year Display

  • Page Settings
  • Path
  • Click "calendar-node-field-event-date/year"
    • calendar/year
  • (Apply)
  • (Save) (Save the view)

Now, when we view the Calendar, the URL is more manageable.

Back on the View configuration page, there are two more displays that we haven't taken a look at. "Block" and "Upcoming". Let's take a look at the block display.

Select the "Block" display

If we scroll down, you'll see that the block display is basically just a mini calendar that can be placed in any region. Let's give it a title, and then display it on our site.

Block Name

  • Click "None"
    • For: This block (override)
    • Mini Calendar
  • (Apply (this display))
  • (Save) (Save the view)

Displaying the Calendar Block

Let's display the Calendar block in the second sidebar

  • Go to "Structure => Blocks" (admin/structure/block)
  • Scroll down to disabled
    • Block: View: Calendar
    • Region: Choose "Sidebar Second"
  • (Save blocks)

Now when we go home, we'll see that we have the mini calendar in the side bar and it's there on every page, including the calendar page. We don't really need this on the calendar page since we are already displaying the full calendar, so let's configure this block to display on every page except the Calendar pages.

  • Mouse over the Mini Calendar block
  • Click the dropdown gear
  • Choose "Configure block"
    • Pages
      • Show block on specific pages: [x] All pages except those listed
        • calendar (This is prevent it from showing on the main calendar page)
        • calendar/* (The '*' character is a wildcard. So this will prevent it from showing on other calendar pages like calendar/week and calendar/day.)
  • (Save block)

Now, when we visit the Calendar pages we won't see the mini-calendar. If we visit any other page, though, we will see the mini calendar in the sidebar.

Upcoming Events

The last Views display we have is the "Upcoming" display. Basically, this is a block of upcoming events. If we take a look at it's configuration, we'll see that it uses a pager, and shows five items at a time. It's sorting by the Event start date in ascending order, so that the next event is displayed first, and future events are listed in chronological order. And the filter criteria includes a filter that only shows events with a date that is greater than or equal to "now". This means that events that have started in the past will not show up in this list.

Let's give this block a title, and then display it in the sidebar.

Block Name

  • Click "None"
    • For: This block (override)
    • Upcoming Events
  • (Apply (this display))
  • (Save) (Save the view)

Displaying the Upcoming Block

This is a block display, so we can place this in the sidebar, just like we did with the mini calendar.

  • Go to "Structure => Blocks" (admin/structure/block)
  • Scroll down to disabled
    • Block: View: Calendar: Upcoming
    • Region: Choose "Sidebar Second"
  • (Save blocks)

Now, when we go to the homepage, we'll see the block in the sidebar. And this may be a block that you want to also show on your calendar pages, so I won't change it's display settings.

In the next video, we'll take a look at how to use Colorbox to display additional information about events in a modal popup so that users don't have to leave the calendar page for that information.