Angular Time Scheduler

A simple Angular Timeline Scheduler library

Installation

Install via NPM

npm i ngx-time-scheduler

Note: v2.0.0 is compatible with Angular v15.0.0+

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 use 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.
showHeaderTitle	No	boolean	true	Whether the header title should be displayed.
showActionButtons	No	boolean	true	Whether the buttons on header should be displayed.
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 use 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.
locale	No	string	`` (empty === 'en')	To load a locale, pass the key and the string values to moment.locale. By default, Moment.js uses English (United States) locale strings.

NOTE: Date locale is currently not available for Goto(button) datepicker. It will apply a date locale as per the user's system setting. Feel free to provide suggestions.

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	Required	Default	Description
name	string	Yes	null	The name is use to select the period and should be unique.
classes	string	Yes	null	Any css classes you wish to add to this item.
timeFramePeriod	number	Yes	null	The number of minutes between each "Timeframe" of the period.
timeFrameOverall	number	Yes	null	The total number of minutes that the period shows.
timeFrameHeaders	string[]	Yes	null	An array of momentjs formats which is use 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.
timeFrameHeadersTooltip	string[]	No	null	An array of momentjs formats which is use to display the tooltip of 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.
tooltip	string	No	null	It is use to display tooltip on period button.

Section

Sections used to fill the scheduler.

Name	Type	Required	Default	Description
id	number	Yes	null	A unique identifier for the section.
name	string	Yes	null	The name to display for the section.
tooltip	string	No	null	It is use to display tooltip for the section.

Item

Items used to fill the scheduler.

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

Text

An object containing the text use 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'
HeaderTitle	string	null

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.
PeriodChange	start: moment.Moment, end: moment.Moment	void	Triggered when an period is change.

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

Demo

Demo

Credits

This time scheduler is based on the work done by Zallist.

License

MIT license