Refresh single event only on Scheduler compoment

[Pavel Iakovlev]

Hi,

Is there a way for a partial redrawing of SfScheduler component when only one event item changes. The idea is to avoid full redraw of SfScheduler when single item in DataSource has been changed.

Thank you! 

[Satheesh Kumar Balasubramanian]

Hi Pavel,

Thanks for using Syncfusion Products.

We have validated your reported query "Refresh single event only on Scheduler component" and suggest you to use RefreshEventsAsync method to refresh the appointments alone instead of refreshing the entire scheduler. Please find the documentation for your reference.

UG: https://blazor.syncfusion.com/documentation/scheduler/appointments#refresh-appointments

Kindly try the above link and let us know for further assistance.

Regards,

Satheesh Kumar B

[Maciej]

Hello

How to refresh a single appointment after changing color (CssClass)? Schedule.RefreshAsync() skips it.

Regards

Maciej

[Swathi Ravi]

Hi Maciej,

Thank you for contacting us!

After changing the CssClass, the RefreshEventsAsync properly updates the color of the appointment. Below is the demonstration. Please try it out and provide an update.

@using Syncfusion.Blazor.Schedule

<button @onclick="onButtonClick">Change CssClass</button>

<SfSchedule @ref="ScheduleRef" TValue="AppointmentData" Height="550px" CssClass="@cssClass" @bind-SelectedDate="@CurrentDate">

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

</SfSchedule>

@code{

    SfSchedule<AppointmentData> ScheduleRef;

    DateTime CurrentDate = new DateTime(2020, 1, 31);

    string cssClass = "custom-class";

    List<AppointmentData> DataSource = new List<AppointmentData>

    {

        new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2020, 1, 31, 9, 30, 0) , EndTime = new DateTime(2020, 1, 31, 11, 0, 0) }

    };

    public void onButtonClick() {

        cssClass = cssClass == "custom-class" ? "new-custom-class" : "custom-class";

        ScheduleRef.RefreshEventsAsync();

    }

}

<style>

    .custom-class.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment,

    .custom-class.e-schedule .e-vertical-view .e-day-wrapper .e-appointment,

    .custom-class.e-schedule .e-month-view .e-appointment {

        background: #32CD32;

    }

    .new-custom-class.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment,

    .new-custom-class.e-schedule .e-vertical-view .e-day-wrapper .e-appointment,

    .new-custom-class.e-schedule .e-month-view .e-appointment {

        background: red;

    }

</style>

Sample: https://blazorplayground.syncfusion.com/LXBeDMXxKanCZLIg

UG: https://blazor.syncfusion.com/documentation/scheduler/appointment-customization#using-cssclass

Regards,

Swathi