Header customization

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...