1. Home
  2. Forum
  3. jQuery
  4. Change Mouse Cursor on Appointment Drag

Change Mouse Cursor on Appointment Drag

I'd like to change the mouse icon when dragging an Appointment in certain circumstances. To help with this my datasource contains an IsEditable property. I have created the following example where I have added dragStop and resizeStop methods to check whether the action should be allowed, but I would like to provide a more visual guide to my users that this operation is not allowed.

Is it possible to change the mouse cursor to the "not-allowed" option for cases where the appointment has the property isEditable = false?

Here's my partial demo

  <body>
    <div class="content-container-fluid">
      <div class="row">
        <div class="cols-sample-area">
          <div id="Schedule1">
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      $(function () {
        var AppointmentList = [
          {
            Subject: "Appointment1", 
            StartTime: new Date("2017-10-19T02:30:00Z"),
            EndTime: new Date("2017-10-19T03:30:00Z"),
            IsEditable: false
          },
          {
            Subject: "Appointment1", 
            StartTime: new Date("2017-10-19T03:45:00Z"),
            EndTime: new Date("2017-10-19T05:00:00Z"),
            IsEditable: true
          }
        ];
        $("#Schedule1").ejSchedule({
          prioritySettings: { enable: true },
          resizeStop : onAppointmentResized,
          dragStop : onAppointmentDragStopped,
          appointmentSettings: {
            dataSource: AppointmentList,
            id: "Id",
            startTime: "StartTime",
            endTime: "EndTime",
            subject: "Subject",
            startTimeZone: "STZ",
            endTimeZone: "ETZ"
          }
        });
        
        function onAppointmentResized(args)
        {
          if (args.appointment.IsEditable === false)
          {
            args.cancel = true;
            return
          }
          else {
            // do more complicated stuff)
          }
        }
        function onAppointmentDragStopped(args)
        {
          if (args.appointment.IsEditable === false)
          {
            args.cancel = true;
            return
          }
          else 
          {
            // do more complicated stuff)
          }
        }
      });
    </script>
  </body>


3 Replies
NR Nevitha Ravi Syncfusion Team October 18, 2017 06:01 PM UTC

Hi Jason, 

Thank you for contacting Syncfusion Support. 

Yes, it is possible to change the mouse cursor to ‘not-allowed’ style on your specified scenario of dragging and resizing action. We have achieved it by making use of the appointmentHover event, where the default cursor style is changed to specific one. Other than stopping the drag and resize action alone on those appointments, it is also possible to avoid CRUD actions such as edit and delete operation on appointments by making use of the client-side events such as dragStart, resizeStart, appointmentWindowOpen and beforeAppointmentRemove which has been depicted in our prepared sample which can be viewed from the below link. 

<Code>  
$("#Schedule1").ejSchedule({ 
            width: "100%", 
            height: "525px", 
            currentDate:new Date(2017,10,9), 
            dragStart: "onStart", 
            resizeStart: "onStart", 
            beforeAppointmentRemove: "onBeforeAppointmentRemove", 
            appointmentWindowOpen: "onAppointmentWindowOpen", 
            appointmentHover:"onAppointmentHover", 
            appointmentSettings: { 
                dataSource: [{Id: 1, 
                    Subject: "Music Class", 
                    StartTime: new Date("2017/11/11 06:00 AM"), 
                    EndTime: new Date("2017/11/11 07:00 AM"), 
                    Description: "Never Give up on Obstacles", 
                    IsEditable: true, 
                },{ 
                    Id: 2, 
                    Subject: "Meeting", 
                    StartTime: new Date("2017/11/10 06:00 AM"), 
                    EndTime: new Date("2017/11/10 07:00 AM"), 
                    Description: "Status detail", 
                    IsEditable: false 
                }], 
                id: "Id", 
                subject: "Subject", 
                startTime: "StartTime", 
                endTime: "EndTime", 
                description:"Description", 
                allDay: "AllDay", 
                recurrence: "Recurrence", 
                recurrenceRule: "RecurrenceRule", 
                isEditable: "IsEditable" 
            }  
        }); 
        }); 
 
        function onStart(args) {   
            if (!args.appointment.IsEditable) { 
                args.cancel =true; 
            }       
        }    
        function onAppointmentHover(args) {  
            if (!args.appointment.IsEditable) { 
                args.cancel =true; // To hide the close icon and other handlers  
                $("#Appointment_" + args.appointment.Id +"").css("cursor","not-allowed"); //to change the cursor 
                
            }       
        } 
        //This method to handle deleting the appointments 
        function onBeforeAppointmentRemove(args) { 
            if (!ej.isNullOrUndefined(args.appointment) && !args.appointment.IsEditable) { 
                args.cancel = true; 
            } 
        } 
        //This method to handle editing the appointments 
        function onAppointmentWindowOpen(args) { 
            if (!ej.isNullOrUndefined(args.appointment) && !args.appointment.IsEditable) { 
                args.cancel = true; 
            } 
 } 
</Code> 

For other references on available client-side events of Schedule, refer here - https://help.syncfusion.com/api/js/ejschedule#events  

Kindly check the above sample and let us know, if you need any further assistance on this. 

Regards, 
Nevitha. 


JR Jason Russell October 19, 2017 03:19 AM UTC

This is great, thanks Nevitha. It also introduces me to ej.isNullorUndefined


NR Nevitha Ravi Syncfusion Team October 19, 2017 03:56 AM UTC

Hi Jason, 

We are glad to hear this from you. Kindly let us know if you need any assistance.  

Regards, 
Nevitha. 


Loader.
Up arrow icon