Import

import {ScheduleModule} from 'primeng/schedule';

Getting Started

Schedule is based on FullCalendar. For a complete documentation and samples please refer to the fullcalendar website. Events of schedule should be an array and defined using the events property.

<p-schedule [events]="events"></p-schedule>

export class MyModel {

    events: any[];

    ngOnInit() {
        this.events = [
            {
                "title": "All Day Event",
                "start": "2016-01-01"
            },
            {
                "title": "Long Event",
                "start": "2016-01-07",
                "end": "2016-01-10"
            },
            {
                "title": "Repeating Event",
                "start": "2016-01-09T16:00:00"
            },
            {
                "title": "Repeating Event",
                "start": "2016-01-16T16:00:00"
            },
            {
                "title": "Conference",
                "start": "2016-01-11",
                "end": "2016-01-13"
            }
        ];
    }
    
}

In a real application, it is likely to populate the events by making a service call, when the events are updated, schedule component will detect the change and render them.

@Injectable()
export class EventService {
    
    constructor(private http: Http) {}

    getEvents() {
        return this.http.get('showcase/resources/data/scheduleevents.json')
                    .toPromise()
                    .then(res => <any[]> res.json().data)
                    .then(data => { return data; });
    }
}

export class MyModel {

    events: any[];

    ngOnInit() {
        this.eventService.getEvents().then(events => {this.events = events;});
    }
    
}

Lazy Loading

onViewRender call is used to implement lazy loading which is triggered when a new date-range is rendered or when the view type changes.

<p-schedule [events]="events" (onViewRender)="loadEvents($event)"></p-schedule>

loadEvents(event) {
    let start = event.view.start
    let end = event.view.end
    this.events = this.eventService.getEvents().then(events => {this.events = events;});
}

Event API

Event object has various properties to define an event, refer to official documentation for the whole list.

Header Customization

Header is customized using the header property that takes an object as its value. Default configuration is;

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

Here is a customized version of header.

<p-schedule [events]="events" [header]="headerConfig"></p-schedule>

export class MyModel {

    events: any[];
    
    headerConfig: any;

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

Localization

Localization for different languages and formats is defined by binding the settings object to the locale property. Following is a schedule with Spanish month names. The locale file should also be included in your project, read more at here.

<p-schedule [events]="events" locale="es"></p-schedule>

Properties

Events

<p-schedule [events]="events" [header]="headerConfig" (onEventClick)="handleEventClick($event)"></p-schedule>

export class MyModel {

    handleEventClick(e) {
        //e.calEvent = Selected event
        //e.jsEvent = Browser click event
        //e.view = Current view object
    }
    
}

Methods

<p-schedule [events]="events" #fc></p-schedule>

<button type="button" pButton (click)="back(fc)"></button>

export class MyModel {

    back(fc) {
        fc.prev();
    }
    
}

Dependencies

FullCalendar.

<p-schedule [events]="events" [header]="header" defaultDate="2017-02-01" [eventLimit]="4" [editable]="true"></p-schedule>

export class ScheduleDemo implements OnInit {

    events: any[];

    header: any;
            
    constructor(private eventService: EventService) { }

    ngOnInit() {
        this.eventService.getEvents().then(events => {this.events = events;});
        
        this.header = {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        };
    }

}

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

@Injectable()
export class EventService {
    
    constructor(private http: Http) {}

    getEvents() {
        return this.http.get('showcase/resources/data/scheduleevents.json')
                    .toPromise()
                    .then(res => <any[]> res.json().data)
                    .then(data => { return data; });
    }
}