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

cells don't appear with background color

Asked by João Louro
1 year ago.

Hello,

I'm currently developing a website that gives some use to your calendar js api.

When I'm on day scale and I try to set the background color on 7 days (357 cells) not all of them show up with the designated color until i horizontally scroll the calendar.
If I'm on week scale no color shows at all.

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

Are you using the latest DayPilot Pro version? This normally shouldn't happen and I'm not able to reproduce this problem.

Anyway, as a workaround you can also call:

dp.show();

It has the same effect as scrolling a bit - it renders any missing element in the viewport.

Comment posted by João Louro
1 year ago.

I'm using the trial version of the pro version.
Apparently on week scale when I try to compare endDate <= enventEndDate it returns false and does not set the background color for the calendar.
I will try to use dp.show().

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

Can you please post a sample of your code?

Calling dp.show() will only help with rendering errors - it doesn't change any date-based logic.

Comment posted by João Louro
1 year ago.

dp.onBeforeCellRender = function(args) {
var start = args.cell.start.getDatePart().value;
var end = args.cell.end.getDatePart().value;
var resource = args.cell.resource;

if ((resource == "Sys_1" ||resource == "Env_1") && ( "2017-01-01T00:00:00" <= start && "2017-01-07T00:00:00" >= end)) {
args.cell.html = "<div style='position:absolute;right:2px;bottom:2px;font-size:8pt;color:#666;'>Refresh</div>";
args.cell.backColor = "#ffffd5";
}
...
}

like this it will set the background color to days and not week scale, if i switch the <= for >= and vice versa the background will be set on week scale but not day scale.

Also on day scale day 7 on jan will have a custom bg color.

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

The problems seems to be with the end date: The 7-day week starting on Jan 1 ("2017-01-01T00:00:00") ends at "2017-01-08T00:00:00" not at "2017-01-07T00:00:00".

You can try something like this:

dp.onBeforeCellRender = function(args) { 
  var start = args.cell.start; 
  var end = args.cell.end; 
  var resource = args.cell.resource;

  var overlaps = DayPilot.Util.overlaps(new DayPilot.Date("2017-01-01T00:00:00"), new DayPilot.Date("2017-01-08T00:00:00"), start, end);

  if ((resource == "Sys_1" ||resource == "Env_1") && overlaps) { 
    args.cell.html = "<div style='position:absolute;right:2px;bottom:2px;font-size:8pt;color:#666;'>Refresh</div>"; 
    args.cell.backColor = "#ffffd5"; 
  } 
  ... 
}
Comment posted by João Louro
1 year ago.

That won't work when filling in the resource "Sys_1" on both week and day scale, but it does work on "Env_1" on both scales.

On sys_1 it will fill the whole row instead on only feelling in part of it.

Comment posted by João Louro
1 year ago.

If the condition is set like bellow it will work:

if ((resource == "Sys_1" && overlaps) || (resource == "Env_1" && overlaps))

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