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.
Unfortunately, activation email could not send to your email. Please try again.

Integration with Angular

Thread ID:

Created:

Updated:

Platform:

Replies:

126218 Oct 1,2016 12:06 PM Oct 4,2016 05:33 AM JavaScript 3
loading
Tags: ejSchedule
roberto
Asked On October 1, 2016 12:06 PM

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 [Syncfusion]
Replied On October 3, 2016 02:01 AM

   
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 


roberto
Replied On October 3, 2016 01:41 PM

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 [Syncfusion]
Replied On October 4, 2016 05:33 AM

   
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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;