The Schedule component provides many event callbacks on click, mouse, resize, and drag and drop user actions as listed here:
| Name | Description |
| onDayClick | Triggered when the user clicks on a day |
| onEventClick | Triggered when the user clicks an event |
| onEventMouseover | Triggered when the user mouses over an event |
| onEventMouseout | Triggered when the user mouses out of an event |
| onEventDragStart | Triggered when event dragging begins |
| onEventDragStop | Triggered when event dragging stops |
| onEventDrop | Triggered when dragging stops and the event has moved to a different day/time |
| onEventResizeStart | Triggered when event resizing begins |
| onEventResizeStop | Triggered when event resizing stops |
| onEventResize | Triggered when resizing stops and the event has changed in duration |
| onViewRender | Triggered when a new date-range is rendered, or when the view type switches |
| onViewDestroy | Triggered when a rendered date-range needs to be torn down |
| onDrop | Triggered when a draggable has been dropped onto the Schedule |
Also, it provides many API methods to handle different use cases as shown here:
| Name | Parameters | Description |
| prev() | - | Moves the Schedule one step back (either by a month, week, or day) |
| next() | - | Moves the Schedule one step forward (either by a month, week, or day) |
| prevYear() | - | Moves the Schedule back one year |
| nextYear() | - | Moves the Schedule forward one year |
| today() | - | Moves the Schedule to the current date |
| gotoDate(date) | date: Date to navigate |
Moves the Schedule to an arbitrary date |
| incrementDate(duration) | duration: Duration to add to current date | Moves the Schedule forward/backward an arbitrary amount of time |
| getDate() | - | Returns a moment for the current date of the calendar |
| changeView(viewName) | viewName: A valid view string to change to | Immediately switches to a different view |
The preceding API methods will give full control on Schedule. There are many use cases, where these method calls are really helpful. For example, the Schedule's next view (month, week, or day) is accessed through the .next() method as shown here:
<p-schedule [events]="events" #schedule></p-schedule>
<button type="button" pButton (click)="next(schedule)"></p-button>
The component class defines the click event callback which will invoke next day, week, or month as shown here:
next(schedule) {
schedule.next();
}
The complete demo application with instructions is available on GitHub at
https://github.com/ova2/angular-development-with-primeng/tree/master/chapter5/schedule.
https://github.com/ova2/angular-development-with-primeng/tree/master/chapter5/schedule.