Axiom Scheduler (beta)

Axiom scheduler is an angular scheduler component use Momentjs.

Online 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 😊.

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 :

Name	Type	Default	Description
_id	Symbol	this member is readonly	provide a unique id for each event and could be use in delete and edit operations
from	Date	null	start date of event
to	Date	null	end date of event
data	Date	null	provide an object to store event additional data
color	string	null	color of event
locked	boolean	false	when it is true event will be locked
title	string	null	default title of event

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

Name	Type	Default	Usage
axEvents	--	AxiomSchedulerEvent [ ]	List of scheduler events
axStartDate	Date	Today	Current date of scheduler
axEventTemplate	TempateRef	--	Custom template for events
axDragStep	Number	5	Events drag and resize step
axLocale	String	'en'	Set scheduler locale, for more information of available locales, check Momentjs i18n document
axEventToolbar	boolean	false	Show/Hide events toolbar
axSchedulerView	AxiomSchedulerView	'day'	Set default scheduler view, Available views : 'day', 'week', 'month', 'year'
axViews	AxiomSchedulerView [ ]	All views	Set scheduler available views to show
axTheme	AxiomSchedulerTheme	'light'	Set default scheduler theme, Available themes : 'light', 'dark'
axAnimation	AxiomSchedulerAnimation	'default'	Set default scheduler animation effects, Available animations : 'animation1', 'animation2', 'animation3', 'animation4', 'default', 'none'
axShowLocale	boolean	true	Show/Hide locale dropdown
axShowLocale	boolean	true	Show/Hide locale dropdown

@Output() Params

Name	Event Paramaters	Description
axEventChange	AxiomSchedulerEvent	Fire when an event changed by dragging, resizing, or ...
axEventClick	AxiomSchedulerEvent	Fire when an event clicked
axEventDeleteClick	AxiomSchedulerEvent	Fire when remove button clicked from event's toolbar
axEventEditClick	AxiomSchedulerEvent	Fire when edit button clicked from event's toolbar
axDateChange	Date	Fire when date of scheduler changed by navigator
axViewChange	AxiomSchedulerView	Fire when view of scheduler changed

License

MIT

mohammadmusaei/AxiomScheduler