Timeline grouping with highlighted days with existing appointments in the group

[Jirí]

Hello,

Is it possible to highlight days with existing (any) appointments in the group? When the groups are collapsed, user don't see if some appointments exist there until the group is expanded. We don't want to have groups expanded by default. Thank you.

Sample of expected result:

[Swathi Ravi]

Hi Jiri,

Thank you for reaching out to us!

Yes, it is possible to highlight days with existing appointments in the group when using the Scheduler's DataBound event. This approach ensures that even with groups collapsed, you can visually indicate whether appointments are present without needing to expand the groups by default.

Here’s how you can achieve this functionality:

@(Html.EJS().Schedule("schedule")

    .Width("100%")

    .Height("550px")

    .DataBound("onDataBound")

    .Render()

)

<script script type="text/javascript">

    function onDataBound() {

        const scheduleObj = document.querySelector('.e-schedule').ej2_instances[0];

        const workCells = document.querySelectorAll(".e-work-cells.e-resource-group-cells");

        workCells.forEach((cell, index) => {

            let projectEvents = [];

            const timestamp = Number(cell.getAttribute('data-date'));

            const startDate = new Date(timestamp);

            const endDate = new Date(startDate);

            endDate.setDate(startDate.getDate() + 1); // add one day

            const events = scheduleObj.getEvents(startDate, endDate);

            const cellRoomId = scheduleObj.getResourcesByIndex(Number(cell.getAttribute("data-group-index"))).groupData.RoomId;

            events.forEach(event => {

                if (event.RoomId === cellRoomId) {

                    projectEvents.push(event);

                }

            });

            cell.innerHTML = '';

            if (projectEvents.length > 0) {

                const circleDiv = document.createElement('div');

                circleDiv.classList.add('event-circle');

                cell.appendChild(circleDiv);

            }

        });

    }

</script>

<style>

    .event-circle {

        width: 15px;

        height: 15px;

        background-color: red;

        border-radius: 50%;

        margin: auto;

    }

</style>

Output Screenshots:

For further reference, please find the attached sample project in the zip file.

Let us know if you need any further assistance.

Regards,

Swathi

Attachment: mvcschedulerhighlighteventcellsinparentresource_17428cd1.zip