DayPilot
Products
Support

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

Asked by Taslim khan
1 years 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)?

how-tojavascriptangularhidingnon-businesshoursspanningtwodaystwodaysdaypilotscheduler
Answer posted by Dan Letecky [DayPilot]
1 years 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 years 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 Dan Letecky [DayPilot]
1 years 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 years ago.

Will the latest version be compatible with Angular 8?

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

Unfortunately not, the latest version requires Angular 16+.

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