Angular scheduler week display on header

Asked by Li
4 years ago.

1.
I will display two week45. how to correct display week number? Week45 Week46 Week47

2.
How to display two month work day in the scheduler? ( Nov & Dec )

Below are angular scheduler code.

config: any = {
    eventHeight: 40,
    cellWidthSpec: "Auto",
    cellWidth: 60,
    timeHeaders: [ { "groupBy": "Month" },{"groupBy":"Week"},{"groupBy":"Day", format: "d"}],
    scale: "CellDuration",
    cellDuration: 1440,
    showNonBusiness: false,
    treePreventParentUsage: true,
    days: DayPilot.Date.today().daysInMonth(),
    startDate: DayPilot.Date.today().firstDayOfMonth(),
    timeRangeSelectedHandling: "Enabled",
    treeEnabled: true,
    onBeforeTimeHeaderRender: args=> {
      if (args.header.level===1) {
        args.header.html = "Week "+ args.header.start.weekNumberISO();
      }
    },
    onBeforeEventRender: args => {
      args.data.backColor = args.data.color;
      args.data.html = "<div>" + args.data.text + "<br><span class='task-duration'>" + new DayPilot.Duration(args.data.start, args.data.end).totalHours() + " hours</span></div>";
      args.data.areas = [
        { top: 5, right: 3, height: 12, icon: "icon-triangle-down", visibility: "Hover", action: "ContextMenu", style: "font-size: 12px; background-color: rgba(255, 255, 255, .5); border: 1px solid #aaa; padding: 3px; cursor:pointer;" }
      ];
    },

how-to modal

scheduler.png

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

1. The default locale ("en-us") defines weekStart: 0 (i.e. Sunday) but the weekNumberISO() method only works for weekStart: 1 (Monday). You'll need to override it in the config:

config: DayPilot.SchedulerConfig = {
  weekStarts: 1
  // ...
}

2. You'll need to increase the "days" value:

config: DayPilot.SchedulerConfig = {
  days: DayPilot.Date.today().daysInMonth() + DayPilot.Date.today().addMonths(1).daysInMonth(),
  startDate: DayPilot.Date.today().firstDayOfMonth(),
  // ...
}

Comment posted by Li
4 years ago.

Thank you very much!! it is good answer!!

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

Angular scheduler week display on header

Products

Learn

Get Support

DayPilot Pro