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

Asked by Taslim khan
1 month 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]
1 month 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
1 month 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
1 month ago.

See How Its looks Likes

screenshot-2025-04-11-150415.png

Comment posted by Dan Letecky [DayPilot]
1 month ago.

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

Comment posted by Taslim khan
1 month ago.

Will the latest version be compatible with Angular 8?

Comment posted by Dan Letecky [DayPilot]
1 month ago.

Unfortunately not, the latest version requires Angular 16+.

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

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

Products

Learn

Get Support

DayPilot Pro