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.
Syncfusion Feedback

Create appointment with single click

Thread ID:

Created:

Updated:

Platform:

Replies:

120683 Oct 3,2015 12:49 PM UTC May 23,2017 06:12 AM UTC ASP.NET MVC 15
loading
Tags: Schedule
jarrod
Asked On October 3, 2015 12:49 PM UTC

Hi

I would like the user to be able to create an appointment with a single click of the mouse button.
Basically, if the user clicks anywhere in the Schedule control, whether on a blank cell or on a cell within an appointment, I want to be able to detect the Start and End times of the cell clicked, and create an appointment with that information.

Any ideas?

Thanks
Jarrod


Karthigeyan Krishnamurthi [Syncfusion]
Replied On October 5, 2015 09:33 AM UTC

Hi Jarrod,

Thanks for contacting Syncfusion support.

Your requirement on “create an appointment with a single click of the mouse button  can be achieved through “inline editing“ option which has already been logged as a feature request in our database. This feature will be available at your service in any one of our upcoming releases. 

In the meantime, please refer to the following workaround through which the Start time and End time of the cell clicked can be detected with the event “cellClick”. The creation of the appointment with that information can be achieved through our public function “saveAppointment”. Also, we can get the existing appointment details by clicking the appointments through the event “appointmentClick”. Please find the following code example we have used to achieve your requirement. 

<Code>

<script type="text/javascript">

        $(function () {

            $("#Schedule1").ejSchedule({

                width: "100%",

                height: "525px",

                currentDate: new Date(2014, 4, 5),

               appointmentSettings: {

                    dataSource:[{

                        Id: 2,

                        Subject: "Project Review.",

                        StartTime: new Date(2014, 3, 3, 07, 00),

                        EndTime: new Date(2014, 3, 3, 08, 30),

                        Description: "",

                        AllDay: false,

                        Recurrence: false

                    }]                  

                },

                cellClick: "OnCellClick",

                appointmentClick: "OnAppointmentClick",

            });


        });

        function OnCellClick(args) { //This function will be called when the cell is clicked

            //args.startTime - start time of the cell clicked will be returned

            //args.endTime - end time of the cell clicked will be returned

            //args.type - event name will be returned

            //args.resources - resoure name of the cell clicked will be returned

            var obj = {};

            obj["Subject"] = "Test Appointment";

            obj["StartTime"] = args.startTime;

            obj["EndTime"] = args.endTime;

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

            object.saveAppointment(obj); // Here we are passing the object collection in Json format to public saveAppointment function

          

        }  

      function OnAppointmentClick(args) { // This function will be called when the appointment is clicked

            //args.appointment – Entire appointment details will be returned

           //args.type - event name will be returned
        }   

</script>

<Code>

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

Regards,
Karthigeyan


Jarrod Lange
Replied On October 5, 2015 05:24 PM UTC

Hi

Thanks for the reply.

I have implemented the OnCellClick function below and that works perfectly!

The OnAppointmentClick event is never called, however I don't think that I need to worry about it as I don't think that it is the required behaviour.
When a user clicks on an existing appointment, I would like to know the underlying cell that is clicked so that I can create another appointment at that particular time.

Can this be done?

Thanks
Jarrod


Karthigeyan Krishnamurthi [Syncfusion]
Replied On October 6, 2015 10:19 AM UTC

Hi Jarrod,

Thanks for your update.

When an existing appointment is clicked, the event “appointmentClick” will be triggered. In this event you can retrieve the existing appointment’s start time and end time. The whole duration of the cells underlying the existing appointment will be as same as the existing appointment’s duration. So by using the information retrieved from the event “appointmentClick” you can achieve your requirement on “creating another appointment at that particular time”.  Please find the following code example to retrieve the appointment start time and end time using the event “appointmentClick”.


<Code>

<script type="text/javascript">

       $(function () {

           $("#Schedule1").ejSchedule({

               width: "100%",

               height: "525px",

               currentDate: new Date(2014, 4, 5),

               appointmentSettings: {

                   dataSource: [{

                       Id: 2,

                       Subject: "Project Review.",

                       StartTime: new Date(2014, 3, 3, 07, 00),

                       EndTime: new Date(2014, 3, 3, 08, 30),

                       Description: "",

                       AllDay: false,

                       Recurrence: false

                   }]

               },

               appointmentClick: "OnAppointmentClick",

           });

       });

     

       function OnAppointmentClick(args) { // This function will be called when the appointment is clicked

           //args.appointment – Entire appointment details will be returned

           //args.appointment.StartTime - Start time of the appointment will be returned

           //args.appointment.EndTime - End time of the appointment will be returned

           //args.type - event name will be returned

           var obj = {};

           obj["Subject"] = "Test Appointment";

           obj["StartTime"] = args.appointment.StartTime; // Here existing appointment start time is given to the object collection

           obj["EndTime"] = args.appointment.EndTime; // Here existing appointment end time is given to the object collection

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

           object.saveAppointment(obj); // Here we are passing the object collection in Json format to public saveAppointment function

       }

</script>

<Code>


Regards, 

Karthigeyan


Jarrod Lange
Replied On October 6, 2015 10:30 AM UTC

Thanks for the reply.

I don't think that I have been very clear with my requirement.

If I have an 8 hour appointment, let's say from 9am to 5pm, I would want to be able to click on that appointment, let's say at the time of 1pm, so right in the middle of the existing appointment.
I then want to create an appointment at 1pm, not at the exact same start and end times of the clicked appointment.

The real life scenario I want to replicate is this:
    - Customer A selects one or more time periods in which they are available to talk on the phone
    - Customer B selects a "start time" within one of the periods that Customer A has selected 

So using my original times, if Customer A has selected 9am-5pm, Customer B can select a start time anywhere from 9am to 5pm.
Hence the need for Customer B to be able to select anywhere within the existing appointment, to select their start time.

I realise that Customer B can select the underlying cell, to the right of the appointment, but this is not the most intuitive method, and the Customer B user group needs the most simple and basic method for selecting a start time.

Hope this helps to clarify my situation.

Thanks very much

Cheers
Jarrod


Karthigeyan Krishnamurthi [Syncfusion]
Replied On October 7, 2015 09:19 AM UTC

Hi  Jarrod,

Thanks for your update.

We have analyzed your requirement “Creation of appointment with in the existing appointment duration” that can be achieved only by adding “pointer-events” css to the appointment, setting it to none. Once the mentioned css is added to appointment we can’t edit/delete or perform any kind of editing options with that appointment. It is the only possible way to achieve your scenario without selecting the underlying cell, to the right of the appointment space. Kindly find the following code example we have used to achieve your requirement. 

<Code>

<script type="text/javascript">

    $(function () {

        $("#Schedule1").ejSchedule({

            width: "100%",

            height: "525px",

            currentDate: new Date(2014, 4, 5),

            appointmentSettings: {

                dataSource: [{

                    Id: 2,

                    Subject: "Project Review.",

                    StartTime: new Date(2014, 3, 3, 07, 00),

                    EndTime: new Date(2014, 3, 3, 08, 30),

                    Description: "",

                    AllDay: false,

                    Recurrence: false

                }]

            },

            cellClick: "OnCellClick",

            create: "onCreate"

        });

    });

    function OnCellClick(args) { //This function will be called when the cell is clicked

        //args.startTime - start time of the cell clicked will be returned

        //args.endTime - end time of the cell clicked will be returned

        //args.type - event name will be returned

        //args.resources - resoure name of the cell clicked will be returned

        var obj = {};

        obj["Subject"] = "Test Appointment";

        obj["StartTime"] = args.startTime;

        obj["EndTime"] = args.endTime;

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

        object.saveAppointment(obj); // Here we are passing the object collection in Json format to public saveAppointment function

    }

    function onCreate() { // This function will be called when the schedule initially loads

        this.element.find('.e-appointwrapper').css("pointer-events", "none"); // Here we are adding pointer-events css to appointment div in order to select the underlying cell

    }

</script>

<Code>

Regards,

Karthigeyan


Jarrod Lange
Replied On October 7, 2015 02:13 PM UTC

That's brilliant, thank you very much.

I have tested the code in isolation and works just as I would like.
I will plug it in to my application and test with the rest of the functionality that I have put together.

I will let you know how it goes.

Thanks for your help.

Jarrod Lange
Replied On October 7, 2015 05:05 PM UTC

So far so good with my testing.

There is one scenario I need to figure out though:
    Customer B can only ever have one appointment (call start time) in the schedule
    Customer B has alread selected a start time, by clicking on an appointment, and therefore has 1 appointment in the Scheduler.
    Customer B wants to change/delete this appointment, but no longer can, as cannot interact with the appointment

If Customer B clicks on another appointment, to create a new appointment (call start time), can I delete the existing appointment in code/JS, in the onCellClick event? If so, I can then create the new appointment as per the method provided using the start/end times in the args.

I have had a quick look so far, but didn't see anything along the lines of this code, but for deleting an appointment:
                    var schObj = $("#Schedule").data("ejSchedule");
                    schObj.saveAppointment(obj);


Thanks for continuing assistance.
Jarrod


Karthigeyan Krishnamurthi [Syncfusion]
Replied On October 8, 2015 09:45 AM UTC

Hi Jarrod,

We have analyzed your requirement on “Existing appointment wants to be deleted while clicking on it and needs to create a new appointment” and prepared the following code example to achieve it.

<Code>



<script type="text/javascript">

    $(function () {

        var dManager = ej.DataManager(window.Default).executeLocal(ej.Query().take(10));

        $("#Schedule1").ejSchedule({

            width: "100%",

            height: "525px",

            currentDate: new Date(2014, 4, 5),

            appointmentSettings: {

                dataSource: [{

                    Id: 2,

                    Subject: "Project Review.",

                    StartTime: new Date(2014, 3, 3, 07, 00),

                    EndTime: new Date(2014, 3, 3, 08, 30),

                    Description: "",

                    AllDay: false,

                    Recurrence: false

                }]

            },

            cellClick: "OnCellClick",

            create: "onCreate"

        });


    });

    function OnCellClick(args) { //This function will be called when the cell is clicked

        //args.startTime - start time of the cell clicked will be returned

        //args.endTime - end time of the cell clicked will be returned

        //args.type - event name will be returned

        //args.resources - resoure name of the cell clicked will be returned

        var predicate2 = ej.Predicate(this.model.appointmentSettings["endTime"], ej.FilterOperators.greaterThanOrEqual, args.endTime).and(this.model.appointmentSettings["startTime"],   ej.FilterOperators.lessThanOrEqual, args.endTime);

        var predicate1 = ej.Predicate(this.model.appointmentSettings["startTime"], ej.FilterOperators.greaterThanOrEqual, args.startTime).and(this.model.appointmentSettings["startTime"], ej.FilterOperators.lessThanOrEqual, args.startTime);

        var predicate = predicate2["or"](predicate1); // here we are filtering the appointment which has the start time and end time of the cell clicked

        var app = new ej.DataManager(this._processed).executeLocal(new ej.Query().where(predicate));

        this.deleteAppointment(app[0].Guid); // here the Guid of the filtered appointment is passed to the public delete function

        var obj = {};

        obj["Subject"] = "Test Appointment";

        obj["StartTime"] = args.startTime;

        obj["EndTime"] = args.endTime;

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

        object.saveAppointment(obj); // Here we are passing the object collection in Json format to public saveAppointment function

    }

    function onCreate() { // This function will be called when the schedule initially loads

        this.element.find('.e-appointwrapper').css("pointer-events", "none"); // Here we are adding pointer-events css to appointment div in order to select the underlying cell

    }
    </script>

<Code>

In the above code example, if the existing appointment is clicked then the clicked appointment will be deleted and the new appointment will be created. This process is carried out in “cellClick” event.

Regards,
Karthigeyan



Jarrod Lange
Replied On October 8, 2015 01:51 PM UTC

Hi

Thanks, as always, for the quick reply.

I have tried the solution provided but with not much luck so far.

The Guid is always undefined in this line of code:
    this.deleteAppointment(app[0].Guid);

I have the Id of the Appointment record as it is stored in the database, but that doesn't seem to work either.

Any thoughts?  

Chers
Jarrod




Karthigeyan Krishnamurthi [Syncfusion]
Replied On October 9, 2015 07:31 AM UTC

Hi Jarrod,


Thanks for your update.


We are unable to reproduce the reported issue at our end.  Appointments are getting deleted correctly based on the Guid and the same has been prepared as a sample that can be downloaded from the following location:

http://www.syncfusion.com/downloads/support/forum/120683/ze/cellClick_event-1638065759

JSPlayground link:
http://jsplayground.syncfusion.com/50ua2rlf

Please run the above sample and if the issue still persists at your end, please reproduce the issue in the above sample and update.  Else share more information like code example or sample if possible, so that we can analyze the root cause of the issue and provide you solution. 

Note: The provided sample is made with the Volume 3 release version 13.3.0.7. If you are using the Volume 2 service pack version 13.2.0.34, kindly replace this .deleteAppointment(app[0].Guid); with .deleteAppointment(app[0].Id); as Guid concept will not be included in the Volume 2 service pack version.
 
Regards, 
K.Karthigeyan




Jarrod Lange
Replied On October 9, 2015 10:08 AM UTC

Thanks for the reply.

The version of Syncfusion.Ej dll in my Visual Studio references is 13.2450.0.29, so it appears I am a few versions behind the current.
I will update to the latest version, test again and get back to you.

Are there any upgrade directions or anything I need to be aware of?

Once again, thank you for your assistance.

Cheers
Jarrod


Jarrod Lange
Replied On October 12, 2015 02:30 AM UTC

Hi

I downloaded the example provided, however it isn't working for me.
If I open the project is Visual Studio, and run it, it throws an error on this line in ej.web.all.min.js - f=Globalize.parseDate(this.currentDate(),this.model.dateFormat) - see attached file.

I have also tried upgrading my project to the latest version - 13.3.0.7 - so far without luck.
I have version 13.3.0.7 of ej.web.all.min.js in my project yet when I run it, Visual Studio/IE/IIS loads a different version of the script - 13.2.0.29.
I am guessing this explains why I do not see a GUID property on my appointments, and therefore the delete fails.  But I have not been able to figure out why that version of the script is loading.

I will keep playing and let you know how I get on.

Cheers
Jarrod


Attachment: Clipboard01_894b0192.7z

Karthigeyan Krishnamurthi [Syncfusion]
Replied On October 12, 2015 11:04 AM UTC

Hi Jarrod,

Thanks for your update.

On analyzing your scenario “Visual Studio/IE/IIS loads a different version of the script - 13.2.0.29” we suspect that the latest scripts may not be referred correctly in your project, or else your project may include multiple script reference which might get loaded through bundle. So, first install the latest version and then verify whether all the required dlls and script files are referred from the current build version installed in your machine. Also, make sure to remove all the old version script and theme files from your project, before adding the new version. If many build versions are installed in your machine, make sure that the same build version files (both the dlls and script files and also the latest theme files) are used in the entire project.

Note: Try to clean and rebuild your application after upgrading to the newer version.

Kindly revert back to us with more information like screenshot or other problems that you are facing while installation if possible, so that we can analyze those scenarios and provide you the required solution.


Regards,

Karthigeyan.


jarrod
Replied On May 22, 2017 08:17 PM UTC

Hi guys

Earlier in this thread we spoke about how a user could choose a time within an existing appointment with a mouse click.  The solution was to add pointer-events: none to e-appointmentwrapper
    this.element.find('.e-appointwrapper').css("pointer-events", "none");

When I first implemented this, it worked fine, however it is no longer working.
Unfortunately I cannot tell you at which point this stopped working, or what I may have changed, if anything, for this to happen.

I am currently using 
     Syncfusion.EJ.Mvc 15.1500.0.33
     Syncfusion.EJ 15.1460.0.33

Which is different to the version when the code was originally put together.

Any suggestions before I start digging into previous code and database versions to find the last time it worked?

Thanks for your help, as always.

Cheers
Jarrod


Karthigeyan Krishnamurthi [Syncfusion]
Replied On May 23, 2017 06:12 AM UTC

Hi Jarrod,

Thanks for your update.
 
 
No appointments (while fetching from database) will be rendered during the Create event execution therefore kindly use the below style tag in your sample. 
 
<Code> 
<style> 
    .e-appointwrapper{ 
        pointer-events:none 
    } 
</style> 
</Code> 
 
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.

Warning Icon 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.Close Icon

;