This tutorial is kindly provided by the plugin developer.

Please note that plugin doesn't have demo content import.



Timetable Responsive Schedule For WordPress is a powerful and easy-to-use schedule plugin for WordPress. It will help you to create a timetable view of your events in minutes. It is perfect for gym classes, school or kindergarten classes, medical departments, nightclubs, lesson plans, meal plans etc. It comes with Events Manager, Event Occurrences Shortcode, Timetable Shortcode Generator and Upcoming Events Widget.


Full List Of Features

  • Build a Timetable In Minutes!
  • 100% Responsive and Mobile Compatible
  • Unlimited Timetables, Events And Occurrences Of Events
  • Grouping Of Events That Occur In The Same Time Intervals
  • Event Tooltips
  • Event Filtering
  • Weekdays Menu Allows To Translate Weekday Names To Your Language
  • Events
    • Events In a Form Of Custom Post Type With Ability To Define Title, Subtitle And Description Content
    • Ability To Define Custom Event Colors Including Hovers
    • Ability To Define Custom URL For An Event
    • Ability To Disable Event URL (Create Unclickable Events)
    • Unlimited Number Of Event Occurrences (Event Hours)
    • Ability To Define Weekday, Start / End Hour For Each Event Occurrence (Event Hours)
    • Two Additional Description Fields For Each Event Occurrence (Event Hours) With HTML Support
    • Optional Tooltip Description Field For Each Event Occurrence (Event Hours) With HTML Support
    • Optional Category Field For Each Event Occurrence (Event Hours)
    • Ability To Edit / Delete Event Occurrences With Ease
  • Timetable Shortcode Generator
    • Ability To Choose The Events That Are To Be Displayed In Timetable
    • Ability To Choose Hour Categories That Are To Be Displayed In Timetable (e.g. Only Morning Or Night Events)
    • Ability To Choose Weekdays That Are To Be Displayed In Timetable
    • Choose Between Dropdown Menu and Tabs For Event Filtering Menu
    • Define Custom Text Label For All Events
    • Custom Time Formats To Choose From Including 12/24 Hour Formatting
    • Ability To Hide Column With Hours
    • Ability To Show Only Start Hour Or Both Start And End Hour In Timetable
    • 3 Different Layouts For Event Displaying
    • Ability To Hide Rows Without Events In Timetable
    • Ability To Disable Event URL In Timetable (Nonclickable Events)
    • Custom Text Align For Event Displaying
    • Unlimited Timetables On A Single Page Via Id's
    • Customizable Row Height In Pixels
    • Responsive Mode On / Off Setting
    • Live Shortcode Generator - Just Copy Generated Shortcode And Paste It To Your Post
    • Ability To Edit Existing Shortcode Snippets - Just Copy Shortcode From Your Post And Paste It To Shortcode Generator Under Settings / Timetable
  • Upcoming Events Widget
    • Display Today Upcoming Events Or All Upcoming In A Form Of Scrollable List
    • Ability To Define Number Of Events To Display
    • Ability To Define Custom Time Format
    • Server Time Or Database Time Based
    • Support For Timezone
    • Auto Scroll Feature
    • Build-In Color Picker
  • Build-In Color Picker
    • Ability To Choose A Color For Event Background
    • Ability To Choose A Color For Event Description Text And Hours
    • Ability To Choose A Color For Background And Text Hovers
    • Ability To Choose A Color For Timetable Odd / Even Rows
    • Ability To Choose A Color For Filterable Menu
  • Valid HTML5 Code
  • Crossbrowser Compatible
  • Documentation Included


Inserting Timetable in Your Page


Inserting Timetable using the Drag & Drop Builder

You can place your Timetable into pages and posts using the Drag & Drop Builder.

1. Click on the button Text/Image Block or drag into the editor in order to insert it.

2. Click on the "edit" icon of the Text/Image element and paste the short code of your Timetable that you've already configured.

3. Save Element

4 Publish



Shortcodes


Timetable



You can display timetable with your events by using the shortcode:

[timetable]

This shortcode can be configured under Settings->Timetable in your WordPress admin area.






Examples:


[tt_timetable event='x-ray,cardiology,dental,neurology,traumatology,pulmonary,pediatric' columns='sunday,monday,tuesday,wednesday,thursday,friday,saturday' time_format='H:i']


[timetable event='cardio-fitness,open-gym,body-building,zumba,boxing,crossfit' show_end_hour='1' event_layout='3' box_bg_color='3156A3' box_hover_bg_color='42B3E5' box_hours_txt_color='A6C3FF' filter_color='3156A3' text_align='left' font_custom='Arial' font_size='11']


[timetable event='cardio-fitness,open-gym,body-building,zumba,boxing,crossfit' filter_style='tabs' show_end_hour='1' event_layout='3' row1_color='C5C5C5' box_bg_color='409915' box_hover_bg_color='FFFFFF' box_hover_txt_color='000000' box_hours_hover_txt_color='000000' filter_color='409915' font_custom='Arial' font_size='11']


Event hours


You can display event hours boxed list by using below shortcode:

[tt_event_hours]


Notice:
The plugin doesn't use the global Wordpress time format setting at all. You need to supply the time format to the shortcode, like this:
[tt_event_hours time_format="H:i" class="tt_event_margin_top_27"] 



Available shortcode parameters:

ParameterPossible valuesDescription
TitleEvent HoursSpecifies the title of the hours list. Example:
[tt_event_hours title='Fitness Hours']
time_formatH.iSpecifies the time format (Documentation on date and time formatting) for list hours. Example:
[tt_event_hours time_format='g:i a']
class
Specifies custom css class/classes for event hours list. Example:
[tt_event_hours class='customcssclass othercustomcssclass']
hour_category
Specifies the hour category/categories to be displayed. Hour categories can be defined for each hour on event edit page in your admin area under 'Event hours' box. Example:
[tt_event_hours hour_category='morning,evening']
text_color
Specifies text color. Example:
[tt_event_hours text_color='#000']
border_color
Specifies border color for event hours box. Example:


CSS Styles

The plugin uses the following cascade of styles (in order):

  • style.css - default styles for timetable, 
  • responsive.css - styles for responsive design, 
  • superfish.css - default styles for event filter menu, 
  • event_template.css - default event page styles. 

Upcoming Events widget

You can use Upcoming Events widget to display upcoming events in sidebar as scrolling list. You can do that in your WordPress admin area under Appearance->Widgets.






How to translate the plugin?


Timetable Responsive Schedule For WordPress plugin have language files po/mo included (the files' location is /wp-content/plugins/timetable/languages), so it is easy translatable. Please check the detailed instruction here: How to translate a Vamtam theme in other language?



Troubleshooting:

Case 1:

If you notice that all events display only in the first column of your Timetable, please check if you've filled in the order number for each Timetable column: 

 

Case 2:


If you notice that no event display in the schedule, please check if the Events' hours are set properly - please check the screenshot below for more details:





How to edit the "events" slug


If you need to modify the "events" slug in the permalink structure, please replace it in the Events post type configuration the way you need: