aspnet-mvc-ej1-demos/Views/Schedule/Events.cshtml

@section MetaTags{
    <meta name="description" content="This example shows the client-side events that trigger on specific actions in the ASP.NET MVC Scheduler.">
}
@section SampleHeading{
    <span class="sampleName">Schedule-Events-ASP.NET MVC-SYNCFUSION</span>}
@section ControlsSection{
    @(Html.EJ().Schedule("Schedule1")
        .Width("100%")
        .Height("525px")
        .CurrentDate(new DateTime(2017,6,5))
        .AppointmentSettings(fields => fields.Datasource((IEnumerable)ViewBag.datasource)
            .Id("Id")
            .Subject("Subject")
            .StartTime("StartTime")
            .EndTime("EndTime")
            .Description("Description")
            .AllDay("AllDay")
            .Recurrence("Recurrence")
            .RecurrenceRule("RecurrenceRule"))
        .ScheduleClientSideEvents(evt=>
            evt.Create("onCreate")
            .CellClick("onCellClick")
            .AppointmentClick("onAppointmentClick")
            .CellDoubleClick("onCellDoubleClick")
            .AppointmentWindowOpen("onAppointmentWindowOpen")
            .BeforeAppointmentCreate("onBeforeAppointmentCreate")
            .BeforeAppointmentChange("onBeforeAppointmentChange")
            .BeforeAppointmentRemove("onBeforeAppointmentRemove")
            .AppointmentChanged("onAppointmentChanged")
            .AppointmentCreated("onAppointmentCreated")
            .AppointmentRemoved("onAppointmentRemoved")
            .Navigation("onNavigation")
            .ResizeStart("onResizeStart")
            .ResizeStop("onResizeStop")
            .DragStart("onDragStart")
            .DragStop("onDragStop"))
        )
}
@section EventsDropDown{
    <div id="events">
        <ul>
            <li value="create">Create</li>
            <li value="cellClick">Cell Click</li>
            <li value="appointmentClick">App Click</li>
            <li value="cellDoubleClick">Double Click</li>
            <li value="appointmentWindowOpen">Window Open</li>
            <li value="beforeAppointmentCreate">App Save</li>
            <li value="beforeAppointmentChange">App Edit</li>
            <li value="beforeAppointmentRemove">App Delete</li>
            <li value="appointmentCreated">App Created</li>
            <li value="appointmentChanged">App Changed</li>
            <li value="appointmentRemoved">App Removed</li>
            <li value="navigation">Navigation</li>
            <li value="resizeStart">Resize Start</li>
            <li value="resizeStop">Resize Stop</li>
            <li value="dragStart">Drag Start</li>
            <li value="dragStop">Drag Stop</li>
        </ul>
    </div>
     @(Html.EJ().DropDownList("selectControls_input")
          .TargetID("events")
          .ClientSideEvents(eve => { eve.Change("evtpropscheckedevent").PopupShown("adjustpopupposition");})
          .ShowCheckbox(true)
          .CheckAll(true)
          )
    }
@section ScriptSection{
    <script type="text/javascript">
        function evtpropscheckedevent(args) {
            var scheObj = $("#Schedule1").data("ejSchedule");
            if (args.isChecked && scheObj != undefined) {
                switch (args.value) {
                    case "create": scheObj.option(args.value, "onCreate"); break;
                    case "cellClick": scheObj.option(args.value, "onCellClick"); break;
                    case "appointmentClick": scheObj.option(args.value, "onAppointmentClick"); break;
                    case "cellDoubleClick": scheObj.option(args.value, "onCellDoubleClick"); break;
                    case "appointmentWindowOpen": scheObj.option(args.value, "onAppointmentWindowOpen"); break;
                    case "beforeAppointmentCreate": scheObj.option(args.value, "onBeforeAppointmentCreate"); break;
                    case "beforeAppointmentChange": scheObj.option(args.value, "onBeforeAppointmentChange"); break;
                    case "beforeAppointmentRemove": scheObj.option(args.value, "onBeforeAppointmentRemove"); break;
                    case "appointmentCreated": scheObj.option(args.value, "onAppointmentCreated"); break;
                    case "appointmentChanged": scheObj.option(args.value, "onAppointmentChanged"); break;
                    case "appointmentRemoved": scheObj.option(args.value, "onAppointmentRemoved"); break;
                    case "navigation": scheObj.option(args.value, "onNavigation"); break;
                    case "resizeStart": scheObj.option(args.value, "onResizeStart"); break;
                    case "resizeStop": scheObj.option(args.value, "onResizeStop"); break;
                    case "dragStart": scheObj.option(args.value, "onDragStart"); break;
                    case "dragStop": scheObj.option(args.value, "onDragStop"); break;
                }
            }
            else scheObj.option(args.value, null);
        }
        function onCellClick() {
            jQuery.addEventLog("Cell has been <span class='eventTitle'>Clicked.</span>");
        }
        function onCreate() {
            jQuery.addEventLog("Schedule has been <span class='eventTitle'>Created.</span>");
        }
        function onAppointmentClick() {
            jQuery.addEventLog("Appointment has been <span class='eventTitle'>Clicked.</span>");
        }
        function onCellDoubleClick() {
            jQuery.addEventLog("<span class='eventTitle'>Double Clicked</span> the cells");
        }
        function onAppointmentWindowOpen() {
            jQuery.addEventLog("Appointment window has been <span class='eventTitle'>Opened.</span>");
        }
        function onBeforeAppointmentCreate() {
            jQuery.addEventLog("Appointment window opened to <span class='eventTitle'>Save.</span>");
        }
        function onBeforeAppointmentChange() {
            jQuery.addEventLog("Appointment opened for <span class='eventTitle'>Edit.</span>");
        }
        function onBeforeAppointmentRemove() {
            jQuery.addEventLog("Appointment opened for <span class='eventTitle'>Delete.</span>");
        }
        function onAppointmentCreated() {
            jQuery.addEventLog("Appointment has been <span class='eventTitle'>Created.</span>");
        }
        function onAppointmentChanged() {
            jQuery.addEventLog("Appointment has been <span class='eventTitle'>Updated.</span>");
        }
        function onAppointmentRemoved() {
            jQuery.addEventLog("Appointment has been <span class='eventTitle'>Deleted.</span>");
        }
        function onNavigation() {
            jQuery.addEventLog("Changed the <span class='eventTitle'>Date / View </span>");
        }
        function onResizeStart() {
            jQuery.addEventLog("Appointment <span class='eventTitle'>Resize Started </span>");
        }
        function onResizeStop() {
            jQuery.addEventLog("Appointment <span class='eventTitle'>Resize Stopped </span>");
        }
        function onDragStart() {
            jQuery.addEventLog("Appointment <span class='eventTitle'>Drag Started </span>");
        }
        function onDragStop() {
            jQuery.addEventLog("Appointment <span class='eventTitle'>Drag Stopped </span>");
        }
        function onClear() {
            jQuery.clearEventLog();
        }
    </script>
}