@page "/Syncfusion" 
@using Syncfusion.Blazor.Schedule

<SfSchedule TValue="AppointmentData" @ref="@ScheduleRef" Width="100%" Height="550px" @bind-SelectedDate="@CurrentDate">
    <ScheduleEvents TValue="AppointmentData" OnEventClick="OnEventClick"></ScheduleEvents>
    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
    <ScheduleViews>
        <ScheduleView Option="View.Day">
            <EventTemplate>
                <div class="">
                    @{
                    var data = context as AppointmentData;
                    }
                    @(data.Subject)<br />
                    @(data.StartTime) - @(data.EndTime)
                    <span @onclick="@(async () => await OnClick())">Click me</span>
                </div>
            </EventTemplate>
        </ScheduleView>
        <ScheduleView Option="View.Agenda">
            <EventTemplate>
                <div class="">
                    @{
                    var data = context as AppointmentData;
                    }
                    @(data.Subject)<br />
                    @(data.StartTime) - @(data.EndTime)
                                   <span @onclick="@(async () => await OnClick())">Click me</span>
                </div>
            </EventTemplate>
        </ScheduleView>
    </ScheduleViews>
    <ScheduleEvents TValue="AppointmentData" OnEventClick="OnEventClick1" />
</SfSchedule>

<div>
    @((MarkupString)text)
</div>

@code{
    string text="";

    DateTime CurrentDate = new DateTime(2020, 3, 10);
    SfSchedule<AppointmentData> ScheduleRef;
    public async Task OnEventClick(EventClickArgs<AppointmentData> args)
    {
        args.Cancel = true;
        await ScheduleRef.OpenEditorAsync(args.Event, CurrentAction.Save);   //To open the editor on event click
    }
    List<AppointmentData> DataSource = new List<AppointmentData>
    {
        new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2020, 3, 10, 9, 30, 0) , EndTime = new DateTime(2020, 3, 10, 12, 0, 0) }
    };
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public Nullable<int> RecurrenceID { get; set; }
    }

    public async Task OnClick() {
        await Task.Delay(0);
        text += "OnClick<br/>";
    }

    public async Task OnEventClick1(Syncfusion.Blazor.Schedule.EventClickArgs<AppointmentData> args) {
        await Task.Delay(0);
        text += "OnEventClick<br/>";
    }
}

