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

Loading problem

Asked by Anonymous
3 years ago.


I currently use daylpilotjs in pro version. I have a style problematic (CSS).
When i do a fast horizontal scroll, the elements are not loaded in the order which causes a shift of my CSS.


Would it be possible on page load to load all HTML elements ?
When my page is loaded only the visible part of the elements are loaded :


When I scroll fast the HTML elements are loaded in the wrong order:


The first item loaded is not the first in the calendar :


My CSS :

.scheduler_default_matrix_vertical_line:nth-child(6n) {
background-color: #C0C0C0;

.scheduler_default_matrix_vertical_line:nth-child(6n+3) {
linear-gradient(45deg, #C0C0C0 25%, transparent 25%),
linear-gradient(-45deg, #C0C0C0 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #C0C0C0 75%),
linear-gradient(-45deg, transparent 75%, #C0C0C0 75%);
background-size: 4px 4px;
background-position: 0 0, 2px 0, 2px -2px, 0px 2px;

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

Unfortunately, the order of "scheduler_default_matrix_vertical_line" elements is not guaranteed.

If you want to display vertical lines at specified locations (e.g. to mark end of day) you can use separators:

Answer posted by Anonymous
3 years ago.


Thanks for your response.
I thought of that but it is not possible to draw a dotted separator. It is always a full separator.
So, the only workaround that I found is to customize CSS for DayPilot.

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

The separators support cssClass property that will let you define your own appearance. It could look like this:

  .dotted-separator {
    box-sizing: border-box;
    border-right: 1px dotted #ccc;


  // ...
  dp.separators = [
      location: "2019-01-01T00:00:00",
      cssClass: "dotted-separator"
  // ...

Another option would be to hide the vertical lines by setting the "background-color" style of ".scheduler_default_matrix_vertical_line" class to "transparent" and use a custom "border-right" style on selected grid cells (by setting args.cell.cssClass in onBeforeCellRender).

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