Schedule is a full-sized drag-and-drop event calendar based on a FullCalendar jQuery plugin. The events of Schedule should be formed as an array and defined using the events property. The Schedule component depends on the FullCalendar library, so it requires the following resources in your page as listed:

• The Schedule component is embedded in a web page using a style sheet and JavaScript files. So, we need to include the FullCalendar library's style sheet (.css) and JavaScript (.js) files in the HTML page's head section.
• Add jQuery and Moment.js libraries as mandatory libraries for a full calendar. These two libraries must be loaded before loading the FullCalendar library's JavaScript file.

Hence, we included FullCalendar and other dependent resources in a root index.html file as follows:

<!-- Schedule CSS resources-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/
fullcalendar.min.css">
<!-- Schedule Javascript resources-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/
fullcalendar.min.js"></script>

A basic example of the Schedule component defined for the entire month would be written as follows:

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

Basically, all kinds of events have properties such as title, duration (start and end date), type of day (full/partial day), and so on. So, the event class would be defined as follows:

export class MyEvent {
  id: number;
  title: string;
  start: string;
  end: string;
  allDay: boolean = true;
}

The data for Schedule events should be defined exactly in the preceding format as a prototype. But in real time, data is fetched using a remote service call and updated in the Schedule UI immediately whenever there are any changes in the events. The event service, which is used to retrieve data from a data source (in this case, it retrieves data from a JSON events file) using HTTP module and observables, is defined as follows:

@Injectable()
export class EventService {

  constructor(private http: Http) { }

  getEvents(): Observable<any> {
    return this.http.get('/assets/data/scheduleevents.json')
      .map(response => response.json().data);
  }
}

The injected service gets the data during the initial load of a web page. The component class has to define the subscription for observable as shown here:

events: any[];

constructor(private eventService: EventService) { }

ngOnInit() {
  this.eventService.getEvents().subscribe((events: any) => 
  {this.events = events;});
}

The following screenshot shows a snapshot result of the embedded Schedule component display as an example:

As per the preceding snapshot, the header is displayed with date (month and year), the today label, and month navigation controls. The main body or content area contains each day in the month and events on the specific days with a blue covered area.