In this video, we will take a look at how to customize the date format, and take it one step further to set different formats for each of the calendar view modes. (ie: Month, Week and Day). We'll also change the way the date labels are formatted for each view mode.

When looking at the month view, we see that events are display with the event date field in the "h:mm{ - h:mm}" format, which displays the start time, and if there is an end time, that is displayed as well. You'll also notice that "All day" events do not show a time at all. Let's take a look at where this is configured.

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

Changing the way the Event Date Field is displayed

  • Click "Settings" next to "Format: FullCalendar"

We'll take a look at each of these settings in just a minute, but first, let's expand the "Time/Date Settings" section.

  • Click the "More info" link for information on date and time formatting. (The FullCalendar library does not use standard php date formatting. As you'll see, it uses things like "h" for hours in the 12-hour format, "hh" for 2 digit hours in 12-hour format, "H" for hours in the 24-hour format and "HH" for 2 digit hours in the 24-hour format.)
  • [ ] Use a custom initial date (With this unchecked, the calendar will load with the current date in View. If you check this box, you can specify a date to be displayed by default.)
  • Time format (This is where you can specify the time format that is displayed on the calendar. If you'd like to control the way label dates are displayed or display a different format for each display (ie: Month, Week, Day), click the "Enable advanced time and date format settings" option.)
  • [x] Enable advanced time and date format settings (When you check this, additional options will be displayed.)

Axis format

The Axis format is the text that is displayed on the vertical axis of agenda views. For example, our week view is an agenda view, so if we look at that, we'll see the text "6a", "7a" etc. along the left side of the calendar. If we scroll down, we will see 1p 2p etc. Let's change this to 24 hour formatting.

  • Axis format: HH:mm (HH represents the 24 format with leading 0s. We'll also remove the "t" since we don't need am/pm indicators.)
  • (Apply (all displays))

Now, when I scroll down to the live preview, and click the "Week" button, the vertical axis is using the new format.

Time Format

In the Time Format dropdown, we can set different time formats to be used for the Month, Week, and Day views.

  • Month: H:mm{ - H:mm} (This will show the start time, and end time, if one is set.)
  • Week: H:mm (This will only ever show the start time.)
  • Day: ddd H:mm{ - ddd H:mm} (This will show the short day name (ie: Mon on Monday) and time for both the start and end dates. This is especially useful for events that span across multiple days. It will let the user know the start and end dates without having to page through the calendar.)
  • (Apply (all displays))

Now, when we view the live preview, we'll see the new date formats are in effect.

Title Format

The Title Format dropdown allows you to set the text that is displayed above the calendar in each view mode. I'm going to leave these at the defaults, because I think they make a lot of sense, but I want to point out a couple of cool things that the developers have put in place that you might not notice.

  • Month: MMMM yyyy (This will show the full month name, and four-digit year.)
  • Week: MMM d[ yyyy]{ - [ MMM] d yyyy} (The information inside the brackets will only be shown if different from the other date. This will show the short month name, date, and year of the first day displayed, then the same data for the last day displayed. But because of the if/then stuff going on, when we look at the calendar, you'll see that it shows "Apr 20 - 26 2014". So, it's not showing the month with the second date set, because it's the same as the first. If we look at next week, it shows "Apr 27 - May 3 2014". So, since it's different, it shows the month with both sets of dates. Also, you'll note that the year is only displayed once, instead of both times. If we go to a week that spans two years, we'll see the year show for both date sets as well. (ie: Dec 29 2013 - Jan 4 2014)
  • Day: dddd, MMM d, yyyy (This will show the full day name, short month name, date and year.)

Column Format

The column format is what is displayed at the top of the calendar view and labels the content of each column. Currently, the Month View shows the short day name (ddd) the Week view shows the short day name, 1-digit month and one digit day (ddd M/d) and the Day view shows the full day name, 1-digit month and one digit day (dddd M/d). I'm going to change a couple of these.

  • Month: ddd (I won't change this one.)
  • Week: ddd d (I've removed the month, so it just shows the day and date. ie: Mon 29)
  • Day: dddd MMMM dS (This will show the full day name, full month name, and date with suffix (ie: Thursday April 24th)
  • (Apply (all displays))
  • (Save) (Save the View)

Now, when we scroll down and click "Update preview", we can see our new settings in action.

In the next video, we'll configure the display settings and header settings that we saw when configuring the FullCalendar view.