import {Schedule} from 'primeng/primeng';
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 object has various properties to define an event, refer to official documentation for the whole list.
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 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.
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 |
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
}
}
Name | Parameters | Description |
---|---|---|
prev() | - | Read more |
next() | - | Read more |
prevYear() | - | Read more |
nextYear() | - | Read more |
today() | - | Read more |
gotoDate(date) | date: Date to navigate | Read more |
incrementDate(duration) | duration: Duration to add to current date | Read more |
getDate() | - | Read more |
<p-schedule [events]="events" #fc></p-schedule>
<button type="button" pButton (click)="back(fc)"></p-button>
export class MyModel {
back(fc) {
fc.prev();
}
}
<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; });
}
}