5.1Calendar

Here's a typical frontend calendar:

Let's describe its sections. At the top of it, we see:

• Filtering buttons (left)

  Those dropdowns allow the customer to filter for a particular service and/or coworker. The services and coworkers listed are always in accordance to the eventual specification of the shortcode.

  If the calendar is for a single service, the dropdown won't be displayed.

  You can hide those dropdowns with the nofilter shortcode attribute (check the Shortcodes paragraph of the documentation).

• Timezone selector (right)

  The calendar dates and times are shown accordingly to your WordPress timezone (as set in the General settings of your site). The customer can conveniently change the timezone using this dropdown.

  When a reservation is made, the selected timezone will be saved in the reservation data, so you can check it in the reservation's details (Overview tab). The confirmation e-mail sent to the customer, will transpose all the times accordingly to the selected timezone in the frontend, if not default.

  You can hide this dropdown with the notimezone shortcode attribute (check the Shortcodes paragraph of the documentation).

The header of the calendar itself has two left-right arrows to change the month back and forth. It has also the name of the month and the year currently displayed.

By pressing them, a fast selector will be unfolded, for example here's what you get by clicking on the month's name:

The main calendar area contains, in our example, a single day with free slots on it. In our example, the little numbered dot indicates how many free slots we have inside that day, but the meaning of the number can be configured (check the Style customization section of the documentation).

By clicking on a day with free slots, the slot's list will be displayed:

At the top-right corner, we have (depending on what slots information are available) some filtering buttons:

• Time filter

  The customer can filter the slots by the starting time.

• Location filter

  The customer can filter the slots by location.

• Coworker filter

  The customer can filter the slots by service provider.

Those filters can be mixed together.

If the calendar is not read-only, just click on a slot to open the reservation form.

5.1.1Shortcode

In order to render a main frontend calendar, just use this shortcode anywhere in your page or post:

[tb-calendar]

Have you created more than one service? One for "Dental Care Session" and one for "Weekly Dentist Conference"? So using the [tb-calendar] shortcode will display all of the free slots in one calendar, all together (keeping the names separated).

In the post/page WordPress editor you'll find a comfortable TeamBooking button to insert shortcodes quickly:

Select Add calendar to open a shortcode configuraton for the main frontend calendar.

Select Add reservations list to open a shortcode configurator for the frontend reservations list.

Further tweaks and parameters are explained below.

Specific services only

Including only some events in a calendar frontend instance is very simple, just add the booking IDs (not the names!) to the shortcode:

• One service: [tb-calendar booking="dental-care-session"]

• Multiple services: [tb-calendar booking="dental-care-session, weekly-conference"]

Specific coworkers

If you want to render a personal calendar for a specific coworker, you can do the same. Go to Manage coworkers tab, and grab the specific shortcode for the coworker. You can also mix multiple coworkers.

• One coworker: [tb-calendar coworker="1"]

• Multiple coworkers: [tb-calendar coworker="1, 3"]

Mixed shortcodes

Shortcodes can be mixed, so i.e. you can render a calendar for a single coworker, with multiple services:

[tb-calendar coworker="1" booking="service-1, service-2"]

Read only calendar

If you want to render an informative frontend calendar without booking ability, just use the read_only attribute:

[tb-calendar read_only="yes"]

Hide the calendar to guests

If you want to completely hide the frontend calendar fon non-logged users, just use the logged_only attribute:

[tb-calendar logged_only="yes"]

Hide the filtering buttons

Filtering buttons for services and coworkers list will be shown by default, for the customer's convenience. If you don't want to show those buttons, you can specify that in the shortcode, using the nofilter attribute:

[tb-calendar nofilter="yes"]

Hide the timezone selector

If you want to hide the frontend timezone selector, just use the notimezone attribute:

[tb-calendar notimezone="yes"]

Change the slots style

If you want to specify the slots style (overriding the general setting for that) you can use the slot_style attribute:

[tb-calendar slot_style="1"]

Possible values are (at the moment) "0" for the default style (basic) and "1" for the Elegant style.

5.1.2Widget

The Team Booking Calendar widget shows a frontend calendar instance. You can choose which services to include, and if the calendar should be read-only (reservations not allowed). You can even choose to hide the filter button.