Integration with Angular

[roberto]

Hi.

I'm using ejScheduler and have been trying integrating with Angular, facing the below issues:

How can be manage the loadondemand event through Angular?

How the appointment click managed by Angular controller?

I really appreciaty any help on this.

Regards

[Karthigeyan Krishnamurthi]

Hi Roberto,   

   

Thank you for contacting Syncfusion support.   

   

We have prepared the below sample for your requirements. Kindly find the below responses for your queries.   

http://www.syncfusion.com/downloads/support/forum/126218/ze/Sample1414331677   

   

Query1: Load on demand in Angular sample.   

   

In the above sample we had enabled load on demand feature in angular sample. Kindly find the below code example used in a sample.   

 

<Code> 

<ej-schedule style="float: left" id="Schedule1" e-appointmentsettings-datasource="appointments" e-appointmentsettings-id="Id" e-appointmentsettings-subject="Subject" e-appointmentsettings-starttime="StartTime" e-appointmentsettings-endtime="EndTime" e-appointmentsettings-description="Description" e-appointmentsettings-allday="AllDay" e-appointmentsettings-recurrence="Recurrence" e-appointmentsettings-recurrencerule="RecurrenceRule" e-appointmentsettings-starttimezone="StartTimeZone" e-appointmentsettings-endtimezone="EndTimeZone" e-width="100%" e-height="525px" e-enableloadondemand="true" e-appointmentclick="OnAppointmentClick" e-timezone="UTC +02:00" e-currentview="drpvalue" e-currentdate="setDate"> 

</ej-schedule> 

</Code> 

Query2: Regarding appointment click.   

  

When an appointment is clicked e-appointmentclick event will be raised. In that event function, ajax post can be used to call the controller function. Kindly find the below code example used in the above sample.   

 

<Code> 

function OnAppointmentClick(args) { // this function will be called when the app is clicked 

            // Here you can use ajax post to call the controller function 

            //args.appointment - Clicked app detail is retrieved 

            //args.type - Event name 

        } 

</Code> 

Regards, 

Karthigeyan 

[roberto]

Thanks, I'll review it.

But I was thinking if is possible to load the appointemtns without the datamanager using simple angular, also redirecting the appointment click to an angular controller function.

Regards

[Karthigeyan Krishnamurthi]

Hi Roberto,     

   

Thanks for your update.   

   

Yes, it is possible to load an appointments using datamanager only if an appointments are not retrieved from the data base as shown below. Appointment click can be redirected to an angular controller function by defining the e-appointmentclick event function within the scope as shown below.   

 

<Code> 

var data = [ 

                     { "Id": 1, "Subject": "Meeting", "StartTime": new Date(2014, 4, 1, 4), "EndTime": new Date(2014, 4, 1, 6), "AllDay": false, "Recurrence": false }, 

                     { "Id": 2, "Subject": "Testing", "StartTime": new Date(2014, 4, 2, 4), "EndTime": new Date(2014, 4, 2, 6), "AllDay": false, "Recurrence": false }, 

                     { "Id": 3, "Subject": "Review", "StartTime": new Date(2014, 4, 2, 2), "EndTime": new Date(2014, 4, 2, 3), "AllDay": false, "Recurrence": false }, 

                     { "Id": 4, "Subject": "Conference", "StartTime": new Date(2014, 4, 3, 4), "EndTime": new Date(2014, 4, 3, 6), "AllDay": false, "Recurrence": false }, 

                     { "Id": 5, "Subject": "Deployment", "StartTime": new Date(2014, 4, 3, 1), "EndTime": new Date(2014, 4, 3, 3), "AllDay": false, "Recurrence": false } 

 

        ]; 

        angular.module('syncApp', ['ejangular']) 

             .controller('ScheduleCtrl', function ($scope) { 

                 $scope.appointments = data; 

                 $scope.setDate = new Date(2014, 4, 5); 

                 $scope.drpvalue = "week"; 

                 $scope.OnAppointmentClick= function(args) { // this function will be called when the app is clicked 

                     // Here you can use ajax post to call the controller function 

                     //args.appointment - Clicked app detail is retrieved 

                     //args.type - Event name 

                 } 

             }); 

</Code> 

 

Kindly visit the below AngularJS Scheduler sample link. 

Sample Link: http://ngjq.syncfusion.com/#/schedule/default 

 

Regards, 

Karthigeyan