In the previous snapshot, we observed the Schedule content area along with default header text and controls. The default header configuration object for the Schedule element would be written as follows:

{
  left: 'title', 
  center: '',
  right: 'today prev,next'
}

The mentioned default header display is modified through the header property, which holds the header configuration object as shown here:

<p-schedule [events]="events" [header]="headerConfig" [height]="700"
  [styleClass]="'schedule-width'"></p-schedule>

Let's define the navigation controls on the left-hand side, title in the middle, and type of view (month, week, and day) on the right-hand side to represent it as a configuration object:

this.headerConfig = {
  left: 'prev,next today',
  center: 'title',
  right: 'month,agendaWeek,agendaDay'
};

The following screenshot shows a snapshot result of the customized Schedule's header as an example: