Issue with Hiding Non-Business Hours Spanning Two Days in DayPilot Scheduler

Asked by Taslim khan
14 days ago.

I am using DayPilot Pro (version 2021.3.5046) in my Angular 8 application, and I’ve encountered an issue related to hiding non-business hours. The scheduler works fine for a single day, but when my business hours span 9 PM (21:00) on Day 1 to 6 AM (06:00) on Day 2, the non-business hours are not being hidden properly.

const config: SchedulerPropsAndEvents = {
  startDate: "2024-01-01T21:00:00", // Start at 9 PM on Day 1
  days: 2,                        // Show two days to account for business hours spanning over two days
  businessBeginsHour: 21,         // 9 PM
  businessEndsHour: 6,            // 6 AM the next day
  showNonBusiness: false,         // Hide non-business hours

  onIncludeTimeCell: (args) => {
    const businessStart = 21;     // 9 PM (21:00)
    const businessEnd = 6;        // 6 AM (06:00) of the next day
    const hour = args.cell.start.getHours();
    const day = args.cell.start.getDay();

    if ((hour >= businessStart) || (hour < businessEnd && day === 1)) {
      return true;              // Show the time cell (business hour)
    }
    
    return false;               // Hide the time cell (non-business hour)
  },
};

For a single day, the scheduler hides non-business hours correctly.

However, when spanning two days, the non-business hours are not hidden, and the cells before 9 PM and after 6 AM are still visible.

Could you please assist with how to properly hide non-business hours when the business hours span across two days (9 PM to 6 AM)?

Answer posted by Dan Letecky [DayPilot]
14 days ago.

The onIncludeTimeCell logic should look like this (it works for two days and scale="Hours"):

onIncludeTimeCell: (args) => {
    const businessStart = 21; // 9 PM (21:00)
    const businessEnd = 6; // 6 AM (06:00) of the next day
    const hour = args.cell.start.getHours();
    const day = args.cell.start.getDay();
    if ((hour >= businessStart && day === 1) || (hour < businessEnd && day === 2)) {
        args.cell.visible = true;
    }
    else {
        args.cell.visible = false;
    }
},

Note that the visibility needs to set using args.cell.visible instead of return and the if condition needs to be updated.

Comment posted by Taslim khan
14 days ago.

still this not working
config: SchedulerPropsAndEvents = {

timeHeaders: [

{ groupBy: "Day", format: "dddd, d MMMM yyyy" },

{ groupBy: "Cell", format: "HH:mm" },

heightSpec:"Parent100Pct",

scale: "Hour",

cellGroupBy: "Cell",

cellDuration: 30,

cellWidth: 60,

allowEventOverlap: true,

rowHeaderWidthAutoFit: false,

useEventBoxes: "Never",

snapToGrid:false,

eventHoverHandling: "Bubble",

scrollDelayEvents: 0,

timeFormat: "Clock24Hours",

rowDoubleClickHandling: "CallBack",

startDate: "2024-01-01",

days: 2,

eventHeight: 33,

eventResizeHandling: 'Disabled',

timeRangeSelectedHandling: "Enabled",

timeRangeRightClickHandling: "Enabled",

treeEnabled: true,

hideBorderFor100PctHeight: true,

eventMoveHandling: "Update",

allowMultiSelect: true,

allowMultiMove: false,

allowMultiRange: false,

autoScroll: 'Drag',

businessBeginsHour: 0,

businessEndsHour: 0,

multiMoveVerticalMode: 'All',

rowHeaderWidth: 250,

rowClickHandling:'Enabled',

moveBy:'Full',

onIncludeTimeCell: (args) => {

const businessStart = 21; // 9 PM (21:00)

const businessEnd = 6; // 6 AM (06:00) of the next day

const hour = args.cell.start.getHours();

const day = args.cell.start.getDay();

if ((hour >= businessStart && day === 1) || (hour < businessEnd && day === 2)) {

args.cell.visible = true;

}

else {

args.cell.visible = false;

}

},
Please help

Comment posted by Taslim khan
14 days ago.

See How Its looks Likes

screenshot-2025-04-11-150415.png

Comment posted by Dan Letecky [DayPilot]
14 days ago.

You are using a version that is almost 4 years old - could you please give it a try with the latest version?

Issue with Hiding Non-Business Hours Spanning Two Days in DayPilot Scheduler

Products

Learn

Get Support

DayPilot Pro