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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Integration with Angular

Thread ID:





126218 Oct 1,2016 04:06 PM UTC Oct 4,2016 09:33 AM UTC JavaScript 3
Tags: ejSchedule
Asked On October 1, 2016 04:06 PM UTC


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.


Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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.   
<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"> 

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.   
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 


Replied On 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.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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.   
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 
Kindly visit the below AngularJS Scheduler sample link. 


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.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon 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.Close Icon