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

AngularJS how to put custom event and enable the edit series button in Quick Window on appointment


I would like to enable the edit series button and trigger the custom function on it in the Quick window (according to screen in attachments). Could you please help me with this issue?

HTML code of schedule:

<ej-schedule id="RidesSchedule"
                 e-appointmentEditSeriesButtonClicked ="vm.validateRide" - How to set custom function on the button??
            <e-resource e-allowmultiple="false" e-field="vehicleId" e-title="Vehicle" e-name="Vehicles" e-resourcesettings="vm.vehicleResourcedata"></e-resource>

JS Angular controller:

(function () {

    "use strict";
        .controller("calendarController", calendarController);

    function calendarController($http) {

        var vm = this;

        vm.editPopup = function (args) {
            if (args.appointment.rideState == 1) { //enable and set text on edit series button
                $("div.e-editseries").text("schválit jízdu");
            } else {
            $("div.e-editevent").text("editovat jízdu");

        //function to be triggered after click on edit series button
        vm.validateRide = function(args) {
            $http.put("api/rides/" + args.appointment.rideId, 2)
                .then(function(response) {
                        var msg = "Jízda s čislem " + response.data.rideId + " byla upravena.";
                        $location.path("/", msg).search({ msg: msg });
                    function(error) {
                        vm.errorMessage = "Failed to save changes in ride nr." + vm.ride.rideId + ": " + error;


Attachment: QuickWindow_877aca51.rar

3 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team March 2, 2017 01:52 PM UTC

Hi Jan, 
Thank you for contacting Syncfusion support. 
We have prepared the sample to add custom button in quick window (only for non-recurrence appointment) which can be viewed from the below link. 
In the sample, we have replaced custom button with the default disabled edit series button for non-recurrence appointment and when the custom button is clicked an alert window will appear. Kindly refer the below code example used in the sample. 
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 
                     if (!args.appointment.Recurrence) { 
                         $(".e-editseries").css("display", "none"); 
                         $(".customfields1").css("display", "block"); 
                         if ($(".customfields1").length == 0) { 
                             var customDesign1 = "<a><div class='customfields1' style='float:right; width:88px;cursor:pointer' onclick='customFunction()'>CustomField</div></a>"; 
                             $(".e-editevent").after(customDesign1); // here we are adding the custom fields in quick window 
                     else { 
                         $(".e-editseries").css("display", "block"); 
                         $(".customfields1").css("display", "none"); 
function customFunction() { //this function will be called when the custom btn is clicked 
            alert('Custom field is clicked') 
Note: Above customization will not apply for recurrence appointment as it may affect the default behavior.  

JM Jan Maticka March 3, 2017 08:45 AM UTC

Good Morning Karthigeyan,

It works, but I had to modify it a little bit. It shows the way how to do it.

Kind regards


KK Karthigeyan Krishnamurthi Syncfusion Team March 6, 2017 04:23 AM UTC

Hi Jan,   
We are happy that our solution has fulfilled your requirement. 
Please let us know if you need further assistance. 

Live Chat Icon For mobile
Up arrow icon