PacemScheduleElement is a comprehensive calendar component which wraps both calendar (date-based) and agenda (time-based) elements.

Demo

In the following example you can test navigation possibilities triggered by events both external and internal to the schedule.

Example:

Rules

The <pacem-schedule> element in the above demo also contains a <pacem-calendar-daysofweek-rule> which only enables work days.
Several rule constraint elements (hour-based, festivities-based, ...) will be rolled out in the forthcoming versions of Pacem JS.

Disabled day- or time-slots can be set straight by assigning arrays (of type: { from?: Date, to?:Date }[]) to the disabledRanges property of a schedule/agenda/calendar.

Events

Calendar Events (in the sense of appointments) can be added in the form of <pacem-calendar-event> child elements. They get seamlessly rendered onto the calendar/agenda grids.