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

Separator on TimeHeaders

Asked by CM
5 months ago.

I’m using the separators prop to add a separator to the beggining of each month.

As per your documentation i used the following code (onBeforeTimeHeaderRender function):

 let dp = planningRef1.current.control;

    var separators = dp.separators.filter(function (s) {

      return args.header.start < s.location && s.location <= args.header.end;


    separators.forEach(function (s) {

      if (!args.header.areas) {

        args.header.areas = [];


      args.header.areas = => ({

        start: s.location,

        width: 1,

        top: 0,

        bottom: 0,

        offsetX: -1,

        backColor: s.color,



I’m generating the separators dinamically:

 separators={ => ({

            location: new DayPilot.Date(date),

            color: "rgb(192, 192, 192)",


The separator appears on the “grid” but then on the TimeHeaders, sometimes it does, sometimes it doesn’t.

Is there a better way to achieve this? A vertical separator line between each month?

Answer posted by Dan Letecky [DayPilot]
5 months ago.

You might need to check the value of startOfMonth. Please make sure that it contains correct dates. My guess is that the values don’t correspond to the current view when the separators are not visible.

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