Timeline Visualization

Resource Timeline Guide

The [clisyc_timeline] shortcode provides a powerful, high-level view of your schedule. It displays multiple resources (Staff, Rooms, or Services) as horizontal “tracks,” similar to video editing software, making it easy to identify gaps and overlaps in your availability.

1. Basic Usage

To display the timeline with default settings (showing all enabled dimensions for the current week), paste the following code:

[clisyc_timeline]

2. Customizing the View

You can adjust the timeline by adding “attributes” to the shortcode.

  • Change the Time Range: Choose between a single day, a full week, or a month view.
    • [clisyc_timeline view="day"]
    • [clisyc_timeline view="week"] (Default)
    • [clisyc_timeline view="month"]
  • Set the Height: If you have many resources, you can make the container taller (value is in pixels).
    • [clisyc_timeline height="800"]
  • Filter Resources: Show only specific categories (e.g., only show Rooms). Use comma-separated slugs.
    • [clisyc_timeline resources="clisyc_room"]
    • [clisyc_timeline resources="clisyc_room, clisyc_practitioner"]

3. Visual Styling

  • Color-Coding: Decide how the “blocks” on the timeline are colored.
    • [clisyc_timeline color_by="service"] (Colors match the Service color)
    • [clisyc_timeline color_by="status"] (Green = Available, Red = Blocked, Blue = Booked)
  • Toggle Controls: Show or hide the navigation buttons and the legend.
    • [clisyc_timeline show_controls="false" show_legend="false"]

4. Advanced Configuration

For specific business hours, you can define the start and end times shown in the Day view (uses 24-hour format):

[clisyc_timeline view="day" start_time="09:00" end_time="17:00"]

Loading timeline...

Leave a Comment