Resource calendar for Angular 17+
$ npm install --save @protacon/ngx-resource-calendarAdd NgxResourceCalendarModule as an import in your app's root NgModule.
import { NgxResourceCalendarModule } from '@protacon/ngx-resource-calendar';
@NgModule({
...
imports: [
...
NgxResourceCalendarModule,
],
...
})
export class AppModule { }Simple usage example
<pinja-resource-calendar
[dates]="dates"
[events]="events"
[startHour]="8"
[endHour]="17"
[infoTemplate]="infoTemplate"
[hourTemplate]="hourTemplate"
>
</pinja-resource-calendar>
<ng-template #infoTemplate> Info view </ng-template>
<ng-template #hourTemplate let-slot="slot">
<div>{{ slot.time | data: 'shortTime' }}</div>
</ng-template>| Attribute | Description | Template output |
|---|---|---|
dates |
Specifies the dates and resources which calendar shows | |
events |
Events to show in calendar | |
slotDurationInMinutes |
How many minutes one slot is in the hour row. Default 15 minutes. | |
height |
Heigh of one slot in pixels. Default 60px. | |
startHour |
First hour in the calendar. | |
endHour |
Last hour in the calendar. | |
infoTemplate |
A custom template to use for the header empty space top of hours. | - |
dayTemplate |
A custom template to use for day view in header | day = DateModel |
resourceTemplate |
A custom template to use for day view resource in header (below day template) | resource = ResourceModel |
hourTemplate |
A custom template to use for hour view (left to calendar) | time = Date |
eventTemplate |
A custom template to use for events | event = EventModel, resource = ResourceModel, day = DayModel |
slotTemplate |
A custom template to use for slots | slot = SlotModel, resource = ResourceModel, day = DayModel |
currentTimeTemplate |
A custom template to show current time etc. custom overlay | day = DateModel |
Copyright (c) 2020 Pinja