axiom-scheduler v2.1.5

Axiom Scheduler (beta)

Axiom scheduler is an angular scheduler component use Momentjs.

Online Demo

Usage Demo

Demo source is available here : Source

Install component package from npm :

npm install axiom-scheduler moment angular2-draggable

Axiom Scheduler also need to install @angular/animations. (By default angular will install animation module when you create a new angular project using angular CLI)

For drag and resizing feature Axiom scheduler using angular2-draggable, Thanks to xieziyu :blush:.

Import component module :

import { AxiomSchedulerModule } from 'axiom-scheduler';

...

@NgModule({
  imports: [
    AxiomSchedulerModule
  ], 
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})

...

Usage

Add ax-scheduler tag to use scheduler.

<ax-scheduler [axEventTemplate]="eventTemplate" [axSchedulerView]="'week'"
      [axEventToolbar]="true" [axAnimation]="'default" [axTheme]="'light'" [axEvents]="events"
      [axDragStep]="5" [axShowLocale]="true">
</ax-scheduler>

Events

Axiom scheduler using an AxiomSchedulerEvent array to view events. AxiomSchedulerEvent is a class that contains these members :

Custom event template

For customizing events to show you can use [axEventTemplate] parameter and design your events template.

<ng-template #t let-item="item">
   <div class="event-template">
      {{ item.data.title }} at <b> {{ item.from | date:'HH:mm' }} {{ item.to | date:'HH:mm' }} </b>
   </div>
</ng-template>

<ax-scheduler [axEventTemplate]="t" [axSchedulerView]="'week'"
      [axEventToolbar]="true" [axAnimation]="'default" [axTheme]="'light'" [axEvents]="events"
      [axDragStep]="5" [axShowLocale]="true">
</ax-scheduler>

As shown above, #t template passed to [axEventTemplate], item variable provide entire event to use in your template.

Events drag and resize

You can drag and resize events to new hours easily. For lock an event and disable drag and resize features just in event object set lock property to True.

Localization

For change scheduler locale just pass your locale to [axLocale], Always you can check available locales in Momentjs i18n document.

<ax-scheduler [axLocale]="'bm'">
</ax-scheduler>

Themes

For change scheduler theme just pass 'light' or 'dark' to [axTheme].

<ax-scheduler [axTheme]="'dark'">
</ax-scheduler>

Animations

For change scheduler theme just pass available animations shown in Input params table to [axAnimation].

<ax-scheduler [axAnimation]="'animation4'">
</ax-scheduler>

@Input() Params

@Output() Params

License

MIT