Switch Weekly Daily

Please take a look at this tutorial:
https://code.daypilot.org/61574/javascript-scheduler-switching-day-week-month-views

Since the Hotel tutorial doesn't use "scale", "days", and "startDate" to generate the timeline you will need to replace them with a calculated "timeline" property (from loadTimeline).

Dear Dan,

i already test with this tutorial. On Hotel exemple i can't find the good way to do this.

I need scale hours. On loading page it's good

Default appear using select menu or calendar navigation.

week mode : "start" and "end" date using step 12hours
day mode : "start" and "end" date using step 12hours and i load 2 days.

Bes regard

You can use the following config:

var dp = new DayPilot.Scheduler("dp", {
  // ...
  cellDuration: 720,
  cellWidth: 40,
  scale: "CellDuration",
  timeHeaders: [{groupBy: "Day", format: "dddd MMMM d, yyyy"}, {groupBy: "Hour"}, {groupBy: "Cell"}],
  zoomLevels: [
    {
      name: "Day",
      properties: {
        startDate: function(args) { return args.date.getDatePart(); },
        days: function() { return 2; },
      }
    },
    {
      name: "Week",
      properties: {
        startDate: function(args) { return args.date.firstDayOfWeek(); },
        days: function() { return 7; },
      }
    },
  ],
});

And buttons:

HTML

<div class="toolbar">
  <button id="button-day">Day</button>
  <button id="button-week">Week</button>
</div>

JavaScript

<script>
  var elements = {
    day: document.getElementById("button-day"),
    week: document.getElementById("button-week"),
  };

  elements.day.addEventListener("click", function(ev) {
    dp.zoom.setActive(0);
  });

  elements.week.addEventListener("click", function(ev) {
    dp.zoom.setActive(1);
  });

</script>

In this case (one cell per 12 hours), you don't need to use loadTimeline because that is used to generate a custom timeline.

Thanks a lot for this code.

I have the same problem with tutorial
https://code.daypilot.org/61574/javascript-scheduler-switching-day-week-month-views

On console we can see :

Uncaught TypeError: Cannot read property 'start' of null
at DayPilot.Scheduler.Mi (daypilot-all.min.js:25)
at DayPilot.Scheduler.getViewPort (daypilot-all.min.js:25)
at Object.zoom.kg (daypilot-all.min.js:24)
at Object.zoom.setActive (daypilot-all.min.js:24)
at DayPilot.Scheduler.gn (daypilot-all.min.js:31)
at DayPilot.Scheduler.init (daypilot-all.min.js:31)
at (index):591

For information.

I have to update daypilot-all.min.js and CTRL+F5 to clear cache

It's working .

Thanks so much Dan

Hi Dan,

with this change on week mode i can't have 7 days slipperry

may be change startDate ?

name: "Week",
properties: {
startDate: function(args) { return args.date.firstDayOfWeek(); },
days: function() { return 7; },

This implementation resets the first day to the first day of week when changing the view/zoom level:

startDate: function(args) { return args.date.firstDayOfWeek(); },

You can use the source date instead:

startDate: function(args) { return args.date; },

You will probably want to set the zoomPosition value to "left":

var dp = new DayPilot.Scheduler("dp", {
  // ...
  zoomPosition: "left",
  zoomLevels: [
    // ...
  ],
});

See also:
https://api.daypilot.org/daypilot-scheduler-zoomposition/

Hi Dan,

i already check with this. doesn't work.

IN fact the problem is in script to change mode

Without nav.select , 7 days slipperry is OK in calendar navigator day or week select are not active.

<script>
var elements = {
day: document.getElementById("button-day"),
week: document.getElementById("button-week"),
};

elements.day.addEventListener("click", function (ev) {

// nav.selectMode = "Day";
// nav.select(nav.selectionDay);

dp.zoom.setActive(0);
});

elements.week.addEventListener("click", function (ev) {

// nav.selectMode = "Week";
// nav.select(nav.selectionDay);

dp.zoom.setActive(1);
});

</script>