mouseUp mouseDown for appointment?

Question

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?

Vinitha Devi Murugan · Answer

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. 
http://jsplayground.syncfusion.com/refhn2iq  

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

Panpyro · Answer

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

Panpyro · Answer

Problem is:MouseUp is the same as ending a click event for a short time andMouseDown 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);                    }

Panpyro · Answer

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

Panpyro · Answer

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.

Uma Maheswari C · Answer

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.

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

We have made all the above suggested changes in this jsplayground sample which can be seen from this below link.http://jsplayground.syncfusion.com/wn4bayy4Kindly 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

Panpyro · Answer

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.

My attempt: https://jsplayground.syncfusion.com/oxbq42i2

Vinitha Devi Murugan · Answer

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.

 
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"); 
    } 
}

We have made all the above suggested changes in this jsplayground sample which can be seen from this below link. https://jsplayground.syncfusion.com/efeej4kc 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.

Panpyro · Answer

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.

http://jsplayground.syncfusion.com/refhn2iq

Arulraj A · Answer

Hi Panpyro, We have modified the sample by considering two requirements and it is available in the following link. http://jsplayground.syncfusion.com/im0c1rh2 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). 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. 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. Regards, Arulraj A

Panpyro · Answer

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.

Arulraj A · Answer

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. 
  
Sample Link: http://www.syncfusion.com/downloads/support/forum/138600/ze/MouseUpDown-446574317  
 
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