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

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

Asked by Devendra Rishi
2 years ago.

Hi,

Is there any property/ any way to display 15/30 min slots in header for angular2 daypilot scheduler control? Please find attached screenshot.

Thanks and Regards,
Devendra.

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

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
  ]
}
Comment posted by Devendra
2 years ago.

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.

Comment posted by Dan Letecky [DayPilot]
2 years ago.

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:

Comment posted by Anonymous
2 years ago.

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

Comment posted by Dan Letecky [DayPilot]
2 years ago.

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

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