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.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

129153 Mar 1,2017 01:45 AM Mar 5,2017 11:23 PM JavaScript 3
loading
Tags: ejSchedule
Jan Maticka
Asked On March 1, 2017 01:45 AM

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 [Syncfusion]
Replied On March 2, 2017 08:52 AM

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. 
 
<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
Replied On March 3, 2017 03:45 AM

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 [Syncfusion]
Replied On March 5, 2017 11:23 PM

Hi Jan,   
 
We are happy that our solution has fulfilled your requirement. 
 
Please let us know if you need further assistance. 
 
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.

;