1. Home
  2. Forum
  3. jQuery
  4. mouseUp mouseDown for appointment?

mouseUp mouseDown for appointment?

I’m a Newbie using schedule JavaScript (Essential JS 1)… exist the possibility to make an appointment not with right click or Enter but with mouseUp in JavaScript? I will select for example 2 Days with the mouse and when the mouse is up make an appointment. It’s Possible?



12 Replies
VD Vinitha Devi Murugan Syncfusion Team July 10, 2018 07:05 AM UTC

  
Hi Panpyro, 

Thank you for contacting Syncfusion support. 

Yes, it is possible to create an appointment on mouse up. We have prepared a sample for your reference which can be available on the below link. 

In this sample, we have made use of the “create” event of Scheduler, within which the “mouseup” event is wired for scheduler cell elements. Therefore, when you select a single or multiple cells and release the mouse button – the appointment will be automatically created for that selected duration. 

The time duration of the selected cells can be retrieved using the “getSlotByElement” method and then the formed appointment object can then be saved using “saveAppointment” method. 

$(function () { 
    var dManager = ej.DataManager(window.Default).executeLocal(ej.Query().take(1)); 
    $("#Schedule1").ejSchedule({ 
        width: "100%", 
        height: "525px", 
        currentDate: new Date(2014, 4, 5), 
        showQuickWindow: false, 
        allowDragAndDrop: false, 
        appointmentSettings: { 
            dataSource: dManager, 
            id: "Id", 
            subject: "Subject", 
            startTime: "StartTime", 
            endTime: "EndTime", 
            description: "Description", 
            allDay: "AllDay", 
            recurrence: "Recurrence", 
            recurrenceRule: "RecurrenceRule" 
        }, 
        create: "onCreate", 
        resizeStart: function (args) { 
            args.cancel = true; 
        } 
    }); 
 
}); 
function onCreate(args) { 
    this._on(this.element, "mouseup", ".e-workcells,.e-alldaycells,.e-monthcells", $.proxy(onMultiCellSelection, this)); 
} 
function onMultiCellSelection(e) { 
    var obj = {}; 
    var scheduleObj = $("#Schedule1").ejSchedule("instance"); 
    var result = scheduleObj.getSlotByElement(); // to get the selected cell details 
    console.log(result); 
    if (result) { 
        obj["StartTime"] = result.startTime; 
        obj["EndTime"] = result.endTime; 
        scheduleObj.saveAppointment(obj); 
    } 
} 
 

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

Regards, 
M. Vinitha devi 
 


PA Panpyro July 10, 2018 12:08 PM UTC

Thank you, that's what I wanted. Only think is that this solution has side effects. Click, Move, Drag & Drop, Cancel etc. don't go anymore.
I would have to intercept the event handler to tell when what should happen.  

I try it that way:
 this._on(this.element, "mouseup mousedown click dragstart dragstop", ".e-workcells,.e-alldaycells,.e-monthcells",$.proxy(onMultiCellSelection, this));


I try some things out  …If the rest would works too I'm happy



PA Panpyro July 10, 2018 12:44 PM UTC

Problem is:

MouseUp is the same as ending a click event for a short time and
MouseDown is the same as starting a drag event for a short time



…. my first solution is for the close Icon:


if($(e.target).attr("class") !== "e-icon e-schedulemouseclose"){
                    scheduleObj.saveAppointment(obj);
                    }


PA Panpyro July 10, 2018 02:12 PM UTC

The only issues that remains to me is the Appointment resize so not working. Ideas?

PA Panpyro July 10, 2018 02:41 PM UTC

I've solved it so:

...

this._on(this.element, "mouseup click onclick dragstart dragstop", ".e-workcells,.e-alldaycells,.e-monthcells",$.proxy(onMultiCellSelection, this));

...

if($(e.target).attr("class") !== "e-icon e-schedulemouseclose" &&
                       $(e.target).attr("class") !== "e-tophandle e-appointresizer-top e-rowcursor" &&
                       $(e.target).attr("class") !== "e-bottomhandle e-appointresizer-bottom e-rowcursor e-icon e-nsexpand" &&
                       $(e.target).attr("class") !== "e-lefthandle e-appointresizer-bottom e-rowcursor e-icon e-nsexpand" &&
                      $(e.target).attr("class") !== "e-righthandle e-appointresizer-bottom e-rowcursor e-icon e-nsexpand" &&
                      $(e.target).attr("class") !== "e-lefthandle e-columncursor e-appointresizer-left e-icon e-ewexpand" &&
                      $(e.target).attr("class") !== "e-righthandle e-columncursor e-appointresizer-right e-icon e-ewexpand" &&
                      $(e.target).attr("class") !== "e-tophandle e-columncursor e-appointresizer-top e-icon e-ewexpand" &&
                      $(e.target).attr("class") !== "e-bottomhandle e-columncursor e-appointresizer-bottom e-icon e-ewexpand"){
                    scheduleObj.saveAppointment(obj);
                    }
...


....But with resources it makes problems. Creates Appointments on the wrong line or causes an error.



UM Uma Maheswari C Syncfusion Team July 12, 2018 01:46 AM UTC

Hi Panpyro,

Thanks for your update and also for sharing your tried out code examples.

The reported problem was due to the cell selection retaining, while starting with resize action. Therefore, we suggest you to remove it by adding the below code snippet to our previously provided sample link along with your added code to avoid the same on clicking the close icon. No other changes on event wiring is required.

<code>
    $("#Schedule1").ejSchedule({
        width: "100%",
        height: "525px",
        ...
        ...
        create: "onCreate",
        resizeStart: function (args) {
            this.element.find(".e-workcells,.e-alldaycells,.e-monthcells").removeClass("e-selectedCell");
        }
    });
</code>

We have made all the above suggested changes in this jsplayground sample which can be seen from this below link.
http://jsplayground.syncfusion.com/wn4bayy4

Kindly try it and let us know, if it solves your problem and also, if you need any further assistance on this.

Regards,
C. Uma Maheswari

PA Panpyro July 19, 2018 08:09 AM UTC

Thanks, is definitely more elegant than mine.

I once tried to combine it with that: https://jsplayground.syncfusion.com/pshkncmj
But that doesn't work good.

If I add group and resources it will be very funny in combination with mouse over and out.
If I make an appointment in row Test2 it will be entered in TEST3. When I do it at row TEST3 an error occurs. ID is undefined because there is no more rows defined.




VD Vinitha Devi Murugan Syncfusion Team July 19, 2018 01:32 PM UTC

Hi Panpyro, 
 
Thanks for your update and also for sharing your tried out code examples. 
 
The reported problem was due to the object not provided with resource details, while saving the appointment in case of enabling resources feature. Therefore, we suggest you to use the below code snippet to our previously provided sample link along with your added code to avoid the script error. 
 
<code> 
function onMultiCellSelection(e) { 
    var obj = {}; 
    var scheduleObj = $("#Schedule1").ejSchedule("instance"); 
    var result = scheduleObj.getSlotByElement(); // to get the selected cell details 
    console.log(result); 
    if (result) { 
        obj["StartTime"] = result.startTime; 
        obj["EndTime"] = result.endTime; 
        if (result.resources) { 
            obj["roomId"] = result.resources.id; 
        } 
        if ($(e.target).attr("class") !== "e-icon e-schedulemouseclose") 
            scheduleObj.saveAppointment(obj); 
        this.element.find(".e-workcells,.e-alldaycells,.e-monthcells").removeClass("e-selectedCell"); 
    } 
} 
</code> 
 
We have made all the above suggested changes in this jsplayground sample which can be seen from this below link. 
Kindly try it and let us know, if it solves your problem and also, if you need any further assistance on this. 
 
Regards, 
M. Vinitha devi. 


PA Panpyro August 25, 2018 10:04 AM UTC

how i can prevent that's in "scheduleObj._currentViewAppointments" makes an array? I'd like to see only one of them until it's definitely saved.
i was playing with delete but it not works.



AA Arulraj A Syncfusion Team August 27, 2018 05:09 PM UTC

Hi Panpyro, 

We have modified the sample by considering two requirements and it is available in the following link. 


  1. Preventing the new appointment creation while deleting the appointment.
 
We have checked the shared sample and found that new appointment is creating while deleting the appointment, which can be prevented by adding the following code example (we have shared this code example in our previously shared sample). 
 
<script type="text/javascript"> 
        $(function () { 
            var dManager = ej.DataManager(window.Default).executeLocal(ej.Query().take(1)); 
            $("#Schedule1").ejSchedule({ 
                width: "100%", 
                height: "525px", 
                currentDate: new Date(2014, 4, 5), 
                showQuickWindow: false, 
                allowDragAndDrop: false, 
                appointmentSettings: { 
                    dataSource: dManager, 
                    id: "Id", 
                    subject: "Subject", 
                    startTime: "StartTime", 
                    endTime: "EndTime", 
                    description: "Description", 
                    allDay: "AllDay", 
                    recurrence: "Recurrence", 
                    recurrenceRule: "RecurrenceRule" 
                }, 
                create: "onCreate", 
                resizeStart: function (args) { 
                    args.cancel = true; 
                }, 
                beforeAppointmentCreate: "OnBeforeAppointmentCreate" 
            }); 
 
        }); 
        function onCreate(args) { 
            this._on(this.element, "mouseup", ".e-workcells,.e-alldaycells,.e-monthcells", $.proxy(onMultiCellSelection, this)); 
        } 
       function onMultiCellSelection(e) { 
            var obj = {}; 
            var scheduleObj = $("#Schedule1").ejSchedule("instance"); 
            var result = scheduleObj.getSlotByElement(); // to get the selected cell details 
            console.log(result); 
            if (result) { 
                obj["StartTime"] = result.startTime; 
                obj["EndTime"] = result.endTime; 
                if ($(e.target).attr("class") !== "e-icon e-schedulemouseclose") 
                    scheduleObj.saveAppointment(obj); 
            } 
        } 
    </script> 
 
 
  1. Preventing the new appointment creation on the same time.
 
We have prevented the new appointment creation, if that time slot is already having appointment. Please refer to the following code example to meet this requirement. 
 
<script type="text/javascript"> 
        $(function () { 
            var dManager = ej.DataManager(window.Default).executeLocal(ej.Query().take(1)); 
            $("#Schedule1").ejSchedule({ 
                width: "100%", 
                height: "525px", 
                currentDate: new Date(2014, 4, 5), 
                showQuickWindow: false, 
                allowDragAndDrop: false, 
                appointmentSettings: { 
                    dataSource: dManager, 
                    id: "Id", 
                    subject: "Subject", 
                    startTime: "StartTime", 
                    endTime: "EndTime", 
                    description: "Description", 
                    allDay: "AllDay", 
                    recurrence: "Recurrence", 
                    recurrenceRule: "RecurrenceRule" 
                }, 
                create: "onCreate", 
                resizeStart: function (args) { 
                    args.cancel = true; 
                }, 
                beforeAppointmentCreate: "OnBeforeAppointmentCreate" 
            }); 
 
        }); 
        function OnBeforeAppointmentCreate(args) { 
            var schObj = $("#Schedule1").ejSchedule('instance'); 
            if (ej.isNullOrUndefined(args.appointment[0])) 
                obj = args.appointment; 
            else 
                obj = args.appointment[0]; 
            var predicate = ej.Predicate(schObj._appointmentSettings["startTime"], ej.FilterOperators.lessThanOrEqual, new Date(obj.StartTime)).and(schObj._appointmentSettings["endTime"], ej.FilterOperators.greaterThanOrEqual, new Date(new Date(obj.EndTime))); 
            // if newly rendered appointment range has another appointment it will be retrieved here 
            var newAppList = new ej.DataManager(schObj._processed).executeLocal(new ej.Query().where(predicate)); 
            if (newAppList.length > 0) // 0 indicates no more appointment should render in the same time range 
                args.cancel = true; 
        } 
    </script> 
 

Kindly try with the above sample and code example and if you still facing the same issue or if we misunderstood your requirement, revert us with some more information about the issue and requirement screenshot or video demo of the issue or requirement. The information provided by you will be more helpful for us to analyze your requirement and provide you the possible solution. 
 
Arulraj A 


PA Panpyro August 28, 2018 09:49 AM UTC

I don't know how to explain it. I try to explain better.

One appointment came from the Database and should remain.
The second entry I just created with the mouse-down method. This already works.
If I do a new one, the previous entry should be deleted. No matter where and in which column it was generated but not that came from the database.

That was the idea I'm trying to implement.



AA Arulraj A Syncfusion Team August 29, 2018 11:50 AM UTC

Hi Panpyro, 
 
Thanks for the update. 
 
As per your requirement we have prepared the sample with local database and the changes are highlighted below. Also, the sample can be downloaded from the following location. 
  
 
In the above sample inside “OnBeforeAppointmentCreate” method we have filtered the already rendered appointments which has the same time range of newly created appointments and deleted the filtered appointments using deleteAppointment public method. 
 
 
 function OnBeforeAppointmentCreate(args) { 
            var schObj = $("#Schedule1").ejSchedule('instance'); 
            if (ej.isNullOrUndefined(args.appointment[0])) 
                obj = args.appointment; 
            else 
                obj = args.appointment[0]; 
 
            var predicate = ej.Predicate( 
                 schObj._appointmentSettings["startTime"], ej.FilterOperators.greaterThanOrEqual, new Date(obj.StartTime)) 
                .and(schObj._appointmentSettings["endTime"], ej.FilterOperators.greaterThanOrEqual, new Date(new Date(obj.StartTime))) 
                .and(schObj._appointmentSettings["startTime"], ej.FilterOperators.lessThan, new Date(new Date(obj.EndTime))) 
                .or(schObj._appointmentSettings["startTime"], ej.FilterOperators.lessThanOrEqual, new Date(obj.StartTime)) 
                .and(schObj._appointmentSettings["endTime"], ej.FilterOperators.greaterThan, new Date(obj.StartTime)); 
 
            // if newly rendered appointment range has another appointment it will be retrieved here 
            var newAppList = new ej.DataManager(schObj._processed).executeLocal(new ej.Query().where(predicate)); 
            if (newAppList.length > 0) { // 0 indicates no more appointment should render in the same time range 
                for (var i = 0; i < newAppList.length; i++) { 
                    schObj.deleteAppointment(newAppList[i]); // delete the appointment rendered in same time 
                }   
            } 
        } 
 
Try with the above sample and let us know, if you need any further assistance on this. 
 
Regards, 
Arulraj A 


Loader.
Up arrow icon