Multi-Color events in JavaScript Scheduler

The Scheduler can render a single event with multiple colors by dividing its visual representation into segments with different background colors. Use the template property of eventSettings to provide a custom event template.

This example uses a SubCount field that holds background color and height values. The template divides the event into color segments based on those values.

function eventTemplate(data) {
    return [
      "<div class='template-wrap'>",
        data.SubCount.map(function(item) {
          return [
            "<div style='background:" + item.background + "; height:" + item.height + "'>",
              "<div class=\"subject\">" + data.Subject + "</div>",
            "</div>"
          ].join('');
        }).join(''),
      "</div>"
    ].join('');
}

var data = [{
    Id: 1,
    Subject: 'Environment Day',
    Description: 'A day that creates awareness to promote the healthy planet and reduce the air pollution crisis on nature earth.',
    StartTime: new Date(2024, 1, 15, 9, 0),
    EndTime: new Date(2024, 1, 15, 14, 0),
    SubCount: [
        { background: 'darkblue', height: '50%' },
        { background: 'lightblue', height: '50%' },
    ],
},
{
    Id: 2,
    Subject: 'Health Day',
    Description: 'A day that raises awareness on different health issues. It marks the anniversary of the foundation of WHO.',
    StartTime: new Date(2024, 1, 16, 9, 0),
    EndTime: new Date(2024, 1, 16, 14, 0),
    SubCount: [
        { background: 'yellow', height: '33.3%' },
        { background: 'yellowgreen', height: '33.3%' },
        { background: 'green', height: '33.3%' },
    ],
},
{
    Id: 3,
    Subject: 'Cancer Day',
    Description: 'A day that raises awareness on cancer and its preventive measures. Early detection saves life.',
    StartTime: new Date(2024, 1, 17, 9, 0),
    EndTime: new Date(2024, 1, 17, 14, 0),
    SubCount: [
        { background: 'pink', height: '50%' },
        { background: 'red', height: '50%' },
    ],
}];

var scheduleObj = new ej.schedule.Schedule({
    width: '100%',
    height: '650px',
    selectedDate: new Date(2024, 1, 15),
    views: [{ option: "Week" }],
    eventSettings: {
        dataSource: data,
        template: eventTemplate
    }
});
scheduleObj.appendTo('#Schedule');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Schedule Typescript Control</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Schedule Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/bootstrap5.3.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>

    <style>
        .e-schedule .e-vertical-view .e-content-wrap .e-appointment,
        .e-schedule .e-timeline-view .e-content-wrap .e-appointment {
            border-radius: 8px;
        }

        .e-schedule .e-vertical-view .e-content-wrap .e-appointment .e-appointment-details {
            padding: 0;
            height: 100%;
        }

        .e-schedule .template-wrap {
            height: 100%;
            white-space: normal;
        }

        .e-schedule .template-wrap .subject {
            font-weight: 600;
            font-size: 15px;
            padding: 4px 4px 4px;
            height: 25px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .e-schedule .e-timeline-view .e-appointment .e-appointment-details {
            padding: 0;
            height: 100%;
            width: 100%;
        }

        .e-schedule .e-timeline-view .template-wrap {
            width: 100%;
        }

        .e-schedule .e-timeline-view .template-wrap .subject {
            font-size: 16px;
            height: 36px;
            text-align: center;
        }
    </style>
</head>

<body>

    <div id="container">
        <div id="Schedule"></div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>