angular-weekly-scheduler

WebJar for angular-weekly-scheduler

License

License

MIT
Categories

Categories

Github Development Tools Version Controls Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

github-com-fmaturel-angular-weekly-scheduler
Last Version

Last Version

0.0.5
Release Date

Release Date

Type

Type

jar
Description

Description

angular-weekly-scheduler
WebJar for angular-weekly-scheduler
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

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

Download github-com-fmaturel-angular-weekly-scheduler

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/github-com-fmaturel-angular-weekly-scheduler/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>github-com-fmaturel-angular-weekly-scheduler</artifactId>
    <version>0.0.5</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/github-com-fmaturel-angular-weekly-scheduler/
implementation 'org.webjars.bower:github-com-fmaturel-angular-weekly-scheduler:0.0.5'
// https://jarcasting.com/artifacts/org.webjars.bower/github-com-fmaturel-angular-weekly-scheduler/
implementation ("org.webjars.bower:github-com-fmaturel-angular-weekly-scheduler:0.0.5")
'org.webjars.bower:github-com-fmaturel-angular-weekly-scheduler:jar:0.0.5'
<dependency org="org.webjars.bower" name="github-com-fmaturel-angular-weekly-scheduler" rev="0.0.5">
  <artifact name="github-com-fmaturel-angular-weekly-scheduler" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='github-com-fmaturel-angular-weekly-scheduler', version='0.0.5')
)
libraryDependencies += "org.webjars.bower" % "github-com-fmaturel-angular-weekly-scheduler" % "0.0.5"
[org.webjars.bower/github-com-fmaturel-angular-weekly-scheduler "0.0.5"]

Dependencies

compile (5)

Group / Artifact Type Version
org.webjars.bower : angular-i18n jar [1.4.0,1.5)
org.webjars.bower : angular jar [1.4.0,1.5)
org.webjars.bower : angular-dynamic-locale jar [0.1.32,0.2)
org.webjars.bower : moment jar [2.13,2.14)
org.webjars.bower : angular-animate jar [1.4.0,1.5)

Project Modules

There are no modules declared in this project.

angular-weekly-scheduler

A weekly scheduler for angularjs

Build Status

Online Demo

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

screenshot

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

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.10/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.4.10/angular-locale_xx-xx.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
  
  <!-- The library to replace with your local copy of ng-weekly-scheduler -->
  <script src="https://github.com/fmaturel/angular-weekly-scheduler/blob/master/dist/js/ng-weekly-scheduler.js"></script>

Add dependency to timeline your angular module: weeklyScheduler.

Use the directive:

<weekly-scheduler class="scheduler" ng-model="myScopeModel" options="options"></weekly-scheduler>

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

ℹ️ 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.

"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 <weekly-scheduler> element will be treated as the labelling object of one item.

<div class="srow">{{::$index + 1}}. {{item.label}}</div>

On transcluded item label, the scope contains item attribute name containing each item model and regular ng-repeat 🔁 scope attributes

Internationalisation (i18n)

I18N uses dynamic angular $locale change. An i18n module named weeklySchedulerI18N is optionally registered when using the core module :

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:

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 :

angular.module('demoApp', ['ngAnimate', 'weeklyScheduler'])

Don't forget to add the angular-animate javascript file to your Single Page App index.html.

<script src="/vendor/angular-animate/angular-animate.js"></script>

Styling can be changed to whatever you like. This is an example of fading-in items entering the DOM :

.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 file for further details.

Versions

Version
0.0.5