search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Scheduler Time Range Configuration

Asked by Anonymous
10 months ago.

Hello everyone,

I am currently developing a project using the Scheduler component. I have encountered a problem when trying to configure the time range in my scheduler.

In my use case, I need to display a scheduler that covers several days, but each day only needs to show a particular time window. For instance, I want to show a full week schedule, but only from 8:00 AM to 6:00 PM each day. I have been struggling to implement this feature.

Currently, the scheduler I have set up displays all 24 hours for each day. I am using the startDate and days properties to set the range of dates, but I'm unable to figure out how to limit the hours that are displayed each day.

Here's a snippet of my current configuration:

const dp = new DayPilot.Scheduler("dp", {
  startDate: "2023-06-01",
  days: 7,
  scale: "CellDuration",
  cellDuration: 60
});
dp.init();

In my understanding, the cellDuration property adjusts the duration of each time slot, but it doesn't seem to restrict the hours that are displayed each day.

Could anyone guide me on how to limit the hours displayed each day in the scheduler? Any suggestions or guidance would be highly appreciated.

Thank you in advance.

how-to javascript
Answer posted by Dan Letecky [DayPilot]
10 months ago.

There are two ways to solve it:

1. You can define business hours using the businessBeginsHour and businessEndsHour properties and set showNonBusiness to false (see also hiding non-business hours):

const dp = new DayPilot.Scheduler("dp", {
    businessBeginsHour: 8,
    businessEndsHour: 18,
    showNonBusiness: false
    // ... add your other options here
});

dp.init();

2. You can hide selected time columns using the onIncludeTimeCell event handler:

const dp = new DayPilot.Scheduler("dp", {
    onIncludeTimeCell: args => {
      if (args.cell.start.getHours() < 8 || args.cell.end.getHours() > 18) {
        args.cell.visible = false;
      }
    },
    // ... add your other options here
});

dp.init();

The onIncludeTimeCell event is more flexible and you can use it to cover more complex scenarios (e.g. irregular working hours).

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.
Tools
E-mail notifications
Feed
Related Questions
Scroll to a specific time in the day
Switch Weekly Daily
Using cellDuration with business hours
Enable specific hours in a day
Cellduration for scheduler 1 day only
Scheduler Lite: Set Scroll Position or Limit the hours displayed
How to change the displayed end date of selected range
Using MVC Calendar
Using quarters or months for CellDuration rather than days, hours, or mins etc.
Hourly range covering two consecutive days
Scale={"Manual"} with 30 minutes cells
Limit time range selecting to one day
How do I adjust the header row time format in the Scheduler?
Limit events to nights only and setting minimum cell on select

Products

Learn

Get Support

DayPilot Pro

Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars.