Difference between revisions of "How to change the way time slots are shown"

From SimplyBook.me
 
Line 1: Line 1:
 +
{{#seo:
 +
|title=How to change the way time slots are shown -  SimplyBook.me
 +
|titlemode=append
 +
|keywords=faq, frequently asked questions, booking software, appointment system questions, appointments online, calendar software, booking system, booking calendar, scheduling software, online appointment scheduling, online scheduling, setup, setup help, support, help content, timeline, slots view, design, slots look, slots show, colors, slots colors
 +
}}
 +
 +
 
<br><br>
 
<br><br>
You can change timeline in Settings // Design // Themes and Colors // Timeline settings// Select timeline type drop-down.<br/>
+
=Timelines=
[[File:Themes and colors path v3.png | center ]]<br/><br>
+
You can change timeline in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Design</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Themes & Colors</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Timeline settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Select timeline type</span> drop-down.<br/>
 +
[[File:Themes and colors path v3.png |border| center ]]<br/><br>
 
There are 8 types of timeline:<br/>
 
There are 8 types of timeline:<br/>
[[File:Select timeline type.png | center ]]<br/><br>
+
[[File:Select timeline typev2.png |border| center ]]<br/><br>
:'''Slots weekly''' - shows available time in the intervals equal to your service duration for a week. Starts counting from the first available time.<br/>
+
:*'''Slots Weekly''' - shows available times in the intervals equal to your service duration. Starts counting from the first available time for a week.<br/>
[[File:Slots weekly v3.png | center ]]<br/><br/><br>
+
:Both available and unavailable timeslots are displayed.<br>
:'''Modern''' - shows available time in the intervals equal to your service duration for a day. Starts counting from the first available time.
+
[[File:Slots weekly updated.png |border| center ]]<br/><br/><br>
[[File:Modern timeline new.png | center ]]<br/><br/>
+
:*'''Modern''' - shows available times in the intervals equal to your service duration. Starts counting from the first available time for a date.<br>
:'''Modern provider''' - shows available time for providers for chosen date. Starts counting from the first available time of all providers.
+
:Only available times are displayed, unavailable slots are hidden.<br>
[[File:Classes timeline.png | center ]]<br/><br/>
+
[[File:Modern updated.png |border| center ]]<br/><br/>
:'''Flexible weekly''' - shows available time in the intervals equal to your [[Need_to_change_interval_(timeframe)| timeframe]] duration for a week. Starts counting from the first available time.
+
:*'''Modern Provider''' - shows available time for providers for the selected date. Starts counting from the first available time of all providers.<br>
[[File:Flexible weekly timeline.png | center ]]<br/><br/>
+
:Only available times are displayed, unavailable slots are hidden.<br>
:'''Flexible''' - shows available time in the intervals equal to your [[Need_to_change_interval_(timeframe)| timeframe]] duration for a day. Starts counting from the first available time.
+
[[File:Modern provider updated.png | center ]]<br/><br/>
[[File:Flexible timeline.png | center ]]<br/><br/>
+
:*'''Flexible Weekly''' - shows available time in the intervals equal to your [[Need_to_change_interval_(timeframe)| timeframe]] duration. Starts counting from the first available time for a week.<br>
:'''Flexible provider'''- shows available times for providers in the intervals equal to your [[Need_to_change_interval_(timeframe)| timeframe]] duration. Starts counting from the first available time on selected date.
+
:Both available and unavailable timeslots are displayed.<br>
[[File:Flexible provider timeline.png | center]]<br/><br/>
+
[[File:Flexible weekly updated.png |border| center ]]<br/><br/>
:'''Daily classes'''- shows available times for classes in the intervals equal to class duration. Starts counting from the first available time.<br>
+
:*'''Flexible''' - shows available time in the intervals equal to your [[Need_to_change_interval_(timeframe)| timeframe]] duration. Starts counting from the first available time for a date.<br>
:(This timeline type is available when [[Custom_Features#Classes | Classes]] custom feature is enabled.)
+
:Both available and unavailable timeslots are displayed.<br>
[[File:New classes timeline.png | center]]
+
[[File:Flexible updated.png |border| center ]]<br/><br/>
 +
:*'''Flexible Provider'''- shows available times for providers in the intervals equal to your [[Need_to_change_interval_(timeframe)| timeframe]] duration. Starts counting from the first available time for a selected date.<br>
 +
:Both available and unavailable timeslots are displayed.<br>
 +
[[File:Flexible provider updated.png |border| center]]<br/><br/>
 +
:*'''Daily Classes'''(available when [[Custom_Features#Classes | Classes]] custom feature is enabled.)- shows available times in the intervals equal to service/class duration. Starts counting from the first available time for a date.<br>
 +
:Only available times are displayed, unavailable slots are hidden.<br>
 +
[[File:Daily classes updated.png |border| center]]
 
<br/><br/>
 
<br/><br/>
:'''''Please note!''''' [[Custom_Features#Multiple_Bookings | Multiple Bookings]] custom feature currently does not work with this timeline.
+
::<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Please note!''' [[Custom_Features#Multiple_Bookings | Multiple Bookings]] custom feature currently does not work with this timeline.</span>
 
<br/><br/>
 
<br/><br/>
:'''Weekly classes'''- shows available times for classes in the intervals equal to class duration with weekly options. Starts counting from the first available time.<br>
+
:*'''Weekly Classes'''- shows available times for classes in the intervals equal to class duration with weekly options. Starts counting from the first available time for a date.<br>
[[File:Weekly classes.png| center]]
+
:Only available times are displayed, unavailable slots are hidden.<br>
 +
[[File:Weekly classes updated.png|border| center]]
 
<br/><br/>
 
<br/><br/>
If you have services that have fixed start times and use modern, slots weekly, modern provider or any of classes timelines, you can try using [[Custom_Features#Appointment_at_Fixed_Time| Appointment at fixed time]] Custom Feature.
+
If you have services that have fixed start times and use modern, slots weekly, modern provider or daily classes timelines, you can try using [[Custom_Features#Appointment_at_Fixed_Time| Appointment at fixed time]] custom feature.
 +
<br/><br/>
 +
=Slots Colors=
 +
<br/><br/>
 +
You can also adjust the colors for available and unavailable slots to your taste and your company brand colors. Almost any theme and timeline allow such adjustments.<br>
 +
Please navigate to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Design</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Themes & Colors</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Color settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Busy time color</span> / <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Available time color.</span>
 +
[[File:Busy and open color.png | border| center]]
 +
<br/><br/>
 +
And here is the example of Slots Weekly timeline colors and legend on the client side:
 +
[[File:Colors client side.png |border| center]]
 +
<br/><br/>
 +
=End Time Display=
 +
Modern and Slots Weekly timelines allow to show end time per timeslot. You can turn this option on in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Design</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Themes & Colors</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Timeline settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Show end time</span> option.
 +
[[File:Show end time select.png | border| center]]
 +
<br/><br/>
 +
The example of end time display with Modern timeline:
 +
[[File:Show end time.png | border| center]]
 +
<br/><br/>
 +
=Date Pickers=
 +
There is also a possibility to adjust how the calendar looks on the client side to make the desired date selection as easy and convenient as possible.<br>
 +
Please go to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Design</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Themes & Colors</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Timeline settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Select datepicker type.</span><br>
 +
 
 +
There are two types of datepickers:
 +
:*'''Inline datepicker''' is more compact as the calendar is hidden till the client clicks on the date above the timeslots and gets a pop-up that allows switching between months and dates.
 +
[[File:Inline datepicker updated.png| border| center]]
 +
<br/><br/>
 +
:*'''Top calendar''' adds two lines calendar at the top of timeslots(4-5 lines calendar on mobile devices) that are shown all the time and allow to switch between dates and months.
 +
[[File:Top calendar.png | border| center]]
 +
<br/><br/>
 +
=Sidebar=
 +
You may wish to show service and/or provider information on the time step. It is especially useful if you have only one service and provider and the booking process goes straight to timestep.<br>
 +
Certain themes support showing timeline sidebar. <br>
 +
To enable it please go to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Design</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Themes & Colors</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Other settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Display timeline sidebar</span> option.
 +
[[File:Timeline sidebar select.png |border|center]]
 +
<br/><br/>
 +
Here is the example from Default theme:
 +
[[File:Timeline sidebar.png |border| center]]
 +
<br/><br/>
 +
::<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Please note!''' This sidebar is automatically hidden on mobile screens or within similar width(may differ depending on the theme).</span>
 
<br/><br/>
 
<br/><br/>

Latest revision as of 09:41, 10 July 2019




Timelines

You can change timeline in Settings -> Design -> Themes & Colors -> Timeline settings -> Select timeline type drop-down.

Themes and colors path v3.png



There are 8 types of timeline:

Select timeline typev2.png



  • Slots Weekly - shows available times in the intervals equal to your service duration. Starts counting from the first available time for a week.
Both available and unavailable timeslots are displayed.
Slots weekly updated.png




  • Modern - shows available times in the intervals equal to your service duration. Starts counting from the first available time for a date.
Only available times are displayed, unavailable slots are hidden.
Modern updated.png



  • Modern Provider - shows available time for providers for the selected date. Starts counting from the first available time of all providers.
Only available times are displayed, unavailable slots are hidden.
Modern provider updated.png



  • Flexible Weekly - shows available time in the intervals equal to your timeframe duration. Starts counting from the first available time for a week.
Both available and unavailable timeslots are displayed.
Flexible weekly updated.png



  • Flexible - shows available time in the intervals equal to your timeframe duration. Starts counting from the first available time for a date.
Both available and unavailable timeslots are displayed.
Flexible updated.png



  • Flexible Provider- shows available times for providers in the intervals equal to your timeframe duration. Starts counting from the first available time for a selected date.
Both available and unavailable timeslots are displayed.
Flexible provider updated.png



  • Daily Classes(available when Classes custom feature is enabled.)- shows available times in the intervals equal to service/class duration. Starts counting from the first available time for a date.
Only available times are displayed, unavailable slots are hidden.
Daily classes updated.png



Please note! Multiple Bookings custom feature currently does not work with this timeline.



  • Weekly Classes- shows available times for classes in the intervals equal to class duration with weekly options. Starts counting from the first available time for a date.
Only available times are displayed, unavailable slots are hidden.
Weekly classes updated.png



If you have services that have fixed start times and use modern, slots weekly, modern provider or daily classes timelines, you can try using Appointment at fixed time custom feature.

Slots Colors



You can also adjust the colors for available and unavailable slots to your taste and your company brand colors. Almost any theme and timeline allow such adjustments.
Please navigate to Settings -> Design -> Themes & Colors -> Color settings -> Busy time color / Available time color.

Busy and open color.png



And here is the example of Slots Weekly timeline colors and legend on the client side:

Colors client side.png



End Time Display

Modern and Slots Weekly timelines allow to show end time per timeslot. You can turn this option on in Settings -> Design -> Themes & Colors -> Timeline settings -> Show end time option.

Show end time select.png



The example of end time display with Modern timeline:

Show end time.png



Date Pickers

There is also a possibility to adjust how the calendar looks on the client side to make the desired date selection as easy and convenient as possible.
Please go to Settings -> Design -> Themes & Colors -> Timeline settings -> Select datepicker type.

There are two types of datepickers:

  • Inline datepicker is more compact as the calendar is hidden till the client clicks on the date above the timeslots and gets a pop-up that allows switching between months and dates.
Inline datepicker updated.png



  • Top calendar adds two lines calendar at the top of timeslots(4-5 lines calendar on mobile devices) that are shown all the time and allow to switch between dates and months.
Top calendar.png



Sidebar

You may wish to show service and/or provider information on the time step. It is especially useful if you have only one service and provider and the booking process goes straight to timestep.
Certain themes support showing timeline sidebar.
To enable it please go to Settings -> Design -> Themes & Colors -> Other settings -> Display timeline sidebar option.

Timeline sidebar select.png



Here is the example from Default theme:

Timeline sidebar.png



Please note! This sidebar is automatically hidden on mobile screens or within similar width(may differ depending on the theme).