Datepicker in corner : events vanish

I assume you are working with the JavaScript Scheduler: Date Picker in the Upper-Left Corner tutorial.

1. The SVG calendar icon is new and you need to use the latest version of daypilot.svg (you can find it in the tutorial download and in the latest release).

2. When changing the visible date range, you need to load events for the new date range. You can update the tutorial code like this:

onClick: args => {
  const picker = new DayPilot.DatePicker({
    target: 'date',
    resetTarget: false,
    date: scheduler.startDate,
    onTimeRangeSelect: async args => {
      args.preventDefault(); // keep the icon intact
      picker.close();

      // load events
      const start = args.start;
      const end = start.addDays(scheduler.days);
      const {data} = await DayPilot.Http.get(`/events?start=${start}&end=${end}`);

      scheduler.update({ startDate: args.start, events: data });
    }
  });
  picker.show();
}

3. The scrolling is limited to the dates between startDate and startDate + days.

The code above uses the clicked date as startDate so you can’t access prior dates by scrolling. You can adjust the first date in the event handler as necessary. For example, you can always start with the first day of the selected month and scroll to the clicked day:

onClick: args => {
  const picker = new DayPilot.DatePicker({
    target: 'date',
    resetTarget: false,
    date: scheduler.startDate,
    onTimeRangeSelect: async args => {
      // ...      

      const startDate = args.start.firstDayOfMonth();

      scheduler.update({ startDate, scrollTo: args.start, ... });
    }
  });
  picker.show();
}

4. If you use infinite scrolling, it’s necessary to change the date using the scrollTo() method instead of update():

scheduler.scrollTo(args.start);

Hello Dan,

Thank you for these instructions. I look forward to working on them. I'll come back to you to keep you informed of my progress.

See you soon

Kree