Programmatically Refresh Layout in ASP.NET MVC Scheduler

The Scheduler allows you to refresh its layout manually without re-rendering the entire DOM element by using the refreshLayout public method. The following example demonstrates how to call the refreshLayout method on demand.

Use refreshLayout() when the Scheduler’s cell dimensions, scroll position, or template content appear out of sync with the rest of the page (for example, after the Scheduler is shown inside a hidden container, after a sidebar/panel resize, or after dynamic CSS changes). If you also need to reload the data source, use the refresh() method instead.

NOTE

The refreshLayout method only updates the layout; it does not reload the event data from the server.

@using Syncfusion.EJ2.Schedule

<div>
    @Html.EJS().Button("btn1").Content("Refresh Layout").Render()
</div>
<div>
    @(Html.EJS().Schedule("schedule")
        .Width("100%")
        .Height("550px")
        .EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
        .SelectedDate(new DateTime(2021, 10, 15))
        .Render()
    )
</div>

<script type="text/javascript">
    document.getElementById('btn1').onclick = function () {
        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
        scheduleObj.refreshLayout();
    };
</script>
public ActionResult Index()
{
    ViewBag.datasource = GetScheduleData();
    return View();
}
public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    {
        Id = 1,
        Subject = "Conference",
        StartTime = new Date(2021, 10, 16, 10, 0),
        EndTime = new Date(2021, 10, 16, 12, 0),
        IsAllDay = false
    });
    appData.Add(new AppointmentData
    {
        Id = 2,
        Subject = "Meeting",
        StartTime = new Date(2021, 10, 18, 10, 0),
        EndTime = new Date(2021, 10, 18, 12, 30),
        IsAllDay = false
    });
    return appData;
}
public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
    public bool IsAllDay { get; set; }
}

See Also