Customize the Events Dynamically Before it Renders on UI

17 Feb 20226 minutes to read

The eventRendered event will be triggered before rendering the appointments on Schedule where it can be customized. In the below demo, custom field CategoryColor is added to the appointment collection and based on certain condition, appointment background color is changed with CategoryColor field value.

CSHTML

@using Syncfusion.EJ2.Schedule

<div>
    @Html.EJS().Button("btn1").Content("ADD").Render()
    @Html.EJS().Button("btn2").Content("EDIT").Render()
    @Html.EJS().Button("btn3").Content("DELETE").Render()
</div>
<div>
    @(Html.EJS().Schedule("schedule")
        .Width("100%")
        .Height("550px")
        .EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
        .SelectedDate(new DateTime(2018, 2, 15))
        .Render()
    )
</div>

<script type="text/javascript">
    document.getElementById('btn1').onclick = function () {
        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
        var Data = [{
            Id: 1,
            Subject: 'Conference',
            StartTime: new Date(2018, 1, 12, 9, 0),
            EndTime: new Date(2018, 1, 12, 10, 0),
            IsAllDay: false
        }, {
            Id: 2,
            Subject: 'Meeting',
            StartTime: new Date(2018, 1, 15, 10, 0),
            EndTime: new Date(2018, 1, 15, 11, 30),
            IsAllDay: false
        }];
        scheduleObj.addEvent(Data);
        document.getElementById('btn1').setAttribute('disabled', 'true');
    };
    document.getElementById('btn2').onclick = function () {
        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
        var Data = {
            Id: 3,
            Subject: 'Testing-edited',
            StartTime: new Date(2018, 1, 11, 10, 0),
            EndTime: new Date(2018, 1, 11, 11, 0),
            IsAllDay: false
        };
        scheduleObj.saveEvent(Data);
        document.getElementById('btn2').setAttribute('disabled', 'true');
    };
    document.getElementById('btn3').onclick = function () {
        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
        scheduleObj.deleteEvent(4);
        document.getElementById('btn3').setAttribute('disabled', 'true');
    };
</script>

Data.cs

public ActionResult Index()
{
    ViewBag.datasource = GetScheduleData();
    return View();
}
public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    {
        Id = 3,
        Subject = "Testing",
        StartTime = new DateTime(2018, 2, 11, 9, 0, 0),
        EndTime = new DateTime(2018, 2, 11, 10, 0, 0),
        IsAllDay = false,
    });
    appData.Add(new AppointmentData
    {
        Id = 4,
        Subject = "Vacation",
        StartTime = new DateTime(2018, 2, 13, 9, 0, 0),
        EndTime = new DateTime(2018, 2, 13, 10, 0, 0),
        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; }
}