Event count

[Alex]

Hi,

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

Thanks,

Alex

[Swathi Ravi]

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?

Regards,

Swathi Ravi

[Alex]

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.

Thanks,

Alex

[Swathi Ravi]

Alex,

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

[index.razor]

@using System.Globalization

 

<SfSchedule>

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

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

        <MajorSlotTemplate>

            <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>

        </MajorSlotTemplate>

    </ScheduleTimeScale>

</SfSchedule>

@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);

    }

}

 

<style>

    .total-event1 {

        background-color: #90ee90;

        border: 1px solid #ffffff;

    }

 

    .total-event2 {

        background-color: #6495ed;

        border: 1px solid #ffffff;

    }

</style>

Output image:

Attachment: blazorschedulereventcount_515da33f.zip