Categories

(83)
(58)
(8)
(32)
(71)
(123)

User-friendly event schedules with the Smart Date Drupal 8 module

13.12.2019
User-friendly event schedules with the Smart Date Drupal 8 module
Author:

ebsites that host various events have their own usability secrets. Among the tips for building a great event website, perhaps the most important is the “what, where, when” of your conference — the event’s date, time, venue, and key subject should be clearly displayed in the website’s prominent place.

Event website example — DrupalCon

Many events also have schedules because they consist of multiple subevents (e.g. speeches within the same conference). Event schedules, dates, and time will be the focus of our attention today.

Event schedule example — DrupalCon

This functionality should work conveniently both for the event website visitors and editors. Luckily, there are helpful modules for this like any other purpose. These modules are one of the numerous reasons to build an event website on Drupal. In our post, we show how the new Smart Date module in Drupal 8 can help you with event schedules.

User-friendly event schedules, date, and time features

So let’s see how the ideal event schedule functionality should work. What do users and editors appreciate in them?

  • Users expect to see when the event starts and how long it lasts. The event schedule should be clear. All this data should be shown in a user-friendly format. Additionally, if your website offers the functionality for users to create events, they also expect the same tools as editors do (see next).
  • Editors hope to be able to set and change the event schedule, date and time in a few clicks. They want to choose exactly the right format and not be tied to the website’s defaults. And they want the website to “understand” them at first click and do part of the work instead of them automatically.

The Smart Date module for event schedules & dates

The above expectations can be fulfilled by the Smart Date Drupal 8 module. It provides an intuitive user interface for more granular date and time handling. For example, you can:

  • set the event duration, and the website will autocomplete the end time based on the start time
  • set the default event duration that all events will follow (but always feel free to change it for every item)
  • set several event duration options for the editor to quickly switch between — these will appear during the event creation

Event date and time with Smart Date module in Drupal 8

  • create “all day” events and zero-duration events
  • set any date formats you want to meet any cultural and linguistic preferences

Various date and time formats with the Smart Date module in Drupal 8

The module’s creator Martin Anderson-Clutz (@mandclu) wrote in his blog post that he wanted to give Drupal the same ease of use as we see in calendar software by Google, Apple, or Microsoft. So this Drupal module uses the best practices from these platforms.

Creating event schedules with the Smart Date module in Drupal 8

Enabling the module and adding the Smart Date field

Before creating our event schedule, we need to install the Smart Date module. When installed and enabled, the module creates a new field type in addition to the default “Date” — “Smart Date Range.” The field can be added to any Drupal content type or another entity type.

Enabling the Smart Date module in Drupal 8

Adding a smart date field with the Smart Date module in Drupal 8

Creating our event schedule

Our event schedule will need multiple subevents. There are plenty of possible solutions here, so let's choose a very simple one for the sake of demonstration.

Imagine an event that hosts three lectures 1 hour each. So we will add a field for a name, an image, and, of course, a smart date range for each of them (with 1-hour default duration) in the Event content type. We can rearrange the field order on the "Manage display" tab, as well as hide or show their labels.

Creating an event schedule in Drupal 8

To provide our editors with a ready template where they can set and change the event schedule, we will rearrange the fields on the "Manage form display" tab so they are grouped around a particular lecture. And here is how the new event schedule creating process looks (continuing to Lecture 3).

Admin template for adding event schedules with the Smart Date module in Drupal 8

And here is how the event schedule node looks on the website.

Event schedule in Drupal 8

Creating the event schedule layout

This event schedule can have a better layout. For this purpose, we can use the Drupal 8’s core Layout Builder module. So let’s:

  • enable the module
  • check the “Use Layout Builder” option on the content type’s “Manage display” tab
  • click “Manage Layout” click “Add Section” and add three sections (for our 3 lectures) with three columns each (for their names, dates, and images)
  • within each section, click “Add block” and find all these fields on the right sidebar list and drag them to the layout, while formatting and renaming them to our liking

Enabling Layout Builder for a content type in Drupal 8

Creating an event schedule with Drupal 8's Layout Builder

Our event schedule layout is ready. But, of course, it is a rough option that will look different in a real website's design.

Event schedule built with Drupal 8's Layout Builder

A note on configuring the date formats

You might have noticed that we used different options to display the full date or the time only in lectures. This is achieved through simple field formatting.

Each Smart Date field on the "Manage display" tab of a content type has a Format selection between the Plain Text, Default, and Custom. If you select the Default format, the cogwheel near it will offer more options: Compact, Date Only, Default, and Time only. It is also available in the field formatting sidebar if you use Layout Builder.

More exact formatting for each of them is found at Configuration — Metadata — Regional and language. PHP date tokens are used for this purpose. 

Date and time formatting with the Smart Date module in Drupal 8

Date and time formatting with the Smart Date module in Drupal 8

Create or optimize your event schedule with us!

The above example was a very simple and rough solution to create an event schedule. It will look different on your website because our development team will take your requirements into consideration and add a nice design in accordance with your brand’s stylistic identity. And, of course, you will know that your users and content editors can work quickly and easily with your website.

So if you are looking to:

  • create an event website or one with schedule, date, and time features
  • create an event schedule for your upcoming events
  • optimize your existing event website’s usability using great modules

then contact our Drupal development company. Let your website with event schedules be an example of usability!

9 votes, Rating: 3.9

Read also

3

Welcome on a tour of building users profiles in Drupal 8. Let's start from the basics and move on to a few tweaks with new core modules such as Media Library & Layout Builder.

4

If you want the visitors to settle down on your website and register, you definitely need a special tool to make both the registration and login processes easier and faster. Luckily, Drupal 8...

5

Editorial workflows in Drupal 8 are easy to create and manage. This is achieved by the Content Moderation and Workflows modules. These modules are Drupal 8’s innovation — they have appeared...

Subscribe to our blog updates