Loading problem

Asked by Anonymous
5 years ago.

Hello,

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.

[screen_1]

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 :

[screen_2]

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

[screen_3]

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

[screen_4]

My CSS :

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

.scheduler_default_matrix_vertical_line:nth-child(6n+3) {
background-image:
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;
}

javascript

Answer posted by Dan Letecky [DayPilot]
5 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:
https://doc.daypilot.org/scheduler/separators/

Answer posted by Anonymous
5 years ago.

Hi,

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]
5 years ago.

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


<style>
  .dotted-separator {
    box-sizing: border-box;
    border-right: 1px dotted #ccc;
  }
</style>

...

<script>
  // ...
  dp.separators = [
    {
      location: "2019-01-01T00:00:00",
      cssClass: "dotted-separator"
    }
  ];
  // ...
</script>

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 1 months old and has been closed. Please create a new question if you have anything to add.

Loading problem

Products

Learn

Get Support

DayPilot Pro