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

Separator on TimeHeaders

Asked by CM
21 days 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]
18 days 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.

New Reply
This reply is
or drop files here
Your name (optional):