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.

Any news?

Sorry for the delay!

I have tried to reproduce the issue using the following config:

{
    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: "2025-01-01",
    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,
    onIncludeTimeCell: args => {
        const totalHoursToShow = ["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"];
        const cellHour = args.cell.start.value.substring(11, 16); // like '13:00'
        if (!totalHoursToShow.includes(cellHour)){
            args.cell.visible = false;
        }
    },
}

It seems to work fine. The Scheduler looks like this:

Could you please try to modify this config so that it reproduces the problem?

You can also try temporarily turning off your custom theme to see if it’s the source of the problem.

I tried adding this to the configuration and simulating with a few hours:

onIncludeTimeCell: (args: any) => {
  const arrayToShow = ['00:00','00:15','12:00','12:15','14:00'];
  const cellHour = args.cell.start.value.substring(11, 16); // es '13:00'
  // show only the hours that are in the array
  args.cell.visible = arrayToShow.includes(cellHour);
},

Thanks!

With this onIncludeTimeCell, I’m getting this. It seems to work fine as well:

Could you please give it a try with the latest release (2025.2.6446) if you are using an older version?

I try to download the latest trial version and it works! Thanks!

Great, thanks for the update!