Multi-Color Events in EJ2 JavaScript Scheduler control

18 Mar 20259 minutes to read

In Scheduler we can display the multiple colors within a single event. This can be achieved by using the template option available within the eventSettings property. Here, we’ve used SubCount as an additional field. The SubCount field contains the background color and height values. Based on these values, events will be divided into different colors.

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

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/29.2.4/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-schedule/styles/bootstrap5.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</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>