UI Builder Calendar Component

[sandeep srivas3]

Hello,

Our requirement is to make grid clickable on calendar component of UI builder.
But the condition for Grid clickable are
1) It should be clickable at and after today's date and it should open new incident form.

2) It should not be clickable at past dates and when anyone clicks on it, it should show as an alert(saying that Appointment can't be book on past dates).

Thanks

[KKM]

Hi Sandeep,

To make the grid clickable in the UI Builder calendar component while following your conditions, you can achieve this using a combination of:

Event Handling - Capture click events on the grid.

Date Validation - Check if the selected date is today or in the future.

Action Execution - Open a new incident form if valid; show an alert if invalid.

Implementation Steps:
1. Identify the Calendar Component in UI Builder
Ensure that you are working with the correct calendar component and can capture click events.

2. Add an Event Listener for Grid Clicks
You can use a Client Script or UI Action (if applicable) to handle the click.

3. Implement Click Logic
Extract the date from the clicked grid slot.

Compare it with today’s date.

If the date is in the future or today, open a new incident form.

If the date is in the past, show an alert.

Sample Script (Client Script or Script in UI Component)

function onGridClick(selectedDate) {
let today = new Date();
today.setHours(0, 0, 0, 0); // Normalize today's date

let clickedDate = new Date(selectedDate);
clickedDate.setHours(0, 0, 0, 0); // Normalize clicked date

if (clickedDate >= today) {
// Open New Incident Form
window.location.href = "/now/nav/ui/classic/params/target/new_incident"; // Adjust URL as needed
} else {
// Show alert for past dates
alert("Appointment can't be booked on past dates.");
}
}
How to Integrate in UI Builder
Locate the calendar component in UI Builder.

Bind the grid's click event to onGridClick() function.

Ensure the date parameter is correctly passed from the calendar to the function.

This should solve your issue!

Kindly mark it as "Accepted Solution"/"helpful", as it resolves your query. Please press like button for the resolution provided.

With Regards,
Krishna Kumar M - Talk with AIT3ch
LinkedIn: https://www.linkedin.com/in/mkrishnak4/
YouTube: https://www.youtube.com/@KrishAIT3CH
Topmate: https://topmate.io/mkrishnak4 [ Connect for 1-1 Session]