https://github.com/mohammadmusaei/axiomscheduler
An Angular (Version > = 2.0) Scheduler component with multiple view modes,themes and animations.
https://github.com/mohammadmusaei/axiomscheduler
angular angular2 javascript scheduler typescript
Last synced: about 1 year ago
JSON representation
An Angular (Version > = 2.0) Scheduler component with multiple view modes,themes and animations.
- Host: GitHub
- URL: https://github.com/mohammadmusaei/axiomscheduler
- Owner: mohammadmusaei
- Created: 2019-01-31T20:48:43.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T22:20:38.000Z (over 3 years ago)
- Last Synced: 2025-04-12T20:12:44.196Z (about 1 year ago)
- Topics: angular, angular2, javascript, scheduler, typescript
- Language: TypeScript
- Homepage: http://app.musaei.me/angular/scheduler/
- Size: 2.06 MB
- Stars: 10
- Watchers: 3
- Forks: 11
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Axiom Scheduler (beta)
Axiom scheduler is an angular scheduler component use [Momentjs](https://momentjs.com/).
### Online Demo
[Usage Demo](https://mohammadmusaei.github.io/axiom-scheduler-demo)
Demo source is available here : [Source](https://github.com/mohammadmusaei/AxiomScheduler/tree/master/src)
##### 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](https://github.com/xieziyu/angular2-draggable), Thanks to [xieziyu](https://github.com/xieziyu) :blush:.
##### Import component module :
```typescript
import { AxiomSchedulerModule } from 'axiom-scheduler';
...
@NgModule({
imports: [
AxiomSchedulerModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
...
```
### Usage
Add `ax-scheduler` tag to use scheduler.
```html
```
### 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.
```html
{{ item.data.title }} at {{ item.from | date:'HH:mm' }} {{ item.to | date:'HH:mm' }}
```
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](https://momentjs.com/docs/#/i18n/).
```html
```
### Themes
For change scheduler theme just pass 'light' or 'dark' to `[axTheme]`.
```html
```
### Animations
For change scheduler theme just pass available animations shown in [Input params table](###@Input()-Params) to `[axAnimation]`.
```html
```
### @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](https://momentjs.com/docs/#/i18n/) |
| 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](http://opensource.org/licenses/MIT)