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

Utilize full cell when max hours = 9 hours

Asked by Praneeth
7 years ago.

I am currently evaluating the library. There is a requirement where we need to display events within a cell spanning a max of 9 hours. The issue is that when the event is added it only utilizes a portion of the days cell (please refer attached image).

How would I be able to utilize the full cell space when the number of hours are 9 and less when number of hours are less than 9?

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

If you use the default .useEventBoxes value the events will be aligned with the grid cells:

dp.useEventBoxes = "Always";

See also:

Comment posted by Praneeth
7 years ago.

I am required to use dp.useEventBoxes = "Never" as I have one or more events occuring within the same day and require them to appear in one cell in one line. Please see and example attached herewith,

I have managed to however achive the same using eh following config. However this seems to be very slow in rendering. Any ideas how I could achive the same with more efficiency?

this.config = {

// Timespan settings.
startDate: "2016-05-01", //this.displayDate,
days: 366,

// Viewport settings.
timeHeaders: [
{ groupBy: "Year" },
{ groupBy: "Quarter" },
{ groupBy: "Month" },
{ groupBy: "Week" },
{ groupBy: "Day", format: "d" }
scale: "Day", // <- Using day-wise scale
cellGroupBy: "Day", <-- Using day-wise grouping
useEventBoxes: "Never",

// Event settings.
durationBarMode: "PercentComplete",
onEventClicked: args => this.onEventSelected(args),
onIncludeTimeCell: args => this.onIncludeTimeCell(args)

onIncludeTimeCell(args) {

// Hiding cells which have a start hour greater than or equal to nine.
if (args.cell.start.getHours() >= 9) {
args.cell.visible = false;

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

You can also create a custom timeline and manually create days with start at 00:00 and end at 09:00:

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