angular-weekly-scheduler

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.6.9" data-semver="1.6.9" src="https://code.angularjs.org/1.6.9/angular.js"></script>
    <script data-require="angular-animate.js@1.6.9" data-semver="1.6.9" src="https://code.angularjs.org/1.6.9/angular-animate.js"></script>
    <script data-require="angular-dynamic-locale@*" data-semver="0.1.27" src="https://lgalfaso.github.io/angular-dynamic-locale/src/tmhDynamicLocale.js"></script>
    <script data-require="moment.js@*" data-semver="2.21" src="https://npmcdn.com/moment@2.14.1"></script>
    <script src="https://cdn.rawgit.com/fmaturel/angular-weekly-scheduler/master/dist/js/ng-weekly-scheduler.js"></script>

    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link data-require="bootstrap@3.3.6" data-semver="3.3.6" rel="stylesheet" href="bootstrap" />

    <!-- Main JS file used to define demoApp module and DemoController -->
    <script src="main.js"></script>
    <!-- Styling file defining scheduler styles -->
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-app="demoApp">

    <div class="row" ng-controller="DemoController as demo">

      <div class="col-xs-10 col-xs-offset-1">

        <h1>Angularjs weekly scheduler</h1>

        <div>
          <label for="language">Choose your language:</label>
          <select id="language" ng-model="model.locale" ng-change="demo.onLocaleChange()">
            <option value="en-us" selected="">us</option>
            <option value="en-gb" selected="">gb</option>
            <option value="fr-fr">fr</option>
            <option value="de-de">de</option>
            <option value="es-es">es (lang customized in demo)</option>
          </select>
        </div>
        <div>
          <code>$scope.model</code>
          <pre ng-bind="model | json" style="max-height: 200px;"></pre>
        </div>
        <weekly-scheduler class="scheduler" items="model.items" on-change="demo.doSomething" on-delete="demo.doSomething" options="model.options">
          <div class="srow">{{::$index + 1}}. {{item.label}}</div>
        </weekly-scheduler>
        <div class="pull-right">
          <button class="btn btn-success" role="button" ng-click="model.items.push({label: 'New Item'})">Add new item</button>
        </div>
      </div>
    </div>
  </body>

</html>

angular.module('demoApp', ['ngAnimate', '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: 'https://code.angularjs.org/1.5.8/i18n/angular-locale_{{locale}}.js'
    });
  }])

  .controller('DemoController', ['$scope', '$timeout', 'weeklySchedulerLocaleService', '$log',
    function ($scope, $timeout, localeService, $log) {

      $scope.model = {
        locale: localeService.$locale.id,
        options: {/*monoSchedule: true*/},
        items: [{
          label: 'Item 1',
          editable: false,
          schedules: [
            {start: moment('2015-12-27').toDate(), end: moment('2016-08-01').toDate()}
          ]
        }]
      };

      $timeout(function () {
        $scope.model.items = $scope.model.items.concat([{
          label: 'Item 2',
          schedules: [
            {start: moment('2016-05-03').toDate(), end: moment('2017-02-01').toDate()},
            {start: moment('2015-11-20').toDate(), end: moment('2016-02-01').toDate()}
          ]
        }, {
          label: 'Item 3',
          schedules: [
            {start: moment('2017-08-09').toDate(), end: moment('2017-08-21').toDate()},
            {start: moment('2017-09-12').toDate(), end: moment('2017-10-12').toDate()}
          ]
        }]);
      }, 1000);

      this.doSomething = function (itemIndex, scheduleIndex, scheduleValue) {
        $log.debug('The model has changed!', itemIndex, scheduleIndex, scheduleValue);
      };

      this.onLocaleChange = function () {
        $log.debug('The locale is changing to', $scope.model.locale);
        localeService.set($scope.model.locale).then(function ($locale) {
          $log.debug('The locale changed to', $locale.id);
        });
      };
    }]);

/*---------------------------------------------------------------- Scheduler */
.scheduler {
  display: block;
  background: #fff;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.scheduler::after {
  content: "";
  display: block;
  clear: both;
}

.scheduler .labels, .scheduler .schedule-area-container {
  display: block;
  float: left;
}

.scheduler .labels {
  width: 15%;
  color: #666;
  border-right: 1px solid #ddd;
}

.scheduler .labels .srow {
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

.scheduler .schedule-area-container {
  overflow-x: scroll;
  width: 85%;
}

.scheduler .srow {
  position: relative;
  height: 35px;
  line-height: 35px;
}

.scheduler .timestamps {
  color: #aaa;
  position: relative;
}

.scheduler .timestamps .grid-container div {
  border-right: 1px solid #eee;
}

.scheduler .timestamps .grid-container div:last-child {
  border-right: none;
}

/*------------------------------------------------------------- Multi-slider */
multi-slider {
  position: relative;
  display: block;
  height: 35px;
  overflow: hidden;
}

multi-slider .slot {
  position: absolute;
  top: 5px;
  bottom: 5px;
  border-radius: 3px;
  text-align: center;
  white-space: nowrap;
  line-height: 25px;
  color: #fff;
}

multi-slider .ghost {
  background: #5ab57a;
  opacity: 0.6;
  display: none;
  cursor: pointer;
}

multi-slider:hover .ghost {
  display: block;
}

multi-slider.slot-hover .ghost {
  display: none;
}

multi-slider.dragging .ghost {
  display: none;
}

multi-slider weekly-slot {
  -webkit-transition: background 0.1s ease-in;
  cursor: all-scroll;
  min-width: 10px !important;
  background: #4eb8d5;
}

multi-slider weekly-slot.disable {
  cursor: not-allowed;
  color: #666;
  background: #c0c0c0;
}

multi-slider weekly-slot .handle {
  position: absolute;
  top: 0;
  bottom: 0;
}

multi-slider weekly-slot .handle.left, multi-slider weekly-slot .handle.right {
  width: 10px;
  background: #000;
  cursor: col-resize;
  opacity: 0.1;
}

multi-slider weekly-slot.disable .handle {
  cursor: not-allowed;
}

multi-slider weekly-slot .handle.left:hover, multi-slider weekly-slot .handle.right:hover {
  opacity: 0.3;
}

multi-slider weekly-slot .handle.left {
  left: 0;
}

multi-slider weekly-slot .handle.right {
  right: 0;
}

multi-slider weekly-slot:not(.disable) .remove {
  display: none;
  cursor: pointer;
  float: right;
  margin-right: -30px;
  width: 25px;
  background: red;
  border-radius: 20%;
  opacity: 0.5;
  transform: translateY(-100%);
}

multi-slider weekly-slot:not(.disable) .remove:before {
  position: absolute;
  content: "";
  left: -5px;
  width: 10px;
  height: 25px;
}

multi-slider weekly-slot:hover .remove {
  display: block;
}

multi-slider weekly-slot .remove:hover {
  opacity: 1;
}

multi-slider weekly-slot.active {
  z-index: 10;
  background: #5ab57a;
  color: #fff;
}

.grid-container {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  border-bottom: 1px solid #ddd;
}

.grid-container div {
  float: left;
  height: 34px;
  overflow: hidden;
  text-align: center;
}

.grid-container.striped div:nth-child(even) {
  background: #fafafa;
}

.github-fork-ribbon:after {
  line-height: 1em;
}

/*--------------------------------------------------------------- Animations */
.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;
}

# angular-weekly-scheduler
A weekly scheduler for angularjs