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

How to format timeheader "Week"

Related article: Angular 10 Scheduler Quick Start Project
Asked by Jesse Mom
4 months ago.

Is there a way to display the week timeheader as "Week 1", "week 2", etc?

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

Yes, you can do it using onBeforeTimeHeaderRender event handler:

import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {DayPilot, DayPilotSchedulerComponent} from 'daypilot-pro-angular';
import {DataService} from './data.service';

@Component({
  selector: 'scheduler-component',
  template: `<daypilot-scheduler [config]="config"></daypilot-scheduler>`
})
export class SchedulerComponent implements AfterViewInit {

  config: DayPilot.SchedulerConfig = {

    // ...
    timeHeaders: [
      {groupBy:"Week"},
      {groupBy:"Day",format:"d"}
    ],
    onBeforeTimeHeaderRender: args => {
      if (args.header.level === 0) {
        const week = args.header.start.weekNumberISO();
        args.header.text  = `Week ${week}`;
      }
    },

  };

  // ...

}

See also:
https://doc.daypilot.org/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.