Scheduler - Resource Availability

2 posts, 0 answers
  1. Gidon
    Gidon avatar
    10 posts
    Member since:
    Apr 2014

    Posted 07 Mar 2018 Link to this post

    I'm attempting to implement resource availability as demo'd 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?

  2. Gidon
    Gidon avatar
    10 posts
    Member since:
    Apr 2014

    Posted 09 Mar 2018 Link to this post

    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);
    }
Back to Top