Skip to content

Latest commit

 

History

History
83 lines (64 loc) · 3.82 KB

README.md

File metadata and controls

83 lines (64 loc) · 3.82 KB

NgxResourceCalendar

What is this?

Resource calendar for Angular 19+

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