Angular2 scheduler control not displaying 15/30 min slots in header

If you use groupBy: "Cell" in the row header definition it will display time header cells with size corresponding to the grid cells.

Example:

config: any = {
  scale: "CellDuration",   // scale determined by cellDuration value
  cellDuration: 30,     // which is 30 minutes
  timeHeaders: [
    { groupBy: "Day" },
    { groupBy: "Hour" },
    { groupBy: "Cell" }   // the last time header row will have 30-minute cells
  ]
}

Hi Dan,

Thanks for reply!!!

The above code creates the 30 min cell duration with numbers displayed in the header. I am looking for each hour to display as header but having vertical small line to be displayed on the top for every 15 min. for e.g. 8AM and 9AM displayed on UI but the small dotted lines should be displayed for each 30 min interval and small vertical line for 15 min interval. The screenshot is sent to DayPilot Forums - forums@notifications.daypilot.org mail ID since I can not attach it here in response.

Thanks,
Devendra.

I see. You should be able to achieve that by inserting custom active areas into the time headers. Active areas are translated as <div> elements inserted at the specified position inside a time header cell. You can specify the position using pixels (left/right/top/bottom/width/height). You can also replace left/right with start/end DayPilot.Date objects (the pixel position will be calculated automatically).

Something similar is demonstrated here:
http://javascript.daypilot.org/demo/scheduler/timeheaderactiveareas.html

This demo splits a month row header into thirds.

  dp.onBeforeTimeHeaderRender = function(args) {
        if (args.header.level === 0) {
            args.header.areas = [
                {right: 2, top: 2, bottom: 2, width: 20, backColor: "#ccc", html: "i", action: "JavaScript", js: function(header) { console.log(header); alert('details'); }},
            ];
        }
        else if (args.header.level === 1) {
            var point1 = args.header.start.addDays(10);
            var point2 = args.header.start.addDays(20);
            args.header.areas = [
                {start: args.header.start, end: point1, top: 0, bottom: 0, backColor: "rgba(0, 255, 0, .4)", html: "1st third"},
                {start: point1, end: point2, top: 0, bottom: 0, backColor: "rgba(255, 0, 0, .4)", html: "2nd third"},
                {start: point2, end: args.header.end, top: 0, bottom: 0, backColor: "rgba(255, 255, 255, .4)", html: "3rd third"},
            ];

            args.header.html = "";
        }
    };

See also:

Hi Dan,

I am looking for vertical | on 15 min interval. Since I cannot attach screenshot in reply. Opening new thread. - Below link has a attached screenshot - I am looking for exact same UI as given in screenshot

http://forums.daypilot.org/Topic.aspx/3610/daypilot-angular2-scheduler-control-not-displaying-15-30-mi

Please see the following new tutorial that explains the time header customization step-by-step:
https://code.daypilot.org/96228/tutorial-javascript-scheduler-time-header-customization