Scheduler - Restore default behaviour in onTimeRangeSelecting when snap to grid is disabled

Asked by Anonymous
1 year ago.

Hi,

I show in the scheduler two type of events. The first type can only be daily and the second one could be both, daily and semi-daily.

I have to respect this fact when moving or resizing the events. The solution would be to deactivate the snap to grid feature and implement the behaviour manually in onEventMoving and onEventResizing. However, I'm struggling with it. I tried something like this for onEventResizing. However, it doesn't work always very smoothly.

onEventResizing: (args) => {      
      if (event.tags.type == 'AdditionalService' || event.tags.type == 'Service' || event.tags.type == 'PlanningBreak') {
        if (args.what == 'start') {
          let newStart = new Date(args.start);
          if (newStart.getHours() == 12) {
            args.start = newStart.subHours(12);
          }
        }

        if (args.what == 'end') {
          let newEnd = new Date(args.end);
          if (newEnd.getHours() == 12) {
            args.end = newEnd.addHours(12);
          }
        }
      }
    },

I also have to restore the default behaviour in onTimeRangeSelecting according to the current value of the scale property, because I'm deactivating the snap to grid feature.

Could you please provide me with an accurateimplmention for the three events, because I'm not able to achieve it.

Thank you very much in advance!

Comment posted by Anonymous
1 year ago.

FYI: In the code snippet above, I'm assigning a JS Date instead of a DayPilot.Date to args.start and args.end. I fixed it and it behaves now much better

//...
args.start = new DayPilot.Date(newStart.subHours(12), true);
//...
args.end = new DayPilot.Date(newEnd.addHours(12), true);
//...

Answer posted by Dan Letecky [DayPilot]
1 year ago.

You will find an example of a custom snap-to-grid implementation in this tutorial:
https://code.daypilot.org/39403/javascript-scheduler-customized-snap-to-grid

It is necessary to round/floor the date/time value. You should be able to use the code from the tutorial right away - you just need to adjust the "snapToMinutes" value.

Also, I recommend avoiding conversions between DayPilot.Date and Date. You should be able to do all calculations using DayPilot.Date.

Comment posted by Anonymous
1 year ago.

So, in my case (I'm setting the scale to half-a-day) I would set snapToMinutes to 720.

    scale: 'CellDuration',
    cellDuration: 720,

I tried it and it works basically. However, when the selection starts somewhere in the morning or afternoon of a day, the half-a-day get selected starting from this position. See please the attached video.

Instead of this behaviour I want to select the whole morning or afternoon, where I clicked.

19-12-2022-14-30-40.mp4

Comment posted by Dan Letecky [DayPilot]
1 year ago.

For snapToMinutes between 60 and 1440 you need to adjust it a little bit:

onTimeRangeSelecting: (args) => {
  const snapToMinutes = 720;
  const snapToMillis = snapToMinutes * 60 * 1000;
  const offsetStart = args.start.getTimePart() % snapToMillis;
  if (offsetStart) {
    args.start = args.start.addMilliseconds(-offsetStart);
  }

  const offsetEnd = args.end.getTimePart() % snapToMillis;
  if (offsetEnd) {
    args.end = args.end.addMilliseconds(-offsetEnd).addMilliseconds(snapToMillis);
  }

  // floor
  args.start = args.start.addSeconds(-args.start.getSeconds()).addMilliseconds(-args.start.getMilliseconds());
  args.end = args.end.addSeconds(-args.end.getSeconds()).addMilliseconds(-args.end.getMilliseconds());

  args.left.enabled = true;
  args.left.html = args.start.toString("h:mm tt");
  args.right.enabled = true;
  args.right.html = args.end.toString("h:mm tt");
}

Comment posted by Anonymous
1 year ago.

Also, I recommend avoiding conversions between DayPilot.Date and Date. You should be able to do all calculations using DayPilot.Date.

According to the doc, DayPilot.Date doesn't have methods to subtract days, hours etc.

Comment posted by Anonymous
1 year ago.

I assume, if the parameter of the addXxx methods is negativ, the operation is invereted to substraction.

Comment posted by Dan Letecky [DayPilot]
1 year ago.

Yes, exactly. To subtract days, you can use addDays with a negative value:

const today = DayPilot.Date.today();
const weekAgo = today.addDays(-7);

Comment posted by Anonymous
1 year ago.

BTW, when I convert e. g. this string "2022-11-07T00:00:00" to a Date instance using JS Date and using DayPilot.Date, I get two different results. Could you please explain the difference to me.

JS Date -> Mon Nov 07 2022 00:00:00 GMT+0100
DayPilot.Date -> Mon Nov 07 2022 01:00:00 GMT+0100

For my understanding the JS Date conversion is correct according to the date string

Comment posted by Dan Letecky [DayPilot]
1 year ago.

To get a Date object representing the DayPilot.Date time using a local time zone, you should use toDateLocal() method:

https://api.daypilot.org/daypilot-date-todatelocal/

Example:

Date:

> new Date();
Wed Dec 28 2022 10:55:48 GMT+0100 (Central European Standard Time)

DayPilot.Date:

> DayPilot.Date.now().toDateLocal();
Wed Dec 28 2022 10:55:48 GMT+0100 (Central European Standard Time)

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

Scheduler - Restore default behaviour in onTimeRangeSelecting when snap to grid is disabled

Products

Learn

Get Support

DayPilot Pro