Overlay to indicate days has past

Asked by Ramgaard
8 years ago.

Is there a function to make an overlay or gray out past days (the right side of the black line).

I still want to be able to see old task in scheduler.

I have tried with:

cell.backColor
cell.cssClass

But I don't get the result i want, in weekends it does not look that good because i use cell.backColor for highlightig weekend, and can't force my shaded image to go on top of the cell without it goes in front of task.

But maybe there is a standard way to do this?

Thank you

sample.png

sample2.png

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

One option is to add custom CSS (using cell.cssClass) and create styles for all different combinations of classes (they are all applied at the same level): .scheduler_default_cell, .scheduler_default_cellparent, .scheduler_default_cell_business + your custom class.

Another option is to insert an active area into the past cells. If you add a semi-transparent image as a background or add opacity style it will still display the original cell background.

This example adds stripes to past cells using an overlay active area:

dp.onBeforeCellRender = function(args) {
  if (args.cell.start < DayPilot.Date.today()) {
      args.cell.areas = [
          { left: 0, right: 0, top: 0, bottom: 0, style: "background-image: linear-gradient(135deg, #ddd 10%, transparent 10%, transparent 50%, #ddd 50%, #ddd 60%, transparent 60%, transparent); background-size: 20px 20px;" }
      ];
  }
};

Comment posted by Ramgaard
8 years ago.

Thank you!

And thanks for the great support!

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