Hide non business hours from scheduler

Yes, this can be done by hiding selected time columns using the onIncludeTimeCell event handler or by defining the timeline manually.

Hi!
We use Vue3 and the problem is that the scheduler create a ‘glitch’ with a gray bar if we have open slots - close slots -open slots:

the problem is that we have a button that should swicth the timeline between all hours and only the open hours, obviously each restaurant have different open hours and we have to calculate the open/close slots.
We already use onIncludeTimeCell like that:

if (isHoursClosed.value) {
  if (dp) {
    //Hide cell with no available hours
    dp.onIncludeTimeCell = (args: any) => {
      const cellHours = args.cell.start.value.substring(11, 16);
      if (!elencoOrariTimeline.value[cellHours] &&
      !orariConPrenotazioni.includes(cellHours)) {
        args.cell.visible = false;
      }
    };
  }
  } else {
  if (dp) {
    dp.onIncludeTimeCell = null;
  }
}
dp.update();

Daniele,

Could you please post a screenshot of the problem?

without hiding hours

hiding the hours:

Thanks. I see the time header problem - this definitely shouldn’t happen.

Could you please post your timeHeaders, elencoOrariTimeline and orariConPrenotazioni values that produce the issue?

i’ve updated the code so it’s more clear:

totalHoursToShow = Array.from(new Set([...setHoursWithReserves, ...Object.values(timelineHours.value)])).sort();
// array like that ["01:15","01:30","01:45","02:00","02:15","02:30","02:45","03:00","03:15","03:30","03:45","04:00","04:15", ...]
// if the button is checked, hide the hours that are not in the array
if (hideCloseTime.value) {
  if (dp) {
    // hide cell if it is not in the array
    dp.onIncludeTimeCell = (args: any) => {
      const cellHour = args.cell.start.value.substring(11, 16); // like '13:00'
      // show only the hours that are in the array
      if (!totalHoursToShow.includes(cellHour)){
        args.cell.visible = false;
      }
    };
  }
} else {
  if (dp) {
    dp.onIncludeTimeCell = null;
  }
}
dp.update()

This is the scheduler config with timeHeaders:

const schedulerConfig = reactive<DayPilot.SchedulerConfig>({
  theme: "newthemetimeline",
  locale: "it-it",
  crosshairType: "Disabled",
  rowHeaderColumns: [{ text: "Zona", display: "name" }],
  viewType: "Resources",
  timeHeaders: [
    { groupBy: "Day", format: "dddd, d MMMM yyyy" },
    { groupBy: "Hour" },
    { groupBy: "Cell", format: "mm" },
  ],
  scale: "CellDuration",
  cellDuration: 15,
  days: 1,
  startDate: reservationsFiltersStore.reservationsFilters.startDate,
  floatingEvents: false,
  eventHeight: 40,
  rowHeaderWidthAutoFit: true,
  progressiveRowRendering: false,
  scrollDelayCells: 10,
  cellWidth: 50,
  allowEventOverlap: false,
  timeRangeSelectedHandling: "Enabled",
  eventMoveHandling: "Update",
  eventResizeHandling: "Disabled",
  eventDeleteHandling: "Disabled",
  eventHoverHandling: "Disabled",
  eventClickHandling: "Enabled",
  treeEnabled: true,
  beforeCellRenderCaching: true,
  treePreventParentUsage: true,
  heightSpec: "Max",
  dynamicLoading: false,
  // Imposta un valore di default; verrà aggiornato in onMounted
  height: 0,
  resources: elencoZoneTimeline.value, //
  // funzioni del plug in
  onBeforeRowHeaderRender: onBeforeRowHeaderRender,
  onBeforeCellRender: onBeforeCellRender,
  onBeforeEventRender: onBeforeEventRender,
  onAfterRender: afterRender,
  onTimeRangeSelected: onTimeRangeSelected,
  onEventClick: onEventClick,
  onEventMove: onEventMove,
  onEventMoved: onEventMoved,
});

Thanks, please let me check that.