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

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" }
      ]
    }
  ]
};

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.

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.

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.

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>

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.