How to add and handle events

[Tommy Klausen]

Hi!

Can you show or tell me where I can find some more information on how to add and handle events for the schedule in an asp .net mvc web application?

Tommy

[Velmurugan S]

Hi Tommy,

Thanks for contacting Syncfusion support.

You can refer to the following sample, class reference, and API reference links to know more about adding and handling events for the schedule in an asp .net mvc web application.

Sample link: https://mvc.syncfusion.com/demos/web/schedule/events

Class Reference link:

http://help.syncfusion.com/cr/cref_files/aspnetmvc/ejmvc/Syncfusion.EJ~Syncfusion.JavaScript.ScheduleClientSideEventsBuilder_members.html

API reference link:

https://help.syncfusion.com/api/js/ejschedule#events

Note: To know more about the client-side events argument details, please refer to the above JS link. The argument details will be the same for the EJMVC Platform Schedule control.

Regards,
Velmurugan

[Tommy Klausen]

Hi.

Can you take a look at the attached index file and se if I`ve understood this right?

Tommy

Attachment: Index_618923d1.7z

[Karthigeyan Krishnamurthi]

Hi Tommy,

Thanks for your update.

We have prepared the following JS Playground link by modifying the attached code example.
JS Playground Link:
https://jsplayground.syncfusion.com/qd3ktqcc

In the above sample when the appointment is edited we have enabled the alert window by displaying the edited appointment’s subject, start time and end time. We request you to visit the below User Guide link in order to know more about the events and the arguments returned from the events.
API Reference Link:
https://help.syncfusion.com/api/js/ejschedule#events:appointmentedited

Note: The argument details will be the same for the EJMVC Platform Schedule control.

Kindly see the following code example that we have used in the above sample.
<Code>

<script type="text/javascript">

            $(function () {

                var dManager = ej.DataManager(window.Default).executeLocal(ej.Query().take(10));

                $("#Schedule1").ejSchedule({

                    width: "100%",

                    height: "525px",

                    currentDate: new Date(2014, 4, 5),

                    appointmentSettings: {

                        dataSource: dManager,

                        id: "Id",

                        subject: "Subject",

                        startTime: "StartTime",

                        endTime: "EndTime",

                        description: "Description",

                        allDay: "AllDay",

                        recurrence: "Recurrence",

                        recurrenceRule: "RecurrenceRule"

                    },

                    appointmentEdited: "OnAppointmentEdited" // This event will raise only when the appointment is edited through edit appointment window

                });

            });

            function OnAppointmentEdited(args) {

                //args.appointment- returns the appointments being edited

                //args.type- returns the name of the event

                var appointment = args.appointment;

                alert("Subject: " + appointment.Subject + "StartTime: " + appointment.StartTime + "EndTime: " + appointment.EndTime);

            }
        </script>
</Code>

Regards,
Karthigeyan

[Tommy Klausen]

Hi.

Thank you for your answer.

Can you tell me where this code should go?

I`m also using a shared layout file where some of the links and script references are allready included in the file.

And in my example, how can I use the datasource instead of the datamanager. I use a different source than the example you provided. 

Tommy

[Tommy Klausen]

And I can`t seem to find these to files in my syncfusion folder

 <script src="13.3.0.18/scripts/web/properties.js" type="text/javascript"></script>

    <script src="13.3.0.7/scripts/web/jsonscheduledata.js" type="text/javascript"></script>

Tommy

[Tommy Klausen]

Hi.

I have managed to render the schedual now.

But I still need a couple of things done.

1. I need to pick up the data from my model as I did in the file I sent you.

2. In your example I loose the main menu in the top of the page. How is that rendered?

Tommy

[Karthigeyan Krishnamurthi]

Hi Tommy,

We have prepared the sample for your requirement “Event sample for scheduler” which can be downloaded from the following location,
https://www.syncfusion.com/downloads/support/forum/121388/ze/EventColumnSample119211995

In the above sample when the appointment is edited AppointmentEdited event will raise. In that  event function we have enabled the alert window by displaying the edited appointment’s subject, start time and end time. We have retrieved the appointments from Model and rendered in the schedule control. In the previous update we have provided the online hosted JS sample in which the below CDN links were used in the sample. These CDN links will not be available in Syncfusion folders.
<Code>
<script src="13.3.0.18/scripts/web/properties.js" type="text/javascript"></script>
<script src="13.3.0.7/scripts/web/jsonscheduledata.js" type="text/javascript"></script>
</Code>

In the above sample we have referred the script files from the folder Scripts and CSS files from the folder Content. Kindly refer the below image.


Once you have installed Essential studio in your machine, necessary script and css files will be available under the following location,
CSS file location:
(installed location)\Syncfusion\Essential Studio\xxxxx\JavaScript\assets\css
Script location:
(installed location)\ Syncfusion\Essential Studio\xxxxx\JavaScript\assets\external

Apart from the above dependent scripts, you need to refer the ej.web.all.min.js file, which contains all the JavaScript components script in a minified format. Copy the ej.web.all.min.js file into the Scripts\ej folder.

Minified web file location:

(installed location)\ Syncfusion\Essential Studio\xxxxxx\JavaScript\assets\scripts\web
Note: xxxx denotes the build version installed in your local machine.

We request you to visit the below link in order to know more about the dependent script and css files location.
https://help.syncfusion.com/aspnetmvc/dependencies#stylesheets

We are unclear about your requirement “In your example I lose the main menu in the top of the page. How is that rendered?”. We request you to provide more information regarding this requirement in order to proceed further.

Regards,
Karthigeyan