Refresh data in scheduler

[Smisha Alias]

Hi,

Is there anyway i can Refresh the data in Scheduler without calling RefreshEvents() after performing some functionalities like cancel, delete..etc

Thanks Regards,

 Smisha Alias

[Nevitha Ravi]

Hi Smisha, 

Greetings from Syncfusion Support. 

We have validated your query and let you know that to refresh the data either you can use RefreshEvents method or reassign DataSource to the scheduler. Please share your use case scenario like purpose of refreshing events on cancel or delete actions to provide you the prompt solution. 

Regards, 

Nevitha 

[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