https://github.com/fmaturel/angular-weekly-scheduler

A weekly scheduler for angularjs
https://github.com/fmaturel/angular-weekly-scheduler

angular animation i18n schedule

Last synced: about 2 months ago
JSON representation

A weekly scheduler for angularjs

• Host: GitHub
• URL: https://github.com/fmaturel/angular-weekly-scheduler
• Owner: fmaturel
• License: mit
• Archived: true
• Created: 2016-05-18T12:00:22.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-04-25T06:00:03.000Z (over 5 years ago)
• Last Synced: 2024-09-27T01:29:32.507Z (about 2 months ago)
• Topics: angular, animation, i18n, schedule
• Language: JavaScript
• Homepage: http://www.dijit.fr/demo/angular-weekly-scheduler
• Size: 102 KB
• Stars: 56
• Watchers: 7
• Forks: 47
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# angular-weekly-scheduler

A weekly scheduler for angularjs

[![Build Status](https://secure.travis-ci.org/fmaturel/angular-weekly-scheduler.svg)](http:/travis-ci.org/fmaturel/angular-weekly-scheduler)

## Online Demo

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

[![screenshot](http://www.dijit.fr/demo/angular-weekly-scheduler/screenshot.png)](http://www.dijit.fr/demo/angular-weekly-scheduler/screenshot.png)

## Plunker

https://embed.plnkr.co/CImLQFfbd64JFezNBTWQ/

## Run @ Home

Run the demo @home with few steps (prerequisite git & node V0.10+ & npm installed):

```

 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`

## Install

> 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:

``

## Features

This directive displays a weekly item scheduler. You can see, add and modify items easily.

### Keyboard shortcuts

* Use mouse wheel on schedule to scroll left and right

* Use ctrl + mouse wheel to zoom in and out the schedule

### Schedules

:information_source: This directive uses [MomentJS](http://momentjs.com) 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"

    }

  ]

}, ...]

```

### Transclusion

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

### Internationalisation (i18n)

I18N uses [dynamic angular `$locale` change](https://github.com/lgalfaso/angular-dynamic-locale).

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.

You can add more `$locale` 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'

    });

  }])

```

### Animation

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!

## License

Released under the MIT License. See the [LICENSE][license] file for further details.

[license]: https://github.com/fmaturel/angular-weekly-scheduler/blob/master/LICENSE