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.

Open appointment window in javascript

Thread ID:

Created:

Updated:

Platform:

Replies:

125939 Sep 13,2016 02:54 AM Sep 5,2018 07:45 AM ASP.NET MVC 7
loading
Tags: Schedule
Fanisa
Asked On September 13, 2016 02:54 AM

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 [Syncfusion]
Replied On September 14, 2016 09:09 AM

 
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: 
 
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
Replied On August 30, 2018 06:12 PM

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 [Syncfusion]
Replied On August 31, 2018 07:21 AM

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. 
 

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


Bonnie White
Replied On August 31, 2018 10:24 AM

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 [Syncfusion]
Replied On September 3, 2018 11:04 AM

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. 


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. 


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. 

Arulraj A 


Bonnie White
Replied On September 4, 2018 01:12 PM

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 [Syncfusion]
Replied On September 5, 2018 07:45 AM

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 


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.

;