Websites 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.
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.
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
- create “all day” events and zero-duration events
- set any date formats you want to meet any cultural and linguistic preferences
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.
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.
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).
And here is how the event schedule node looks on the website.
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
Our event schedule layout is ready. But, of course, it is a rough option that will look different in a real website's design.
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.
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 web 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!