Set task text color different in case on single day event

Event Calendar
#1

I am loading event calendar correctly:

However, if there is any event with one day, in that case I want to change text color to #000000,
how could i do it? Basically for events I am setting color as:

const calendars = [ // data for calendars
{
id: “completed”,
label: “Project Completed”,
readonly: true,
active: true,
color: {
background: “#1b62ac”,
border: “#1b62ac”,
textColor: “#ffffff”
}
},
{
id: “under_construction”,
label: “Project Under Construction”,
readonly: true,
active: true,
color: {
background: “#0abb87”,
border: “#0abb87”,
textColor: “#ffffff”
}
},
];

however, if the event length is only one day, in that case label are not becoming visible as they are in white color, so just looking to set different color, for single day event.

#2

You can create a custom monthEvent template for this:

const toDouble = (number) => {
    if (String(number).length < 2) {
        return '0' + number;
    }

    return String(number);
}

const createMonthEventHTML = ({ event, calendar }) => {
    const { start_date, text } = event;
    const eventTime = `${start_date.getHours()}:${toDouble(start_date.getMinutes())}`;
    const label = text;

    return `
        <div class='wx-event-calendar-label'>
            <span class='wx-event-calendar-marker' ></span>
            <span class='wx-event-calendar-event-time'>${eventTime}</span>
            <span class='wx-event-calendar-event-oneday-label'> ${label} </span>
        </div>
    `;
}

const eventCalendarInstance = new eventCalendar.EventCalendar('#root', {
    calendars,
    events,
    mode: 'month',
    date: new Date('2024-12-05T00:00:00'),
    templates: {
        monthEvent: createMonthEventHTML
    }
});

Related styles:

.wx-event-calendar-marker {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 50%;
    background-color: var(--wx-background);
}

.wx-event-calendar-event-time {
    color: #000 !important;
    font-weight: var(--wx-font-weight-md);
}

.wx-event-calendar-label {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wx-event-calendar-event-oneday-label{
    color: #000 !important;
}

Here is an example: DHTMLX Snippet Tool