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

HIde empty cells

Asked by dimitris giannakakis
4 years ago.

Is it possible to hide the empty cells, the cells without an event?hide or collapsed are acceptable both

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

Which control do you mean (Calendar/Scheduler/Month)?

Comment posted by dimitris giannakakis
4 years ago.

i mean Scheduler, but if it is available in two other let me know

Answer posted by Dan Letecky [DayPilot]
4 years ago.

1. In the Scheduler (, you have the following options:

(1.A) X-Axis (Time)

You can hide certain time periods. You can do it either using onIncludeCell (which modifies the automatically-generated timeline):

or by building your own timeline:

In both cases, you need to know which cells (columns) you want to hide.

(1.B) Y-Axis (Resources)

The height of the resources row is determined by the event height (or the multiple the event height in case of overlapping events).

It is possible to reduce the height of resources that don't have any events using the following configuration:

Set the default event height:

dp.eventHeight = 10;  // this is the reduced height which will be the default for all resources

Add the normal event height to all event objects: = [
 {id: 1, ....., height: 20},
 {id: 2, ....., height: 20},

2. In the Calendar (, you can hide "non-business" hours with no events using hideFreeCells property:

dp.hideFreeCells = true;

This will only hide cells outside of the range defined using businessBeginsHour and businessEndsHour.

Besides that, you can force hiding of certain hours using dayBeginsHour and dayEndsHour properties. It works for dayBeginsHour > dayEndsHour as well (an overnight shift):

3. In the Monthly calendar ( it is only possible to hide weekend cells:

You need to decide whether to hide the weekends yourself.

Comment posted by dimitris giannakakis
4 years ago.

I have to work with minutes because our scheduler has in Y-AIXS the hours/2 (each cell has duration 30 minutes). so i have 48 cells.

I prefered the second method with custom timeline but the broswer cannot afford the rendering...

dp.timeline = [];

for (var i = 0; i < 1440; i+30) {
var hour = {};
hour.start = dp.startDate.addMinutes(i);
hour.end = hour.start.addMinutes(30);
hour.width = 100;

here is my code,

coudl you advise me something else?

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

You need to add this:

dp.scale = "Manual";

This will switch the scale to manual mode and the timeline cells will be loaded from the timeline array.

Comment posted by dimitris giannakakis
4 years ago.

Hello again,

Your ibnstruction ws helpfull thanks...

Is it possible to have dynamic width for cells, because the information is hidden in some events.Ι know the width is according to the duration of cell, but let me know if i can handle it with some way

Comment posted by dimitris giannakakis
4 years ago.

*Your ibnstruction ws helpfull thanks...

by mistake

Comment posted by dimitris giannakakis
4 years ago.

Your instructions was helpful thanks...

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

Unfortunately the width can't be changed - it is always derived from the duration and cell width.

If you want to display more information you can change the height temporarily:

dp.onEventClick = function(args) { = 50;; }

Or you can display a bubble with more details:

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