npm install angular-scheduler
http://www.dijit.fr/demo/angular-weekly-scheduler/

https://embed.plnkr.co/CImLQFfbd64JFezNBTWQ/
```
git clone https://github.com/fmaturel/angular-weekly-scheduler.git && cd angular-weekly-scheduler
npm install
npm install -g grunt-cli
Then run
grunt serve:dist
> bower install --save angular-weekly-scheduler
or
> npm install --save angular-weekly-scheduler
Add the scripts and css to your index.html.
The angular-locale_xx-xx.js file is your locale file
``
Add dependency to timeline your angular module: weeklyScheduler.
Use the directive:
This directive displays a weekly item scheduler. You can see, add and modify items easily.
* Use mouse wheel on schedule to scroll left and right
* Use ctrl + mouse wheel to zoom in and out the schedule
:information_source: This directive uses MomentJS to position items and calculate localized calendar weeks.
Drag the time bar start, end and body to quickly change your schedule period.
You can set an editable variable on each item, that will be used to disable item edition if false.`javascript`
"items": [{
"label": "Item 1",
"editable": false,
"schedules": [
{
"start": "2015-12-26T23:00:00.000Z",
"end": "2016-07-31T22:00:00.000Z"
}
]
}, ...]
This directive is using ng-transclude so that everything in element will be treated as the labelling object of one item.
``{{::$index + 1}}. {{item.label}}
On transcluded item label, the scope contains item attribute name containing each item model and regular ng-repeat :repeat: scope attributes
I18N uses dynamic angular $locale change.
An i18n module named weeklySchedulerI18N is optionally registered when using the core module :
`javascript`
angular.module('demoApp', ['weeklyScheduler', 'weeklySchedulerI18N'])
If present, core directive will retrieve current $locale and use it to translate labelling elements.$locale
You can add more translation using provider weeklySchedulerLocaleServiceProvider:
`javascript`
angular.module('demoApp', ['weeklyScheduler', 'weeklySchedulerI18N'])
.config(['weeklySchedulerLocaleServiceProvider', function (localeServiceProvider) {
localeServiceProvider.configure({
doys: {'es-es': 4},
lang: {'es-es': {month: 'Mes', weekNb: 'número de la semana', addNew: 'Añadir'}},
localeLocationPattern: '/vendor/angular-i18n/angular-locale_{{locale}}.js'
});
}])
You can add animation to the weekly scheduler directive easily by importing angular module ngAnimate.
Your application could for instance use :
`javascript`
angular.module('demoApp', ['ngAnimate', 'weeklyScheduler'])
Don't forget to add the angular-animate javascript file to your Single Page App index.html.
``
Styling can be changed to whatever you like. This is an example of fading-in items entering the DOM :
`css``
.schedule-animate {
transition: opacity 200ms ease-out;
}
.schedule-animate.ng-enter, .schedule-animate.ng-hide-remove {
opacity: 0;
}
.schedule-animate.ng-leave, .schedule-animate.ng-hide-add {
display: none;
opacity: 1;
}
You should see your scheduler items fading in!
Released under the MIT License. See the [LICENSE][license] file for further details.
[license]: https://github.com/fmaturel/angular-weekly-scheduler/blob/master/LICENSE