Enable future booking in Astro Room Screen
This is an example of enabling future booking in Astro room screen:
The stylesheet to be changed will be the same as the associated room profile. Reference to the diagram above will indicate which class or ID needs to be altered to achieve the desired effect.
Locate the 'gldp-default' class in the stylesheet content. If '.gldp-default' is not found, then one can be created at the end of the existing content:
.gldp-default { display: none !important }Future booking can be enabled by commenting out the 'display: none !important':
.gldp-default { /* display: none !important */ }Tapping the date will now show the date selector.
Adding Next/Previous Day Arrows
In RX SaaS v1.5 a new feature has been added to allow quick navigation to next and previous day bookings, this can be actioned using the arrows found on the left and right of the screen, see example image below.
These buttons are available by default if using version 4 of the Astro Stylesheet if you are using a previous version or a custom stylesheet and would like to add these navigational buttons this can be achieved by modifying your existing stylesheet by adding the below CSS.
/* next & previous day navigation */
#dayBack,
#dayForward {
z-index: 10;
position: absolute;
top: calc(50% - 30px);
}
#dayForward {
position: absolute;
right: 0;
}
/* button style */
.time-machine {
width: 60px;
height: 60px;
margin: 0 10px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.time-machine:active {
background: rgba(255,255,255,0.3);
}
.arrow {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.right {
margin-left: 7px;
border-left: 20px solid #fff;
}
.left {
margin-right: 7px;
border-right: 20px solid #fff;
}This will add simple white triangle arrows to the centre-left and centre-right of the screen, the CSS can be modified to better suit any custom styles if you require assistance with these changes contact our support at helpdesk@qedas.com
If you would like to remove these navigational buttons from any Stylesheet, simply remove the above CSS from the Stylesheet.
- style