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

[Jan Maticka]

Hi,

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-allowDragAndDrop="false"

                 e-enableAppointmentResize="false"

                 e-locale="cs-CZ"

                 e-width="100%"

                 e-height="525px"

                 e-orientation="horizontal"

                 e-currentdate="vm.viewDate"

                 e-views="vm.views"

                 e-currentview="vm.calendarView"

                 e-group="vm.group"

                 e-appointmentEditSeriesButtonClicked ="vm.validateRide" - How to set custom function on the button??

                 e-appointmentWindowOpen="vm.editEvent"

                 e-appointmentClick="vm.editPopup"

                 e-appointmentRemoved="vm.onAppointmentRemoved"

                 e-cellClick="vm.editEvent"                 

                 e-timeMode="24"

                 e-appointmentsettings-datasource="vm.rides"

                 e-appointmentsettings-id="rideId"

                 e-appointmentsettings-resourcefields="vehicleId"

                 e-appointmentsettings-subject="subject"

                 e-appointmentsettings-starttime="startsAt"

                 e-appointmentsettings-endtime="endsAt"

                 e-appointmentsettings-description="description"

                 e-appointmentsettings-applytimeoffset="false"

                 e-appointmentsettings-allday="allDay"

                 e-appointmentsettings-recurrence="recurrence"

                 e-appointmentsettings-recurrencerule="recurrenceRule">

        <e-resources>

            <e-resource e-allowmultiple="false" e-field="vehicleId" e-title="Vehicle" e-name="Vehicles" e-resourcesettings="vm.vehicleResourcedata"></e-resource>

        </e-resources>

    </ej-schedule>

JS Angular controller:

(function () {

    "use strict";

    angular

        .module("app-rides")

        .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");

                $("div.e-editseries").removeClass("e-disable");

            } else {

                $("div.e-editseries").hide();

            }

            $("div.e-editevent").text("editovat jízdu");

            $("#RidesSchedule_quickAppDetailswindow").find(".e-rightfields").hide();

        }

        //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) {

                        //success

                        var msg = "Jízda s čislem " + response.data.rideId + " byla upravena.";

                        $location.path("/", msg).search({ msg: msg });

                    },

                    function(error) {

                        //failure

                        vm.errorMessage = "Failed to save changes in ride nr." + vm.ride.rideId + ": " + error;

                    });

        }

})();

Attachment: QuickWindow_877aca51.rar

[Karthigeyan Krishnamurthi]

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. 

http://jsplayground.syncfusion.com/tw2i0vpf 

 

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. 

 

<Code> 

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') 

        } 

</Code> 

 

Note: Above customization will not apply for recurrence appointment as it may affect the default behavior.  

 

Regards, 

Karthigeyan 

[Jan Maticka]

Good Morning Karthigeyan,

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

Kind regards

Jan 

[Karthigeyan Krishnamurthi]

Hi Jan,   

 

We are happy that our solution has fulfilled your requirement. 

 

Please let us know if you need further assistance. 

 

Regards, 

Karthigeyan