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

How can I add more columns on each row in headers?

Asked by Akhtar Raza
1 month ago.

I saw your tutorial on JS to add columns on headers. I'm using angular 7 I added two columns on two rows. But on the first column I'm getting a name, But how can I get the name on the second column or on more columns. I want to add a date on the first column as a full row. Can you write code here for more rows with names for angular 7 or any?

Answer posted by Dan Letecky [DayPilot]
1 month ago.

If you display multiple rows in the column header you can specify the child column content using "children" property - the columns are organized in a hierarchy (see also https://doc.daypilot.org/calendar/column-header-hierarchy/).

In your case the config could look like this:

config: DayPilot.CalendarConfig = {
  viewType: "Resources",
  headerLevels: 2,
  columns: [
    { name: "10/20/2021", children: [
        { name: "Project Name", id: "project", start: "2021-10-20" },
        { name: "Network with Contact", id: "network", start: "2021-10-20" },
        { name: "Journalist & Guest", id: "journalist", start: "2021-10-20" },
        { name: "Deliverable", id: "deliverable", start: "2021-10-20" },
        { name: "Comment", id: "comment", start: "2021-10-20" }
      ]
    }
  ]
};
Comment posted by Akhtar Raza
1 month ago.

I need 2 rows, the first with the current date and the second row with columns and their children.
what code did you mention here, I implemented it already and it is working fine. But I need the first column as a date as a full row, And the second column you saw on the screenshot or you wrote in the code.

Comment posted by Akhtar Raza
1 month ago.

Sorry for this. I got your point. Just tell me how can I add 2 3 or more columns as full rows with no children.

Comment posted by Dan Letecky [DayPilot]
1 month ago.

You can use the "children" property on any level. It is only limited by the hierarchy logic:

You can add full-width row at the top level (use "children" array with one item) but not at the bottom. The total width of all children is always the parent width.

Comment posted by Akhtar Raza
1 month ago.

Thanks for replying. How can I display dummy data on this? I'm using events:any =[], But it is not working.

events: any[] = [
    {
      id: '1',
      resource: 'R1',
      start: '2020-07-04',
      end: '2020-07-09',
      text: 'Meeting 1',
    },
    {
      id: '2',
      resource: 'R3',
      start: '2020-07-03',
      end: '2020-07-06',
      text: 'Meeting 2',
    },
  ];

<daypilot-calendar [config]="configDay" [events]="events" #day #scheduler></daypilot-calendar>

Comment posted by Dan Letecky [DayPilot]
1 month ago.

You need to make sure that the "resource" value matches the column id (i.e. columns[].id or columns[].children[].id etc.).

You can display the event in the header if you enable all-day events (https://doc.daypilot.org/calendar/all-day-events/):

config = {
  showAllDayEvents: true,
  ...
}

You also need to mark the event as all-day using "allday" property:

events: any[] = [
  {
    id: '1',
    resource: 'project',
    start: '2021-10-20',
    end: '2021-10-20',
    text: 'Meeting 1',
    allday: true
  },
];

Just note that in the viewType: "Resources" mode the all-day event will only be displayed in one column.

New Reply
This reply is
Your name (optional):