Scheduler resource cell range

[João Pereira]

Hi all,

Can you tell me if there is any solution to accomplish the following scenario?

I Have a list of orders that I need to plan but each order has a reference start and end dates, so I want to mark that period for each order painting the scheduler cells in a different color. So the user knows that he should only plan work in the designated period of time.

[Swathi Ravi]

Hi Joao,

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

Api: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_CellTemplate

UG: https://blazor.syncfusion.com/documentation/scheduler/cell-customization#customizing-cells-using-celltemplate

Demo: https://blazor.syncfusion.com/demos/scheduler/cell-template?theme=fluent

[index.razor]

<SfSchedule @ref="ScheduleRef" TValue=AppointmentData>

    <ScheduleTemplates>

        <CellTemplate>

            @{

                var data = (context as TemplateContext);

                ResourceData resourceData = (ResourceData)ScheduleRef.GetResourceByIndex((int)data.GroupIndex).ResourceData;

                List<DateTime> monthsInRange = new List<DateTime>();

                DateTime currentDate = resourceData.StartDate;

                while (currentDate <= resourceData.EndDate)

                {

                    monthsInRange.Add(currentDate);

                    currentDate = currentDate.AddMonths(1);

                }

                DateTime dateCheck = data.Date;

                bool containsDate = monthsInRange.Contains(dateCheck);

                if (containsDate)

                {

                    <div class="templatewrap" style="width:100%; height:100%; background:grey"></div>

                }

            }

        </CellTemplate>

    </ScheduleTemplates>

</SfSchedule>

@code {

    SfSchedule<AppointmentData> ScheduleRef;

    public string[] Resources { get; set; } = { "Owners" };

    public List<ResourceData> OwnersData { get; set; } = new List<ResourceData>

    {

        new ResourceData{ OwnerText = "Nancy", Id = 1, OwnerGroupId = 1, OwnerColor = "#ffaa00", StartDate=new DateTime(2023, 1, 1), EndDate=new DateTime(2023, 5, 1) },

        new ResourceData{ OwnerText = "Steven", Id = 2, OwnerGroupId = 2, OwnerColor = "#f8a398", StartDate=new DateTime(2023, 3, 1), EndDate=new DateTime(2023, 7, 1) },

        new ResourceData{ OwnerText = "Michael", Id = 3, OwnerGroupId = 1, OwnerColor = "#7499e1", StartDate=new DateTime(2023, 7, 1), EndDate=new DateTime(2023, 9, 1) }

    };

   

}

Output:

Regards,

Swathi Ravi

Attachment: blazorschedulecellcustomization_8452b58.zip

[João Pereira]

Hi Swathi, thank you for your feedback.

Your solution solved my issue.

Regards

[Satheesh Kumar Balasubramanian]

Joao,  We are happy that our solution solved your reported issue. Please get back to us, if you need any further assistance.