Package Exports

ngx-time-scheduler

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-time-scheduler) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Angular Time Scheduler

A simple Angular Timeline Scheduler library

Installation

Install via NPM

npm i ngx-time-scheduler

Getting Started

Import the NgxTimeSchedulerModule in your app module.

import {NgxTimeSchedulerModule} from 'ngx-time-scheduler';

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

Use ngx-ts in your app-component.html template.

<ngx-ts
  [items]="items"
  [periods]="periods"
  [sections]="sections"
  [events]="events"
  [showBusinessDayOnly]="false"
  [allowDragging]="true"
></ngx-ts>

And in your app.component.ts component class:

import {Component, OnInit} from '@angular/core';
import {Item, Period, Section, Events, NgxTimeSchedulerService} from 'ngx-time-scheduler';
import * as moment from 'moment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  events: Events = new Events();
  periods: Period[];
  sections: Section[];
  items: Item[];

  constructor(private service: NgxTimeSchedulerService) {}

  ngOnInit() {
    this.events.SectionClickEvent = (section) => { console.log(section); };
    this.events.ItemClicked = (item) => { console.log(item); };
    this.events.ItemDropped = (item) => { console.log(item); };

    this.periods = [
      {
        name: '3 days',
        timeFramePeriod: (60 * 3),
        timeFrameOverall: (60 * 24 * 3),
        timeFrameHeaders: [
          'Do MMM',
          'HH'
        ],
        classes: 'period-3day'
      }, {
        name: '1 week',
        timeFrameHeaders: ['MMM YYYY', 'DD(ddd)'],
        classes: '',
        timeFrameOverall: 1440 * 7,
        timeFramePeriod: 1440,
      }, {
        name: '2 week',
        timeFrameHeaders: ['MMM YYYY', 'DD(ddd)'],
        classes: '',
        timeFrameOverall: 1440 * 14,
        timeFramePeriod: 1440,
      }];

    this.sections = [{
      name: 'A',
      id: 1
    }, {
      name: 'B',
      id: 2
    }, {
      name: 'C',
      id: 3
    }, {
      name: 'D',
      id: 4
    }, {
      name: 'E',
      id: 5
    }];

    this.items = [{
      id: 1,
      sectionID: 1,
      name: 'Item 1',
      start: moment().startOf('day'),
      end: moment().add(5, 'days').endOf('day'),
      classes: ''
    }, {
      id: 2,
      sectionID: 3,
      name: 'Item 2',
      start: moment().startOf('day'),
      end: moment().add(4, 'days').endOf('day'),
      classes: ''
    }, {
      id: 3,
      sectionID: 1,
      name: 'Item 3',
      start: moment().add(1, 'days').startOf('day'),
      end: moment().add(3, 'days').endOf('day'),
      classes: ''
    }];

  }

  addItem() {
    this.service.itemPush({
      id: 4,
      sectionID: 5,
      name: 'Item 4',
      start: moment().startOf('day'),
      end: moment().add(3, 'days').endOf('day'),
      classes: ''
    });
  }

  popItem() {
    this.service.itemPop();
  }

  removeItem() {
    this.service.itemRemove(4);
  }

}

Inputs

Name	Required	Type	Default	Description
periods	Yes	Period[]	`null`	An array of `Period` denoting what periods to display and used to traverse the calendar.
sections	Yes	Section[]	`null`	An array of `Section` to fill up the sections of the scheduler.
items	Yes	Item[]	`null`	An array of `Item` to fill up the items of the scheduler.
events	No	Events	`new Events()`	The events that can be hooked into.
currentTimeFormat	No	string	`'DD-MMM-YYYY HH:mm'`	The momentjs format to use for concise areas, such as tooltips.
showCurrentTime	No	boolean	`true`	Whether the current time should be marked on the scheduler.
showGoto	No	boolean	`true`	Whether the Goto button should be displayed.
showToday	No	boolean	`true`	Whether the Today button should be displayed.
showBusinessDayOnly	No	boolean	`false`	Whether business days only displayed (Sat-Sun).
allowDragging	No	boolean	`false`	Whether or not dragging should be allowed.
headerFormat	No	string	`'Do MMM YYYY'`	The momentjs format to use for the date range displayed as a header.
minRowHeight	No	number	`40`	The minimum height, in pixels, that a section should be.
maxHeight	No	number	`null`	The maximum height of the scheduler.
text	No	Text	`new Text()`	An object containing the text used in the scheduler, to be easily customized.
start	No	moment	`moment().startOf('day')`	The start time of the scheduler as a moment object. It's recommend to use `.startOf('day')` on the moment for a clear starting point.

Methods

Object with properties which create periods that can be used to traverse the calendar.

Name	Parameter	Return Type	Description
itemPush	item: Item	`void`	Push the new item object into the existing one.
itemPop	`None`	`void`	Pop the last item from the existing one.
itemRemove	id: number	`void`	Remove the item with defined item id from the existing one.
sectionPush	section: Section	`void`	Push the new section object into the existing one.
sectionPop	`None`	`void`	Pop the last section from the existing one.
sectionRemove	id: number	`void`	Remove the section with defined section id from the existing one.
refresh	`None`	`void`	Refresh the scheduler view.

Models

Period

Object with properties which create periods that can be used to traverse the calendar.

Name	Type	Default	Description
name	string	`null`	The name is used to select the period and should be unique.
classes	string	`null`	Any css classes you wish to add to this item.
timeFramePeriod	number	`null`	The number of minutes between each "Timeframe" of the period.
timeFrameOverall	number	`null`	The total number of minutes that the period shows.
timeFrameHeaders	string[]	`null`	An array of momentjs formats which is used to display the header rows at the top of the scheduler. Rather than repeating formats, the scheduler will merge all cells which are followed by a cell which shows the same date. For example, instead of seeing "Tuesday, Tuesday, Tuesday" with "3pm, 6pm, 9pm" below it, you'll instead see "Tuesday" a single time.

Section

Sections used to fill the scheduler.

Name	Type	Default	Description
id	number	`null`	A unique identifier for the section.
name	string	`null`	The name to display for the section.

Item

Items used to fill the scheduler.

Name	Type	Default	Description
id	number	`null`	An identifier for the item (doesn't have to be unique, but may help you identify which item was interacted with).
name	string	`null`	The name to display for the item.
start	any	`null`	A Moment object denoting where this object starts.
end	any	`null`	A Moment object denoting where this object ends.
classes	string	`null`	Any css classes you wish to add to this item.
sectionID	number	`null`	The ID of the section that this item belongs to.

Text

An object containing the text used in the scheduler, to be easily customized.

Name	Type	Default
NextButton	string	`'Next'`
PrevButton	string	`'Prev'`
TodayButton	string	`'Today'`
GotoButton	string	`'Go to'`
SectionTitle	string	`'Section'`

Events

A selection of events are provided to hook into when creating the scheduler, and are triggered with most interactions with items.

Name	Parameters	Return type	Description
ItemClicked	item: Item	void	Triggered when an item is clicked.
ItemContextMenu	item: Item, event: MouseEvent	void	Triggered when an item is righted click (Context Menu).
SectionClickEvent	section: Section	void	Triggered when a section is clicked.
SectionContextMenuEvent	section: Section, event: MouseEvent	void	Triggered when a section is righted click (Context Menu).
ItemDropped	item: Item	void	Triggered when an item is dropped onto a section. `item` is the new data after the action.

NOTE: To prevent the default context menu of the browser, use event.preventDefault() in event.ItemContextMenu() or event.SectionContextMenuEvent() function.

JSPM

ngx-time-scheduler