Disable all dates expect Saturdays in UI Builder Calendar component

Meet Mewada · ‎07-10-2025

Hi team,

I have a use case to show only Saturdays in a calendar component of UI Builder.

We can definitely use Disabled Item property which considers a JSON payload of days to exclude.

However, since this has to be applied to all the months, is there any possible way to achieve this?

Thanks in advance!

Regards,

Meet M

Martin Virag · ‎07-15-2025

hi @Meet Mewada !

I actually figured out why you don't see a return value. The reason is that UIB only able to handle primitives (like strings, booleans) in the return value and in your script you return date type objects. You can see in the comments my modification

function transform(input) {
    var month = 6; //Month number
    var gdtStart = new GlideDateTime();
    gdtStart.setDayOfMonth(1);
    gdtStart.setMonthLocalTime(month);
    var answer = [];
    var total_days = gdtStart.getDaysInMonth();
    var first_day_of_month = new GlideDateTime(gdtStart);
    var last_day_of_month = new GlideDateTime(gdtStart);
    last_day_of_month.addDays(total_days - 1);

    var start_date, end_date = '';
    for (var i = 0; i < total_days; i++) {

        if (gdtStart.equals(first_day_of_month))
            start_date = gdtStart.getDate();

        if (gdtStart.getDayOfWeek() == 7)
            start_date = gdtStart.getDate();
        if (gdtStart.getDayOfWeek() == 5)
            end_date = gdtStart.getDate();
        if (gdtStart.equals(last_day_of_month))
            end_date = gdtStart.getDate();
        if (start_date != '' && end_date != '') {
            answer.push({
                'start_date': start_date.toString(), //modified this line
                'end_date': end_date.toString() //and this
            });
            start_date = '';
            end_date = '';
        }
        gdtStart.addDays(1);
    }

    return answer;
}

Tested it on my environment. Can see the result here:

if my solution helped you please mark it as helpful and accept the solution

View solution in original post

Martin Virag · ‎07-15-2025

You are right and I think we cannot influence this from the transform map.
What I would then try doing:
1) create a client state parameter : this parameter will be holding your final json (can be a string as well at this point)

2) create a client script: the client script should be triggered when the data resource is fetched successfuly (add an event to the data resource)
the client script should take the api.<yourdatasource> and transfer it into an object format defined by you and at the end set the API.setState . Be aware that the api.setState is asynchronous by nature, but there is a way to make it synchronous (check documentation for this)
3) I would bind the final client state to the disabled items property

It sounds like a little overengineering and hack here, but I really does not have a better idea at this point 🙂

Meet Mewada · ‎07-15-2025

@Martin Virag
it worked! I see the order didn't matter, even if end is first and start is second in the object, it still works.

I really appreciate the approach, and assistance. Thanks a lot.

Now I would like to enhance this feature, by making it effective. Let us try to trigger an event which will define which month + year was selected by the user.

Can we do this?

Martin Virag · ‎07-15-2025

well, it shouldn't be an issue as the event you are looking for already exists:
https://developer.servicenow.com/dev.do#!/reference/next-experience/yokohama/now-components/now-date...

I would add an event handler when Date time value set and update a client state parameter with the current date value, this way you can provide an inter-component variable