Scheduler - Resource Availability

[Gidon]

I'm attempting to implement resource availability as  at https://demos.telerik.com/aspnet-ajax/scheduler/examples/resourceavailability/defaultcs.aspx but I've run into a problem. In scripts.js the window.onAppointmentMoving reads as follows:

var start = args.get_targetSlot().get_startTime();
var end = new Date(start.getTime() + args.get_appointment().get_duration());
highlightIfOccupied(start, end, sender, args);

Unfortunately, this is only accurate if the user is dragging the appointment by clicking the first slot the appointment occupies. If the appointment occupies 2 or more slots and the user clicks any but the first slot the start and end times are no longer accurate. Is there a more accurate way to get the new start and end times of the dragged appointment than trying to infer based on the slot that was clicked?

[Gidon]

Answering my own question in case others have similar issues.

The solution is to add an OnClientAppointmentMoveStart event to calculate the clicked TimeSlot and record the offset to the first TimeSlot in the Appointment:

window.onAppointmentMoveStart = function (sender, args) {
  var $ = $telerik.$;

  $('.rsApt').hide();
  var hoveredElement = document.elementFromPoint(window.event.clientX, window.event.clientY);
  $('.rsApt').show();

  var appointmentTimeSlot = args.get_appointment().get_timeSlot();
  var hoveredTimeSlot = sender.get_activeModel().getTimeSlotFromDomElement(hoveredElement);
  timeSlotOffset = hoveredTimeSlot.get_startTime() - appointmentTimeSlot.get_startTime();
}

 

Then use the recorded offset in the OnClientAppointmentMoving and OnClientAppointmentMoveEnd events:

window.onAppointmentMoving = function (sender, args) {
  var start = new Date(args.get_targetSlot().get_startTime() - timeSlotOffset);
  var end = new Date(start.getTime() + args.get_appointment().get_duration());

  highlightIfOccupied(start, end, sender, args);
}

window.onAppointmentMoveEnd = function (sender, args) {
  var start = new Date(args.get_targetSlot().get_startTime() - timeSlotOffset);
  var end = new Date(start.getTime() + args.get_appointment().get_duration());

  warnIfOccupied(start, end, sender, args);
}