Open appointment window in javascript

[Fanisa]

Hi,

I want to open an appointment window and all I have is an appointment ID. I there a way to simulate "onAppointmentWindowOpen" event and pass an Id??

[Karthigeyan Krishnamurthi]

Hi Fanisa, 

 

Thank you for contacting Syncfusion support. 

 

We have prepared the sample to open an appointment window based on the known appointment Id value and the sample can be download from the below location: 

http://www.syncfusion.com/downloads/support/forum/125939/ze/Sample894875885 

 

In the above sample when the button is clicked appWindow function will be called where an appointment is filtered based on the known Id value. Once an appointment is filtered, appointment window can be opened programmatically using its Guid value as show in the below code example. 

<Code> 

function appWindow() { // function will be called when the button is clicked 

        var obj = $("#Schedule1").data("ejSchedule"); 

        var app = new ej.DataManager(obj._currentAppointmentData).executeLocal(new ej.Query().where("Id", ej.FilterOperators.equal, 1)); // filtering the appointment based on the known Id value 

        obj._showAppointmentDetails(app[0]["Guid"], true); // opening the app window with the filtered appointment Guid value. 

    } 

</Code> 

Regards, 

Karthigeyan 

[Bonnie White]

Hello,

The sample code below works great on the day and month view. But it does not work on the agenda view.

Could you please tell me how to open the appointment window so a new appointment can be created from the agenda view?

Thank you very much!

Bonnie

[Arulraj A]

Hi Bonnie,  

Yes, It’s possible to create a new appointment in agenda view through appointment window. We have prepared the sample with below highlighted code changes same can be downloaded from the below location. 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/125939/ze/openAppointmentWindow1233096457  

.cshtml 

@{ 

    ViewBag.Title = "ScheduleFeatures"; 

} 

<input type="button" name="button" value="Click Me" onclick="appWindow()" /> 

<input type="button" name="button1" value="Click Me to Add appointment" onclick="openWindow()" /> 

@(Html.EJ().Schedule("Schedule1") 

        .Width("100%") 

        .Height("525px") 

        .CurrentDate(new DateTime(2015, 11, 12)) 

           .AppointmentSettings(fields => fields.Datasource(ViewBag.datasource) 

            .Id("Id") 

            .Subject("Subject") 

            .StartTime("StartTime") 

            .StartTimeZone("StartTimeZone") 

            .EndTimeZone("EndTimeZone") 

            .EndTime("EndTime") 

            .Description("Description") 

            .AllDay("AllDay") 

            .Recurrence("Recurrence") 

            .RecurrenceRule("RecurrenceRule") 

            ) 

) 

<script> 

    function appWindow() { // function will be called when the button is clicked 

        var obj = $("#Schedule1").data("ejSchedule"); 

        var app = new ej.DataManager(obj._currentAppointmentData).executeLocal(new ej.Query().where("Id", ej.FilterOperators.equal, 1)); // filtering the appointment based on the known Id value 

        obj._showAppointmentDetails(app[0]["Guid"], true); // opening the app window with the filtered appointment Guid value. 

    } 

 

    function openWindow() { 

        var obj = $("#Schedule1").data("ejSchedule"); 

        obj._currentAction = 'add' 

        if (ej.isNullOrUndefined(obj._appointmentAddWindow)) 

            obj._renderAppointmentWindow(); 

         

        var start = new Date(obj.currentDate()); // start time of the appointment will be retrieved 

        var starthr = 30 * Math.round(start.getMinutes() / 30); // here we are rounding off the minutes 

        if (starthr == 60) { 

            start.setHours(start.getHours() + 1); // here we are incrementing the start hour when the minutes is equal to 60 

        } 

        start.setMinutes((Math.round(start.getMinutes() / 30) * 30) % 60); // here we are adding the round off start minutes to the appointment 

        var end = new Date(obj.currentDate().setMinutes(obj.currentDate().getMinutes() + 30)); 

        var endhr = 30 * Math.round(end.getMinutes() / 30); 

        if (endhr == 60) { 

            end.setHours(end.getHours() + 1); 

        } 

        end.setMinutes((Math.round(end.getMinutes() / 30) * 30) % 60); 

        obj._appointmentAddWindow.find("#" + obj._id + "startdate").ejDatePicker("option", "value", ej.format(start, obj._datepattern(), obj.model.locale)); 

        obj._appointmentAddWindow.find("#" + obj._id + "enddate").ejDatePicker("option", "value", ej.format(end, obj._datepattern(), obj.model.locale)); 

        obj._appointmentAddWindow.find("#" + obj._id + "starttime").ejTimePicker("option", "value", ej.format(start, obj._pattern.t, obj.model.locale)); 

        obj._appointmentAddWindow.find("#" + obj._id + "endtime").ejTimePicker("option", "value", ej.format(end, obj._pattern.t, obj.model.locale)); 

        var stZoneValue = (obj.model.timeZone == null) ? obj._timezoneStringValue() : obj.model.timeZone; 

       stZoneValue = stZoneValue.indexOf("UTC") != 0 ? "UTC " + stZoneValue : stZoneValue; 

        var edZoneValue = (obj.model.timeZone == null) ? obj._timezoneStringValue() : obj.model.timeZone; 

        edZoneValue = edZoneValue.indexOf("UTC") != 0 ? "UTC " + edZoneValue : edZoneValue; 

        var stvalue = obj._findResourceIndex(obj.model.timeZoneCollection.dataSource, obj.model.timeZoneCollection["value"], stZoneValue); 

        var edvalue = obj._findResourceIndex(obj.model.timeZoneCollection.dataSource, obj.model.timeZoneCollection["value"], edZoneValue); 

        obj._appointmentAddWindow.find("#" + obj._id + "startTimeZone").ejDropDownList("option", { text: obj.model.timeZoneCollection.dataSource[stvalue][obj.model.timeZoneCollection["text"]], value: obj.model.timeZoneCollection.dataSource[stvalue][obj.model.timeZoneCollection["value"]] }); 

        obj._appointmentAddWindow.find("#" + obj._id + "endTimeZone").ejDropDownList("option", { text: obj.model.timeZoneCollection.dataSource[edvalue][obj.model.timeZoneCollection["text"]], value: obj.model.timeZoneCollection.dataSource[edvalue][obj.model.timeZoneCollection["value"]] }); 

        obj._appointmentAddWindow.ejDialog("open"); 

    } 

 

</script>     

 

Please try with the above sample and let us know, if you need any further assistance on this. 

  

Regards, 

Arulraj A 

[Bonnie White]

Thank you! That works great!

Another question:

Where can I find a reference for schedule members like obj._appointmentAddWindow and obj._showAppointmentDetails?

I was looking in the javascript api reference but didn't see them: https://help.syncfusion.com/api/js/ejschedule#members.

That's why I started searching in google and found this post.

It would be great to know about all of the _* members of the scheduler, with examples that show how to use them, so can can make further customizations if necessary.

Thanks!

Bonnie

[Arulraj A]

Hi Bonnie, 

Please ignore our previous update. Since, we have used some of our private methods in the previously shared sample and which is not recommended for sample side customization. 

Currently, we do not have direct method (i.e. public method) to meet your requirement opening appointment window and create new appointment in agenda view in JS1 Schedule control. Therefore, we recommend you to use our JS2 Schedule control, which is completely developed based on the pure JavaScript and the source code is written in TypeScript. Also, it has support for the platforms and frameworks such as MVC, ASP.NET Core, Vue, Angular, React, TypeScript and JavaScript. By using our JS2 Schedule control, you can achieve this requirement with minimal customization (i.e. adding save icon in the toolbar) and the same prepared the sample, which can be downloaded from the following location. 

http://www.syncfusion.com/downloads/support/forum/125939/ze/ScheduleAgendaNewEvent-247318905 

Please refer to the following code example used in the above sample to achieve your requirement. 

@Html.EJS().Schedule("schedule").Width("100%").CurrentView(Syncfusion.EJ2.Schedule.View.Agenda).SelectedDate(new DateTime(2018,08,20)).Height("550px").EventSettings(es => es.DataSource(dataManger => 

       { 

           dataManger.Url("/Home/LoadData").CrudUrl("/Home/UpdateData").CrossDomain(true).Adaptor("UrlAdaptor"); 

       })).ActionBegin("onActionBegin").Render() 

 

 

<script> 

    function onActionBegin(args) { 

        if (args.requestType === 'toolbarItemRendering') { 

            var addIcon = { 

                align: 'Right', prefixIcon: 'e-icon-add', text: 'newEvent', 

                cssClass: 'e-add', overflow: 'Show' 

            }; 

            args.items.push(addIcon); 

        } 

    } 

 

</script> 

Also, we request you to refer to our below UG and sample links to know more about the JS2 Schedule control. 

Sample Link: https://aspnetmvc.syncfusion.com/Schedule/Default#/material  

UG link: https://ej2.syncfusion.com/aspnetmvc/documentation/schedule/  

Kindly check with the above sample and UG links. If you still expecting the same behavior in our JS1 Schedule control, revert us with your confirmation and we will consider your requirement as an improvement and will implement a public method for this and include it in our Volume 3, 2018 SP1 release. 

Regards, 

Arulraj A 

[Bonnie White]

Yes, please add this functionality to the JS1 control.

We have a lot of deadlines with our product and do not have the time to upgrade to the JS2 package at this time.

[Arulraj A]

Hi Bonnie, 

 

Thanks for your update. 

 

We will consider your requirement as an improvement and will implement a public method for this and include it in our Volume 3, 2018 SP1 release as promised in our previous update. 

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Arulraj A