Monthly Calendar Scheduling Widget

Overview
This widget includes two calendars that display available booking dates. Users can select a start and end date to reserve. 
Structure
When this block is added to a page, it is placed within a group called Blocks container 860 (do not rename) on the page. This group contains the responsive settings for all blocks.

This widget uses the Toolbox plugin's expression element to get a list of dates in a month. These two elements need to be visible on page for the list of dates to generate.
var - Expression Get days in month 1 generates the list of dates in the first month
RepeatingGroup month 1 days will display a list of dates in month 1
var - Expression Get days in month 2 generates the list of dates in the second month
RepeatingGroup month 2days will display a list of dates in month 2

The block also comes with a data type called Blocked dates.  This is the data type that will store the booking dates and each of its date range (start and end dates). 

Group Disable clicking cell? (month 1) and Group Disable clicking cell? (month 2) will control when a date in the respective month is clickable:
If a date is less than the current date, then the date will not be clickable
If the dates are the selected start and end dates, then they will not be clickable
If there is an existing booking (e.g. Sep 20-23):
When a user selects a start date of Sep 15, then the user can only select an end date prior to the start date of the next booking (e.g., Sep 19) and any date after Sep 19 with not be clickable.
When a user selects a start date of Sep 26, then the user can only select a start date after the end date of a previous booking (e.g, Sep 24) and select an end date up until the start date of the next booking.

Shape today indicator (month 1) and Shape today indicator (month 2) will show only when the month's date is the current date.

Clicking on Button Select first date and Button Select end date will allow users to select or edit the booking's start and end dates.
Group Inner select date (month 1) and Group Inner select date (month 2) will trigger the workflows to select those dates.

Clicking on Button Cancel will reset the select dates and clicking on Button Confirm will create an entry for Blocked dates . This will block those dates on the calendar to prevent other users from booking.

Popup Hidden Variables
This popup includes various variables that are referenced in workflows or conditionals on the page.
var - ⚙️ App settings - This group stores the App settings object (e.g., app name, primary color, and etc.)
var - variable name placeholder - This group is a placeholder.
var - App variables - This group stores the App variables entry (only applicable to apps that utilize site-wide app variables).
var - month offset (month 1) & var - month offset (month 2) - This is used to generate the list of days in the two monthly calendars.
var - selected first date - This stores the selected start date.
var - selected second date - This stores the selected end date.
var - start date input selected? & var - end input selected? - These are temporary variables that check if the start or end dates are selected/focused.
var - blocked dates (before booked dates) & var - blocked dates (after booked dates) - These variables are used to prevents users from booking dates that overlap with existing bookings.
For more information on how to use hidden variables, click here.
How to set up
This widget should work right out of the box and it is fully responsive. To customize, you may want to add a new field to the Blocked dates data object and associate the blocked dates with another thing in your database (e.g., hotel room or a product for rental).
If you do proceed with adding a new field, make sure to update any workflows or do a search for blocked dates logic to include that search criteria.

Canvas library - Previous

Blocks

No Reply Comments Thread

Last modified 2mo ago

Copy link

On this page

Overview

Structure

How to set up