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

Dynamically update Navigator

Asked by FM
1 year ago.

Hello,

From what I saw and based on Dan's answers, the Navigator CSS customization much depends on:
https://api.daypilot.org/daypilot-navigator-onbeforecellrender/

But this is not really adequate when the CSS customization depends on events happening on the Calendar.

Ex: if I want to have my background Navigator cells in Red when I do not have 7 hours of meetings during the day
1) I only managed to get the current week complying (bug or wrong programming)
2) If I add new events on the calendar and even with a nav.update(), it won't refresh with the rules I set up.

Note that the code to check if the weeks is correct as I append a text node with the weeks full or not and it correctly works as expected. Only the Navigator does not answer correctly:

Code is of this type:

for (var key in sEvents)
{
if (sEvents[key] == false)
{
var textNode = document.createTextNode(key+' ');
$("#sIncomplete").append(textNode);

nav.onBeforeCellRender = function(args)
{ var tempDate =DayPilot.Date(args.cell.day.value);
if (tempDate.weekNumberISO() == key)
{
args.cell.cssClass="layout_day";}
}
}

nav.update();

Thanks !!

Answer posted by Dan Letecky [DayPilot]
1 year ago.

I'm not sure if this is what you are looking for but the Navigator supports highlighting busy days (days with events) out of the box. You can supply the an array with events in the same format that is used for the calendar/scheduler:

https://doc.daypilot.org/navigator/highlighting-busy-days/

It will mark days that have events with "navigator_default_busy" CSS class.

Comment posted by FM
1 year ago.

OK, I saw that but 2 questions on this please:

1) Is it possible to change the "navigator_default_busy" CSS class ? I thought it was through custom CSS class but apparently the behaviour does not change. It seems hard coded in the DayPilot js ?

2) How do you select only 1 day for example ? I tried same day value for both start and end without the expected result

Thanks.

Answer posted by FM
1 year ago.

To help others:
1) It is indeed in DayPilot.js. It is possible to change the css there
2) To get only day D selected as busy, you need to define day D as the start and Day D+1 as the end (which is kind of buggy to me). The top would be able to put a list of days in the events.list function instead of a range (or both).

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