Showing event versions in the same 'row'

Asked by Robin
4 years ago.

Hi all,

I'm playing with event versions and would like to display two versions above each event. The attached screenshot shows where I am now and I'd like both versions shown at the height of the green line. The version on the right is mostly obscured by the green line. The green line I have added graphically just to show the level I'd like both versions to be displayed at.

I also want to change the color of each version according to underlying data. I know the underlying (custom) data is available as part of the event object. The code I have so far is:

// start event versions
eventVersionsEnabled: true,
eventVersionHeight: 15,
eventVersionMargin: 5,
onBeforeEventRender: function(args) {
  console.log("args", args);
  args.data.versions = [
    {
      start: args.data.start,
      end: args.data.start.addMinutes(5),
      barHidden: true
    },
    {
      start: args.data.end.addMinutes(-5),
      end: args.data.end,
      barHidden: true
    }
  ];
},
// end event versions

Any ideas or alternative approaches would be great!

how-to javascript

calendar.png

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

You can do this by creating a single version (with a transparent background) and adding the two active areas inside:

onBeforeEventRender: function(args) {
    args.data.versions = [
        {
            start: args.data.start,
            end: args.data.end,
            barHidden: true,
            backColor: "transparent",
            borderColor: "transparent",
            areas: [
                { top: 0, bottom: 0, start: args.data.start, end: args.data.start.addMinutes(5), backColor: "red"},
                { top: 0, bottom: 0, start: args.data.end.addMinutes(-5), end: args.data.end, backColor: "red"},
            ]
        },
    ];
}

Comment posted by Robin
4 years ago.

Thanks Dan, that is exactly what I needed. I've now found the areas in the documentation but it doesn't clearly show that they can be added to versions. So thanks for the tip with code example. Much appreciated.

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

Showing event versions in the same 'row'

Products

Learn

Get Support

DayPilot Pro