We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Event count


Is it possible to show the number of events for a particular time with different styling depending on the number?



3 Replies

SR Swathi Ravi Syncfusion Team May 1, 2023 11:43 AM UTC

Hi Alex,

We require more details about your requirement to validate your query at our end. Please share the below details to proceed further.

  • Details of your requirement clearly or
  • What type of styling you want? Or share any images that demonstrates your requirement.
  • What you mean by (different styling depending on number) in your query?


Swathi Ravi

AL Alex May 3, 2023 08:44 AM UTC

Hi, can you not see the attached image in my original question?  As this shows the styling required.  In terms of different styling we were thinking if below a certain number of events (1 -3 background colour be green, 4- 6, background colour would be amber, over 6 background colour would be red.



SR Swathi Ravi Syncfusion Team May 5, 2023 10:02 AM UTC


You can achieve your requirement by using the Schedule’s MajorSlotTemple, as shown in the below shared snippet.


@using System.Globalization



    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>

    <ScheduleTimeScale Interval="60" SlotCount="4">


            <div>@(majorSlotTemplate((context as TemplateContext).Date))</div>

            <div class="@($"{(Totalevents <= 3 ? "total-event1" : "total-event2")}")"><span class="span-class" style="margin-left: 15px;">@Totalevents</span></div>




@code {

   public int Totalevents;

    public List<AppointmentData> filteredData;

    public string majorSlotTemplate(DateTime date)


        filteredData = DataSource.Where(a => a.StartTime == date).ToList();

        Totalevents = filteredData.Count;

        return date.ToString("hh", CultureInfo.InvariantCulture);





    .total-event1 {

        background-color: #90ee90;

        border: 1px solid #ffffff;



    .total-event2 {

        background-color: #6495ed;

        border: 1px solid #ffffff;



Output image:


Attachment: blazorschedulereventcount_515da33f.zip

Live Chat Icon For mobile
Up arrow icon