[VUE 3] Split event in 3 segments

[asikamiotis]

Is it possible to split an event in 3 segments ;

Looking for something like the percentage bar, but in a way to use a date in the timespan to split the event and not a percentage.

I have tried event segments but i am forced to leave a day gap between each one which is something i want to avoid.

Also i would love to use a pattern to shade each segment instead of a different color.

[mats]

Sure, that's how segments work - you split them by dates:

Also you can put a cls on each segment to give yourself a CSS class on the element to use for styling.

{
                "id"             : 12,
                "name"           : "Configure firewall",
                "percentDone"    : 50,
                "startDate"      : "2019-01-14",
                "rollup"         : true,
                "duration"       : 4,
                "endDate"        : "2019-01-17",
                "showInTimeline" : true,
                "segments"       : [
                  {
                    "name"      : "DDOS",
                    "startDate" : "2019-01-14",
                    "endDate"   : "2019-01-18", 
                    "cls" : "myStyle"
                  },
                  {
                    "name"      : "Ports",
                    "startDate" : "2019-01-21",
                    "endDate"   : "2019-01-22"
                  },
                  {
                    "name"      : "Malware",
                    "startDate" : "2019-01-24",
                    "endDate"   : "2019-01-26"
                  }
                ]
              },

[asikamiotis]

Thank you using cls property with a custom class i can do patterns.