The Ultimate Guide to Timetable Responsive Schedule
If your business revolves around organizing events, hosting classes, or scheduling appointments, you might be looking for a practical way of displaying your event schedule or available slots on your website, in a timetable form. Fortunately, as it is usually the case with WordPress, you don’t have to do this manually or from scratch – whatever functionality you wish to add or expand, there’ll be a plugin for it.
There are plenty of scheduling plugins available on the market, but arguably the most popular one is the powerful Timetable Responsive Schedule plugin for WordPress. This plugin has been sold almost 10k times and boasts an average rating of 4.52, with regular free updates. It is a premium plugin that currently sells for $26 on Envato. Despite the fact that this is not a free plugin, you will get it at no additional costs if you pick up one of the Qode Interactive themes with scheduling features. Even though the plugin comes with fully customizable options, our developers and designers customized it for use with each of our themes, making sure it fits the theme style perfectly, so you won’t have to lose valuable time over that.
For the purposes of this tutorial, we’ll be using our Songbook – Music School Theme.
In this guide, we’ll cover:
If you grabbed one of our themes with the Timetable Responsive Schedule plugin included, you just need to activate all the required plugins, and you’ll be ready to go. To do that, click on Activate installed plugins from your Dashboard.
After that, choose Activate from the Bulk actions dropdown and press the Apply button. Note that you don’t need to select all plugins that come with the theme, simply choose the ones you are going to use. Once the activation process is done, you can start working on your timetables.
However, if you’re using a different theme and have purchased the plugin separately from Envato, you will have to take a slightly different route, as you’d do with any plugin you add to your site. After you get the paid version of the plugin, you need to upload it to your WordPress library. To do this, navigate to Plugins > Add New from your WordPress dashboard.
Click on the Upload Plugin button to upload the plugin you have purchased.
Upload the plugin by clicking on the Choose File button, and then press the Install Now button.
Once the plugin is listed alongside the other plugins, you can activate it, and you are good to go!
Upon installation, you will notice that all the options related to the Timetable Responsive Schedule plugin are located in your admin panel, in the left-hand menu.
There are four different sections, and we’ll start with Events.
As you already know, timetables are generally made of rows and columns. Columns represent days of the week, and the rows represent time slots – the timeslots of each event are defined by these two, as an intersection, like in any timetable. Since our Songbook theme is made for music schools, the events we used are classes, and they are organized in a timetable view like this:
You can’t have a timetable of events without the actual events so let’s see first how they’re created.
Events are created and customized individually, just like single posts on your blog, or portfolio items in your portfolio. To start, navigate to Events in your admin panel.
Now, if you’re using one of our themes that comes with this plugin, upon importing the demo content, you will have a number of premade events that you can simply customize under All Events. Of course, you can also delete them all and create your own, but customizing the existing ones often turns out to be a time-saver. On the other hand, if you’ve just purchased the plugin to use with another theme, you won’t have any premade events and you will have to create your own.
To add a new event single, click on Add New button from the top, or navigate to Add New from the admin panel.
The first thing you should do is add a title, or in other words – the name of your event.
On the right side of the screen, you can group your event to one of the existing categories.
If you want to add a new category, go to Events > Categories.
Add a name of the category you are creating into the respective field.
If you want to create a child/sub-category, then select the previously created parent category from the dropdown.
Additionally, you can include a description. Once you are done, press the Add New Category button, and your new category will appear along with the others, where you can select it from your single’s backend.
Alternatively, you can create a category directly from your event single’s backend by pressing the Add New Category button.
It will open an additional field below, where you are able to insert a category name, and optionally, choose the Parent Category from the belonging dropdown. When you are done, press the Add New Category button, and your new category will appear.
Once you choose the category, it will be positioned above the title on the live preview.
Next, you can add a featured image to your event single. Simply click on Set featured image and upload or choose an image from the media library.
The featured image will be displayed at the top of the event’s content, similar to the regular blog post. This is what it looks like in our theme.
You can add a subtitle by typing it into this field:
On the live preview, it will look something like this:
If you’d like to customize your event display on the timetable, you can change the box colors, text colors, and hours colors. Note that the Songbook theme has pre-designed color styles for these elements, but it is good to know that you can make these look different, if you want.
When the visitor clicks on an event in the timetable, it by default opens the corresponding event single. If you want to change that, you can add a custom URL to a different page, or even disable the timetable event URL option – this will make the event unclickable.
Now, if you’re using Songbook, you will have a couple of custom shortcodes at your disposal. One of them is the Events List shortcode, allowing you to create, well, event lists (more on that in a bit). If you plan on having an event list on your site, you should add a short description of your event in the form of an excerpt.
The most important setting, however, is the Event Hours section. To have an event displayed in the timetable, you’ll need to add its hours that determine the single’s timetable position. These hours may come as part of the demo content if you’re using Songbook, or you will need to create them on your own using the Timetable Columns>Add New, similar to how you added categories. We will talk about timetable columns in a bit, once we’re done with events and lists, but if you want, you can jump to that section right away.
Each ‘hour’ can be added to one of the previously created columns. Our Songbook theme comes with seven columns (Monday-Sunday), but if you’d like to display your timetable in some other format, you can change it easily – we’ll come to that part later. Now, when you’re adding your event to the timetable, the first thing you have to do is choose the Timetable column from the dropdown.
After determining the column, you should add additional important info like start and end hour, description(s), tooltip, category, available slots and slots per user. After you’ve filled these out, press the Add button.
Note that it is important to fill the Available slots and Slots per user fields, if you plan on using the booking functionality. We’ll come to the booking part later.
Logically, you can display more than one event/class in your timetable. Added singles will look like this in your single’s backend (see the image below). You can easily edit them by clicking the pencil icon, or delete the hour by clicking on the “x” icon.
On the live page, the classes (events) info is represented like this (see the image below). We can see the corresponding column at the top, and the corresponding hours on the left. When the class is hovered over with the mouse, the tooltip label appears, providing additional information.
Additionally, you can remove the booking option for this single for the one or for the all timetable columns. Simply choose the column from the dropdown and press the Delete button.
An additional option that might be of importance for you, if you have an event list, is the General Settings section at the bottom of the single’s backend, where you can add an image that will be displayed on the list instead of the featured image. Again, these list-related options are specific to the Songbook theme.
You can change the default image proportion. Simply choose the different one from the dropdown.
Our Songbook theme was originally created with Elementor. Let’s take a look at the event single content added with this page builder. Click on the Edit with Elementor button to reach the Elementor backend.
Elementor displays the content in the real time view. That means that even the content that can’t be edited over there is shown next to the editor – such as the header, the featured image, event title…
All the other content is added with the Elementor and can be edited right there.
On the right side of the screen you’ll notice the sidebar.
Its position is determined from the backend of our single. Let’s hop back to the classic single’s backend. At the bottom of the page, under the Sidebar Settings the first dropdown is to choose the position of it. It can be placed left or right, and it can take ⅓ or ¼ of the page grid width.
As for how the sidebar is created in the first place – we will come back to that in a bit, but once you have a sidebar, you can select it from the dropdown titled Custom Sidebar.
Another thing that can be set here is the space between the content and the sidebar.
You can choose one from offered spaces – from No (0) to Enormous (55) space. The measures in brackets are in pixels.
Now, let’s see how to create a custom sidebar for your event single. Again, this is something that depends on your theme, but in most cases, including Songbook here, the settings are located in Appearance > Widgets.
To create a new widget area, look for the Custom Sidebar near the bottom. Enter the name of your custom area, and press the Add Sidebar button.
We titled our custom widget area Classes Sidebar. To see the widgets added to it, click on the little arrow on the right.
Here are all the widgets we have added to our new sidebar widget area.
You can edit the existing widgets, remove them, or add different ones to the custom sidebar area. Here is the whole sidebar on the event single.
And while we’re on the subject of widgets, there’s a particularly hand one that comes with the Timetable Responsive Schedule plugin, regardless of the theme you’re using – the Upcoming Events Widget. You can use it to highlight certain events, classes or appointments in your sidebar or another widget-ready area. The widget can be found under Appearance > Widgets.
To add a widget to a page, click on the arrow icon to open all existing widget areas. Then, find one you’d like to add your widget to, select it and press the Add Widget button.
Here’s what the widget looks like within our sidebar on our Songbook theme, without any customization:
Still, you can adjust it to your needs. You can add a title, insert the title color, insert the event count – number of events you want to display. You can also choose from three display options – today upcoming, all upcoming, or current events. Time format can also be specified. Next, you can choose the specific categories to show, as well as the hours categories. Additionally, you can decide if you want to have auto scroll through your event list or not.
Next, you can add a custom event URL, choose whether to display the featured image for the event or not, and disable the event URL if you don’t want it to be clickable. And finally, there is an option for adjusting the colors t. Once everything is set, hit the Save button.
Now that we learned how to create Event singles, we move on to presenting them in the list. Again, this is a theme-specific feature, so if you’re using a different theme, or a theme that’s not been created with timetables in mind, you might not have these options. If that’s the case, feel free to jump to the next section where we get to the gist of creating and customizing timetables. Let’s go through some of the event list types you get with Songbook.
Info Visible Event List
The Info Visible Event type of list displays event singles in gallery layout, and as its name indicates – the info is visible and it is placed over the images.
To create the same list, you need to add the Events List shortcode to a page and choose Gallery type for List Appearance.
To make info visible, you should open the Layout section, and choose Info Visible for Item Layout.
Info on Hover Event List
For the Info on Hover Event list we decided to show event singles in masonry layout, and as its name points out – the info is visible on hover over the images.
To create this type of list, you need to add the Events List shortcode to a page and choose Masonry type for List Appearance.
To make info visible only on hover, you should open the Layout section, and choose Info on Hover for Item Layout.
Info from Bottom Event List
For the Info from Bottom Event list we decided to show event singles in masonry layout, and as its name points out – the info is visible on hover over the images and it slides in from bottom.
To create this type of list, you need to add the Events List shortcode to a page and choose Masonry type for List Appearance.
To make info showing up from bottom, you should open the Layout section, and choose Info from Bottom for Item Layout.
Events Slider
Events Slider displays our classes in slider layout. The list appears as a slider with four columns.
To create a slider, you need to add the Timetable Events List shortcode to a page and choose Slider for List Appearance.
Now that we know what events are, and everything related to their appearance, we are ready to move forward with creating and customizing our timetables. But, before we proceed to timetable settings in more detail, let’s take a look at another important part of any timetable – the timetable columns.
As we mentioned above, timetable columns consist of events singles. A column will typically represent a day of the week, but it can be some other category, too. It’s a good idea to set your columns right after you set your event singles. That way, you can proceed to set other timetable options with all the crucial elements already created.
To start, navigate to Timetable Columns from the WordPress admin panel.
Under All Timetable Columns, you will see all existing columns, in our case – days of the week, from Monday to Sunday.
Click on the column’s title to edit it. We can see that column single has only two editable parts, one is the title – the one that appears in the timetable, and the other is the order number. If you enter number 1 in there, the column you are editing is going to be the first column in your timetable.
You can add as many columns as you need.
Themes with Timetable Plugin
View Collection
Shortcode Generator
Just as its name suggests, this option allows you to generate a shortcode that you can copy and paste on any page you wish to display your timetable on.
Main Configuration
The first sub-tab is the Main Configuration tab and it lets you create a shortcode for the page you want to add a timetable to. If you already have a saved timetable, you can get its shortcode by selecting the unique ID from the dropdown.
When creating a new shortcode, you need to type a new shortcode ID.
Once you define all the elements you want to add to the timetable view, the generated shortcode will appear within this field.
The first thing you should do is to choose the Events you want to present with the timetable. Simply select the events you want to display; to select more than one press CTRL key for Windows or Cmd for Mac iOS and select your events while holding the key.
After that, you can choose the specific categories you’d like to display within the timetable.
Additionally, you can add hour categories (if you have any), and the columns you want to have.
Next, you can define the Hour measure. Dropdown contains 3 options – Hour (1h) which is selected by default, Half hour (30min) and Quarter hour (15min).
Going further, you can opt to display your event filtering as a dropdown menu or tabs.
Another thing related to the Filter display is the Filter kind. We have three options within the dropdown – you can filter your timetable by event, by event category or by event and event category.
The last filter-related setting is the Filter label – the text that appears next to the filter.
Our Filter label text is All Events and it looks like this on the page.
Next, you can define the Time format, i.e. how you want to display the time.
The next three dropdowns allow you to hide the “All Events” view, to show or hide the first (hours) column, and to display or not the end hour in the first column.
Since there are a couple of predefined event block layouts, you can choose which one you would like to display.
Further options let us hide empty rows (if there are timetable hours without events), disable event URL if we don’t want our blocks to be clickable, and we can specify text align inside the timetable – default text align is center.
If you plan on using more than one table on the same page, you should insert a unique identifier – ID. Otherwise, you can leave this field empty.
To define row height in pixels, enter a value in the field below.
If you prefer a list better then timetable view, you can choose to display it on desktop by selecting Yes from the dropdown.
As for the mobile devices, they will always display the list mode, and it will look something like this:
You should always make sure all the elements on your pages look perfect on all devices, regardless of the screen size, so remember to leave Responsive on Yes.
Mobile screens are not always big enough to display all the details, that’s why you can choose whether to show the event description in mobile mode or not. Each event single has two description fields, and you can opt to display only one of them, both, or none.
There is also an option to collapse the event hours in responsive mode. Since there is enough space to show event hours even on smaller screens, you don’t need to use this option.
Here’s what the event hours look like on mobile screen on the live page:
The next setting is for displaying colors in responsive mode. This is up to you, and if you used different colors in event settings, you’ll probably want them to be shown on smaller devices, too.
You can allow your customers to export your timetable to PDF, but note that you need to enable the responsive mode first (mentioned above). By allowing this, you will get an Export to PDF button, which, when triggered, generates your timetable in PDF format.
If you enable this option, you get to choose the button text – simply type in the text that will be displayed on the page along with the timetable. The default one is Generate PDF.
You can choose one of the two available fonts for PDF files – Lato and DejaVu Sans.
Colors
If you’re using Songbook, the typing options for your timetable will be defined by the theme settings. The plugin itself also has certain default values for colors, and in both cases you can easily customize these.
The second sub-tab under Shortcode Generator is the Colors sub-tab. Here, you can define all the colors connected to the timetable. You can change the default look of virtually everything – from the timetable box background and its hover, timetable box text and its hover, hours text color, filter color, to the Generate PDF button colors, and so on. These customization options allow you to adjust the timetable style to fit your page and your site perfectly.
If you know the hex code of the specific color you want to use, you can simply type or paste it in, or select it from the color picker that opens when you click on the color field.
Fonts
The next sub-tab is for Fonts. If you want to change the default font style for your timetable text, you can easily do that by entering the font family name into the first field.
You can also choose one from the Google fonts within the dropdown. Simply scroll and find the one you need and select it.
You can also define the font size. Type in the size in pixels.
Booking
The fourth sub-tab under the Shortcode Generator tab is Booking. Here you can define how everything related to booking events and appointments is displayed on your timetable.
You can specify whether or not to display the Book Now button and available slots info. If you plan on using the booking functionality, make sure to select Yes for Show booking button.
You can also define how you want to display the available slots label for singular and plural. The only difference here is that for singular labels we have ‘available slot’ and for plural labels we have ‘available slots’. This is the default setting, so you can leave it as it is, if you plan on having the available slots displayed.
Next, you can choose whether you want your booking view to be visible to the User or the Guest. The default one is User.
Moreover, you can choose if you want to allow guests to make a booking or not.
Furthermore, you can specify several labels – Booking label, Booked label, Unavailable label, Popup booking label, Popup login label, Popup cancel label and Popup continue label. As you can see, all these labels have default text that can be changed. If you are fine with a predetermined one, you can keep it.
If your website has a booking functionality, you should also have a checkbox for ‘Terms and conditions’, so make sure to set this to Yes.
This, of course, means that you should also set the ‘Text and conditions’ text by keeping the default one or entering your own.
Next, you can change the default Booking pop-up message. Here is the text you can edit in the text editor window within the code.
There is also a booking pop-up “Thank you” message. It appears once the booking has been made, and you can also change it easily.
Now, let’s see how the booking functionality works on the page. As we mentioned above, to allow your users or guests to book an appointment, make sure to choose Yes for the Show booking button option and configure all other options related to booking. This will automatically add the booking button to your generated shortcode, and it will look like this on the frontend (in this case, the live preview of our Songbook theme):
Once a user or a guest clicks on the Book now button, a pop-up window will appear. This is what it looks like in our case:
To book an appointment, users can insert their name and email address.
After an appointment has been successfully booked, the Thank you message will appear.
And that’s really all there is about adding booking to your timetables.
Let’s just jump to the Timetable Bookings option in your left-hand menu for a second.
Clicking on this option will take you to the Booking list. Here, you can see all bookings made within the timetable. Once you start receiving bookings here you’ll find a list where you can see Date, Event, User, and the Message.
The second tab in the menu is Export Bookings, which allows you to export specific Events and Columns. When you are selecting events and columns to export, press the Export button and a CSV file with your bookings will be automatically downloaded to your computer.
Custom CSS
We’ve come to the last sub-tab here, reserved for more experienced WordPress users. If you have any coding knowledge, you can swiftly add your Custom CSS code within the belonging field to get more options if needed.
And these are all settings for the Shortcode Generator tab. Once you are done with adjusting it, you can go ahead and copy your generated shortcode from the top. Press the Copy to Clipboard button.
To add the shortcode to a page, go to the page backend. The next steps will depend on the page builder you’re using. For instance, for the WPBakery page builder, you can paste it to the simple Text shortcode, for the Gutenberg you can paste to a Text block.
As for the Elementor page builder and our Songbook theme, we added our generated shortcode to the element titled Shortcode. This is a great way of adding any elements in the form of a shortcode to the page.
Once again, here’s how our timetable looks on the page.
Event Post Type
This is the second tab under the Timetable section. The Event Post Type tab has only three adjustable fields. You can change the way your events labels are presented. For the Event slug – you can leave it as it is, since it doesn’t appear anywhere and it’s not visible.
The second and the third one are visible on the page, and if you don’t want to call your events “Events” or your singular event – “Event,” you can change the labels entering different text within the Event label singular and Event label plural areas. Once you are done press the Save button.
Email Configuration
Email Configuration tab is related to emails and email templates. It has four sub-tabs.
Admin email
Admin email sub-tab is where you should add your Name and your Email address.
There is also a third option that allows you to enable a Debug – if you opt to enable it, the additional information will be displayed in the booking pop-up.
You can also configure an Admin SMTP to route your emails which you can use to send emails from a third party mailing service. First, insert your Host, Username and Password.
Then insert your SMTP Port – the port your server works on.
The last thing here is to choose the SMTP Secure layer. Dropdowns contains two options – SSL and TLS. Both are keeping the internet connection secure and protect the data that is being sent.
Email template for client
The third sub-tab under Email Configuration tab is where you can set the Email template for client. We can see that the one that is already set is Thank you for using our services. You can effortlessly change the text by typing in a different message. Once you are done, don’t forget to click on the Save Options button.
There is also an Email template for admin, and the only thing different is the text. Over here the message is New client, which can also be changed.
Timetable Dummy Data
Timetable Dummy Data is another tab located under Timetable. It is there if you want to use the Timetable Responsive Schedule plugin’s default pages. You can import them easily, simply press the Import dummy content button and wait a couple of seconds until it is imported. After that, the default data will appear within the Pages.
Google Calendar
One last tab under Timetable is Google Calendar. It has three sub-tabs – Configuration, Export and Import.
Configuration
To configure your Google Calendar, first you’ll need to log in to your Gmail account. Once you’re logged in, visit Google API Console, the screen looks like this:
Click on Select a project.
This will open a new window with your existing projects. You should press the New Project button.
Specify the project name, and press the Create button to continue.
This will take you back to your dashboard screen. Click on the navigation menu opener (hamburger icon in the top left corner).
From the navigation menu, select IAM & Admin > Service accounts.
Now, press the + Create Service Account button.
Enter the Service account name. The Service account ID will automatically be generated from the account name. Once you are done, press the Create button.
The next step is to specify a role from the dropdown. You should scroll and search for Project, and then select Editor. Now click on the Continue button.
The third step is optional. You can add more users to your service account and select their roles.
Once you are settled, click on Done, which will take you to the next screen.
Over there, under Actions, click on Create key.
You should now create a private key for your project. The recommended key type is JSON and we advise you to follow that recommendation.
After you click on the Create button, the .json file will start downloading and you will see a note on your screen – Private key saved to your computer.
Next, navigate to APIs & Services > Library from the navigation menu.
Type in ‘calendar’ inside the search form. Choose the Google Calendar API.
Now press the Enable button, to enable API for your project.
You should now visit Google Calendar and create a new calendar – navigate to Other calendars > Create new calendar.
Once you specify the calendar name, and optionally a description, you should press the Create calendar button.
Then, search for your calendar and select Share with specific people under its Settings.
Click on the Add people button.
Hop back to IAM & Admin > Service Accounts and copy your generated email.
Paste your email to calendar settings now, and within the Permissions dropdown select Make changes to events. Once you are done, press the Send button.
Now scroll down through the page to find the unique Calendar ID. Copy it.
This is the ID you should insert in field Calendar ID under Timetable > Google Calendar > Configuration.
The field below is reserved for the previously downloaded .json file. Once you insert the copy of it, press the Save Options button.
If you want your calendar to work properly, make sure your WordPress timezone is the same as for your Google Calendar. Navigate to Settings > General and configure your timezone.
Export
The second sub-tab under Google Calendar is the Export tab. This tab allows you to export your event hours into Google Calendar. You can select only specific events and you can assign columns to weekdays. When you are done, press the Export button.
Alternatively, you can import events from your calendar to the timetable. Simply press the Get Calendar data button to fetch events data from Google Calendar.
We didn’t configure the Google Calendar for our Songbook theme, but this is what it looks on our Anahata WordPress theme.
Wrapping It Up
And that’s it. We’ve covered everything you need to know in order to install, set up and manage your Timetable Responsive Schedule plugin. As you can see, this powerful plugin provides everything you might need to run a website that requires scheduling and booking functionality. You can create tables with events, classes and appointments that fit your needs perfectly and reflect your brand style. As we saw, everything about these timetables is customizable – from rows and columns, to labels, formats and box behavior, not to mention the styling options. Again, some themes, like our Songbook used in this tutorial, are predesigned to make the best out of the booking and scheduling functionality that this powerful plugin provides. Even if you’re using a different theme – don’t worry. Once you purchase and install the plugin, you will have a set of options at your disposal, allowing you to create beautiful, functional timetables with absolute ease.
