SimplyBook.me

Changes

How to change the way time slots are shown (view source)

Revision as of 08:12, 11 August 2021

203 bytes added ,  2 years ago
no edit summary
Line 5: Line 5:  
}}
 
}}
    +
 +
<br><br>
 +
Video tutorial [[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=G5q1OCIcu8o]]
    
<br><br>
 
<br><br>
 
=Calendar Layouts=
 
=Calendar Layouts=
−
You can change calendar layout in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking Website Design</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Calendar Layout</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Calendar Layout Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Calendar Layout</span> drop-down.<br/>
+
You can change calendar layout in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Design settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Calendar Layout Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Calendar Layout</span> drop-down.<br/>
−
[[File:Themes and colors path v3.png |border| center ]]<br/><br>
+
[[File:Calendar layout path new navigation.png|1200px |border| center ]]<br/><br>
 
There are 8 types of Calendar Layout:<br/>
 
There are 8 types of Calendar Layout:<br/>
−
[[File:Select timeline typev2.png |border| center ]]<br/><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/>
 
:*'''Slots Weekly''' - shows available times in the intervals equal to your service duration. Starts counting from the first available time for a week.<br/>
 
:Both available and unavailable timeslots are displayed.<br>
 
:Both available and unavailable timeslots are displayed.<br>
Line 33: Line 35:  
:Only available times are displayed, unavailable slots are hidden.<br>
 
:Only available times are displayed, unavailable slots are hidden.<br>
 
[[File:Daily classes updated.png |border| center]]
 
[[File:Daily classes updated.png |border| center]]
−
<br/><br/>
  −
::<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 calendar layout.</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 for a date.<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>
Line 45: Line 45:  
<br/><br/>
 
<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 calendar layout allow such adjustments.<br>
 
You can also adjust the colors for available and unavailable slots to your taste and your company brand colors. Almost any theme and calendar layout 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;">Booking Website 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>
+
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 settings</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]]
 
[[File:Busy and open color.png | border| center]]
 
<br/><br/>
 
<br/><br/>
Line 52: Line 52:  
<br/><br/>
 
<br/><br/>
 
=End Time Display=
 
=End Time Display=
−
Modern and Slots Weekly calenday layouts 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;">Booking Website Design</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Calendar Layout</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Calendar Layout settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Show end time</span> option.
+
Modern and Slots Weekly calenday layouts 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 settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Calendar Layout 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]]
 
[[File:Show end time select.png | border| center]]
 
<br/><br/>
 
<br/><br/>
Line 60: Line 60:  
=Date Pickers=
 
=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>
 
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;">Booking Website Design</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Calendar Layout</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Calendar Layout settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Select datepicker type.</span><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 settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Calendar Layout settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Select datepicker type.</span><br>
    
There are two types of datepickers:
 
There are two types of datepickers:
Line 72: Line 72:  
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>
 
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>
 
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;">Booking Website 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.
+
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 settings</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]]
 
[[File:Timeline sidebar select.png |border|center]]
 
<br/><br/>
 
<br/><br/>
Line 78: Line 78:  
[[File:Timeline sidebar.png |border| center]]
 
[[File:Timeline sidebar.png |border| center]]
 
<br/><br/>
 
<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>
+
::<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 or be absent at all depending on the theme).</span>
 
<br/><br/>
 
<br/><br/>
 +
=Seats Left=
 +
:1. Enable <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Display Remaining Spaces</span> in your <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Custom Features</span> section.
 +
[[File:Remaining spaces enable path.png|border|center]]
 +
<br><br>
 +
:2. (optional) Enable the corresponding option to display <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">the total number</span> of spaces along with the remaining ones.
 +
[[File:Remaining spaces setting.png|border|center]]
 +
<br><br>
 +
:3. As the result the clients will be able to see the number of the spaces left per each timeslot(and total if <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Show the total number of spaces per slot</span> is enabled).
 +
[[File:Display slots left client side.png|1200px|border|center]]
 +
<br><br>
 +
<br><br>
Retrieved from "https://help.simplybook.me/index.php/Special:MobileDiff/6135...7235"