We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Integration with Angular

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

3 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team October 3, 2016 06:01 AM UTC

   
Thank you for contacting Syncfusion support.   
   
We have prepared the below sample for your requirements. Kindly find the below responses for your queries.   
   
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 



RO roberto October 3, 2016 05:41 PM UTC

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


KK Karthigeyan Krishnamurthi Syncfusion Team October 4, 2016 09:33 AM UTC

   
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. 
 
Regards, 
Karthigeyan 


Loader.
Up arrow icon