@protacon/ngx-resource-calendar

NgxResourceCalendar

What is this?

Resource calendar for Angular 18+

Install

Step 1: Install @protacon/ngx-resource-calendar

$ npm install --save @protacon/ngx-resource-calendar

Step 2: Import the module

Add NgxResourceCalendarModule as an import in your app's root NgModule.

import { NgxResourceCalendarModule }  from '@protacon/ngx-resource-calendar';

@NgModule({
  ...
  imports: [
    ...
    NgxResourceCalendarModule,
  ],
  ...
})
export class AppModule { }

Usage

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

Testing locally updated package

$ npm run build
$ cd dist/ngx-resource-calendar
$ npm pack

Copy protacon-ngx-resource-calendar-0.0.1.tgz from dist/ngx-resource-calendar to other project root and change to package.json "@protacon/ngx-resource-calendar": "file:protacon-ngx-resource-calendar-0.0.1.tgz",

License

The MIT License (MIT)

Copyright (c) 2020 Pinja