Skip to content

Latest commit

 

History

History
293 lines (238 loc) · 18.1 KB

README.md

File metadata and controls

293 lines (238 loc) · 18.1 KB
Raw

Angular Time Scheduler

GitHub issues GitHub forks GitHub stars GitHub license latest npm

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