Disable all dates expect Saturdays in UI Builder Calendar component

[Meet Mewada]

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]

What you can do is to create a custom transformer data broker with the return JSON output of:

[
{ "start": "2025-01-01", "end": "2025-01-03" },
{ "start": "2025-01-05", "end": "2025-01-10" },
{ "start": "2025-01-12", "end": "2025-01-17" },
{ "start": "2025-01-19", "end": "2025-01-24" },
…
]
I would define 2 input properties:
start - with this property you define where the calendar should start. eg: 2025-01-01 00:00:00 
end -with this property you can defined when should be the last date this calendar shows. eg: 2060-01-01 00:00:00

I propose using GlideDateTime here so you will be able to utilize getDayOfWeekLocalTime() function. (otherwise you can run into errors explained in this KB: https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0759254) 


Then within that transform you can write a GlideDate function to calculate the exact ranges for you.

At the end you should be able to databind this array of JSON to your calendar component.

[Meet Mewada]

Hi @Martin Virag,

I have created one custom transformer data broker, as suggested. However, the output doesn't seem to appear. What do you think can be the error?

script

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,
                'end_date': end_date
            });
            start_date = '';
            end_date = '';
        }
        gdtStart.addDays(1);
    }

    return answer;
}

[Martin Virag · Accepted solution]

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

[Meet Mewada]

@Martin Virag 

Agreed! 
I fixed it. However, the next problem I see is the Object data. Somehow, it gets sorted A-Z which results in incorrect format for Disabled Items property.

Is there a way to fix this?

Thanks in advance.