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

All day events on month view

Asked by Tom
4 years ago.

I'm looking to create a single event per cell on month view.

I've added - 'dp.showAllDayEvents = true' to my initial setup and set "allday": "true" into each of my event data objects but I can still add multiple events onto a day cell.

Is there a way to fix this? Am I missing something?

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

The month view (DayPilot.Month class) doesn't recognize all-day events because they are displayed the same way as normal events. Unlike the Calendar which displays them in a special row below the day headers:

http://javascript.daypilot.org/demo/calendar/allday.html

In order to prevent creating events in cells with events you can use onTimeRangeSelect event and check the selected time range using dp.events.forRange() method (dp.event.forRange() is available since build 8.1.1912).

dp.onTimeRangeSelect = function(args) {
  if (!dp.events.forRange(args.start, args.end).isEmpty()) {
    dp.message("There are existing events in the selected day range");
    args.preventDefault();  // stops further processing, prevents also onTimeRangeSelected from being fired
  }
};
dp.onTimeRangeSelected = function(args) {
  // open the dialog for entering new event details...
};

You can download build 8.1.1912 in the sandbox:

http://javascript.daypilot.org/sandbox/

The scheduler solves this problem in a more elegant way - you can simply set .allowEventOverlap = false:

http://javascript.daypilot.org/demo/scheduler/eventoverlapping.html

It will prevent onTimeRangeSelect from being fired and the selection color is changed to red in real time. However, this is not yet implemented in the Month control.

Comment posted by Tom
4 years ago.

Thanks for the response Dan. I'll look into the provided .forRange method.

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