Scheduler Heatmap

[Alex]

Hi,

Is it possible to do this https://www.syncfusion.com/blogs/post/designing-a-heat-map-calendar-using-winui-scheduler using the Blazor scheduler control?

Thanks,

Alex

[Ram Raju Elaiyaperumal]

Ticket Link: https://forumassist.syncfusion.com/188628

Status: waiting for customer

Review the Response

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

Hi Alex,

To meet your requirement of displaying the scheduler as a Heatmap calendar, you can leverage the RenderCell event. This event is triggered each time a cell is rendered, allowing you to assign different colors to each cell, thereby creating a Heatmap-like display.

For your convenience, we have prepared a sample that applies colors to each date randomly. You can modify this sample to suit your specific needs.

Please find the attached sample for your reference. We hope this solution meets your requirements. If you have any further queries or need additional assistance, please don't hesitate to ask.

Regards,

Ram

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 

Attachment: HeatmapCalendar_8ed39a61.zip

[Alex]

Hi, thanks for the reply.

We're looking for something we could apply to a TimelineDay view, so when we have a lot of bookings for a particular time the whole column would change colour based on the number of bookings.

[Swathi Ravi]

Hi Alex,

You can use the below shared styles for the TimelineDay view and in the OnRenderCell method check the ElementType as Workcells and ResourceGroupCells to achieve your requirement.

<style>

    .e-schedule .e-timeline-view .e-work-cells.dark-green-class {

        background-color: darkgreen;

    }

    .e-schedule .e-timeline-view .e-work-cells.medium-dark-green-class {

        background-color: #2da242; /* Darker green */

    }

    .e-schedule .e-timeline-view .e-work-cells.light-green-class {

        background-color: lightgreen;

    }

    .e-schedule .e-timeline-view .e-work-cells.very-light-green-class {

        background-color: #9de101ad; /* Lighter green */

    }

    .e-schedule .e-timeline-view .e-work-cells.very-light-green-class {

        background-color: #9de101ad; /* Lighter green */

    }

</style>

public void OnRenderCell(RenderCellEventArgs args)

{

    if (args.ElementType == ElementType.WorkCells || args.ElementType == ElementType.ResourceGroupCells)

    {

        // Apply a random CSS class

        int index = random.Next(GreenClasses.Length);

        args.CssClasses = new List<string> { GreenClasses[index] };

    }

}

Sample: Attached as a zip file.

Output:

Regards,

Swathi Ravi

Attachment: BlazorSchedulerHeatmap_fd9de2dd.zip