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

Showing event versions in the same 'row'

Asked by Robin
17 days 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!

Answer posted by Dan Letecky [DayPilot]
17 days 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
17 days 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.

New Reply
This reply is
Your name (optional):