Skip to content

A calendar for Angular 2+ focused on displaying long intervals, with an infinite scrollable view.

Notifications You must be signed in to change notification settings

ANovokmet/angular-holiday-planner

Repository files navigation

AngularHolidayPlanner

This library consists of two calendar components. Resource view which displays a scrollable overview of several people's calendars through months, and a Calendar view which displays a single calendar containing several months, and shows a single person's calendar.

You will understand once you see the Demo.

Installation

npm install angular-holiday-planner --save

Usage

import { AngularHolidayPlannerModule } from 'projects/angular-holiday-planner';

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

Components

Resource view

<ahp-resource-view [rows]="rows"></ahp-resource-view>

Row

Options for a single row in the view.

  • id - Unique ID of row.
  • title {string} - Title used by the default row template.
  • subtitle {string} - Subtitle used by the default row template.
  • img {string} - URL to an image. Used by the default row template.
  • days {Day[]} - Days to mark on the resource view.

Day

Options for a single day (of resource) in the view.

  • date (DayJs) - Date of rendered day.
  • class (string|string[]) - Classes to apply to the date cell.

Inputs

  • rows (Resource[]) - List of resource objects that will render in the component.
  • startDate {Dayjs} - Date the view will center on initially. By default this is the current date.
  • sideContainerWidth {string} - Width of the side container, eg. '200px'
  • maxDate {Dayjs} - Maximum date the view will be scrollable to. No more days will load upon reaching this date. Infinite scroll must be true for this property to work.
  • minDate {Dayjs} - Minimum date the view will be scrollable to. No more days will load upon reaching this date. Infinite scroll must be true for this property to work.
  • infiniteScroll {bool} - if true more days will load upon scrolling to the end of the container.
  • customDays - Object containing custom days on the time line. Can specify custom classes to apply on a specific day, eg. holiday. Keys of object should be dates in 'DDMMYYYY' format, and values should be Day objects containing CSS classes to apply.
  • getClassFn {(Dayjs) => string | string[]} - Function that gets classes for a day cell.
  • getHeaderClassFn {(Dayjs) => any} - Function that gets the classes that get applied to a day header cell.
  • getDayValueFn {(Dayjs) => any} - Function that sets value of a day cell.
  • getDayHeaderFn {(Dayjs) => any} - Function that sets the labels in a day header cell.

Outputs

  • rowClick - Emits when a resource is clicked.
  • dayClick - Emits when a specific resource date is clicked.
  • headerClick - Emits when date header is clicked (name of day, eg. "M")

Methods

  • centerOn(date, behavior = 'smooth') - Scrolls the view to a specific day.

Directives

  • *resourceViewRow - Custom template to show as a row header (resource info card).
  • *resourceViewTitle - Custom template to show instead of the current time range displayed in the title.

Calendar view

<ahp-calendar-view [days]="days"></ahp-calendar-view>

Inputs

  • days {Day[]} - List of day objects to display on the calendar.
  • from {DayJs} - Date the calendar starts on.
  • to {DayJs} - Date the calendar ends on.

Outputs

  • dayClick - Emits when a specific resource date is clicked.

Development

To start a development build

    npm run start

The app should be running at http://localhost:4200.