Schedule Schedule is an event calendar based on FullCalendar. This sample demonstrates a crud scenario using a Dialog.

Import


import {Schedule} from 'primeng/primeng';

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;});
    }
    
}

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.


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


export class MyModel {

    es: any;

    ngOnInit() {
        this.es = {
            monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio',
                'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']
        };
    }
}

Visit the fullcalendar documentation for the available options. Existing translations are available at here.

Attributes

Name Type Description
events array An array of events to display.
header object Read more
isRTL boolean Read more
weekends boolean Read more
hiddenDays array Read more
locale object Read more
fixedWeekCount boolean Read more
weekNumbers boolean Read more
businessHours any Read more
height any Read more
contentHeight any Read more
aspectRatio any Read more
eventLimit any Read more
defaultDate any Read more
editable boolean Read more
eventStartEditable boolean Read more
eventDurationEditable boolean Read more
defaultView string Read more
allDaySlot boolean Read more
slotDuration Duration Read more
slotLabelInterval Duration Read more
snapDuration Duration Read more
scrollTime Duration Read more
minTime Duration Read more
maxTime Duration Read more
slotEventOverlap boolean Read more
nowIndicator boolean Read more
dragRevertDuration number Read more
dragOpacity number Read more
dragScroll boolean Read more
eventOverlap any Read more
eventConstraint any Read more

Events

Name Description
onDayClick Read more
onEventClick Read more
onEventMouseover Read more
onEventMouseout Read more
onEventDragStart Read more
onEventDragStop Read more
onEventDrop Read more
onEventResizeStart Read more
onEventResizeStop Read more
onEventResize Read more
viewRender Read more

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


export class MyModel {

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

Dependencies

FullCalendar.


<p-schedule [events]="events" [header]="header" defaultDate="2016-01-12" [eventLimit]="4" [editable]="true"
            (onDayClick)="handleDayClick($event)" (onEventClick)="handleEventClick($event)"></p-schedule>

<p-dialog header="Event Details" [(visible)]="dialogVisible" [responsive]="true" showEffect="fade" [modal]="false">
    <div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="event">
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="vin">Title</label></div>
            <div class="ui-grid-col-8"><input pInputText id="title" [(ngModel)]="event.title" /></div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="start">Start</label></div>
            <div class="ui-grid-col-8"><p-calendar id="start" dateFormat="yy-mm-dd" [(ngModel)]="event.start"></p-calendar></div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="end">End</label></div>
            <div class="ui-grid-col-8"><p-calendar id="end" dateFormat="yy-mm-dd" [(ngModel)]="event.end" defaultDate="2016-01-01" placeholder="Optional"></p-calendar></div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="allday">All Day</label></div>
            <div class="ui-grid-col-8"><p-toggleButton [(ngModel)]="event.allDay" style="width:150px" onLabel="Yes" offLabel="No"></p-toggleButton></div>
        </div>
    </div>
    <footer>
        <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
            <button type="button" pButton icon="fa-close" (click)="deleteEvent()" label="Delete"></button>
            <button type="button" pButton icon="fa-check" (click)="saveEvent()" label="Save"></button>
        </div>
    </footer>
</p-dialog>


export class ScheduleDemo implements OnInit {

    events: any[];
    
    header: any;
    
    event: MyEvent;
    
    dialogVisible: boolean = false;
    
    idGen: number = 100;
    
    constructor(private eventService: EventService, private cd: ChangeDetectorRef) { }

    ngOnInit() {
        this.eventService.getEvents().then(events => {this.events = events;});
        
        this.header = {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
		};
    }
    
    handleDayClick(event) {
        this.event = new MyEvent();
        this.event.start = event.date.format();
        this.dialogVisible = true;
        
        //trigger detection manually as somehow only moving the mouse quickly after click triggers the automatic detection
        this.cd.detectChanges();
    }
    
    handleEventClick(e) {
        this.event = new MyEvent();
        this.event.title = e.calEvent.title;
        
        let start = e.calEvent.start;
        let end = e.calEvent.end;
        if(e.view.name === 'month') {
            start.stripTime();
        }
        
        if(end) {
            end.stripTime();
            this.event.end = end.format();
        }

        this.event.id = e.calEvent.id;
        this.event.start = start.format();
        this.event.allDay = e.calEvent.allDay;
        this.dialogVisible = true;
    }
    
    saveEvent() {
        //update
        if(this.event.id) {
            let index: number = this.findEventIndexById(this.event.id);
            if(index >= 0) {
                this.events[index] = this.event;
            }
        }
        //new
        else {
            this.event.id = this.idGen;
            this.events.push(this.event);
            this.event = null;
        }
        
        this.dialogVisible = false;
    }
    
    deleteEvent() {
        let index: number = this.findEventIndexById(this.event.id);
        if(index >= 0) {
            this.events.splice(index, 1);
        }
        this.dialogVisible = false;
    }
    
    findEventIndexById(id: number) {
        let index = -1;
        for(let i = 0; i < this.events.length; i++) {
            if(id == this.events[i].id) {
                index = i;
                break;
            }
        }
        
        return index;
    }
}

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; });
    }
}