renamed calendarDay to calendarDays as it show multiple days, added t…

…est vor eventsource subscribe to call the callback with existing events

app/scripts/modules/nx-calendar-demo/controllers/demoCtrl.js

@@ -3,16 +3,17 @@ var app = angular.module('nx-calendar-demo');
 
 var data = {};
 
-app.run(function() {
+app.run(function(nxEventSource) {
   var date = new Date();
+  var cid = 10;
   var d = date.getDate();
   var m = date.getMonth();
   var y = date.getFullYear();
   /* event source that pulls from google.com */
   data.eventSource = {
-          url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
-          className: 'gcal-event',           // an option!
-          currentTimezone: 'America/Chicago' // an option!
+    url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
+    className: 'gcal-event',           // an option!
+    currentTimezone: 'America/Chicago' // an option!
   };
   /* event source that contains custom events on the scope */
   data.events = [
@@ -22,7 +23,18 @@ app.run(function() {
     {id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
     {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
     {title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
-  ];
+  ].map(function(item) {
+    return {
+      start: moment(item.start),
+      end: moment(item.end),
+      title: item.title,
+      id: item.id || (item.id = cid++),
+      summary: item.id + ' ---- ' + item.title
+    };
+  });
+
+
+  nxEventSource.register(data.events);
 });
 
 app.controller('demoCtrl', function($scope) {
@@ -31,8 +43,13 @@ app.controller('demoCtrl', function($scope) {
 
   $scope.config = {
     week: {
+      dayFormat: 'Do dddd',
       days: 7,
-      day: moment().day(1)
+      day: moment().add(-1, 'days').day(1)
+    },
+    day: {
+      start: 7,
+      end: 22
     }
   };
 });

app/scripts/modules/nx-calendar/directives/calendarDays.js

@@ -0,0 +1,65 @@
+var app = angular.module('nx-calendar');
+
+app.controller('nx-calendar-days-controller', function($scope, nxCalendarUtilities, nxEventSource) {
+
+  var config = angular.extend({
+    start       : 0 // first hour of the day
+  , end         : 24  // last hour of the day
+  , timeFormat  : 'HH:mm'
+  , dayFormat   : 'dddd'
+  , weekFormat  : 'wo'
+  , day         : moment()
+  , days        : 1
+  }, $scope.config || {});
+
+  config.day = moment(config.day);
+
+  $scope.timeFormat = config.timeFormat;
+  $scope.dayFormat  = config.dayFormat;
+  $scope.weekFormat = config.weekFormat;
+  $scope.events     = [];
+
+  $scope.hours = nxCalendarUtilities.range(config.start, config.end, function(hour) {
+    return moment().hour(hour).minute(0);
+  });
+
+  $scope.days = nxCalendarUtilities.range(config.days).map(function(day) {
+    return config.day.clone().add(day, 'day').startOf('day');
+  });
+
+  var filter = {
+    start : $scope.days[0],
+    end   : $scope.days[$scope.days.length - 1].clone().endOf('day')
+  };
+  if(config.source) filter.namespace = config.source;
+
+
+  nxEventSource.subscribe($scope, null, filter, function($evt, data) {
+    $scope.events = data.events;
+    console.log('nxEventSource - Events');
+    $scope.events.map(function(evt) {
+      console.log(nxEventSource.format(evt))
+    });
+  });
+});
+
+
+var directiveDefinition = function directiveDefinition() {
+  return function(nxCalendarConfiguration) {
+    var template  = nxCalendarConfiguration.template;
+
+    return {
+      scope: {
+        config: '=nxCalConfig'
+      },
+      controller: 'nx-calendar-days-controller',
+      templateUrl: template('calendarDays')
+    };
+  };
+};
+
+['nxCalendarDays', 'nxCalDays'].map(function(directive) {
+  app.directive(directive, directiveDefinition(directive));
+});
+
+

app/scripts/modules/nx-calendar/filters/isEventSource.js

@@ -1,9 +1,6 @@
-var app = angular.module('nx-calendar')
-
+angular.module('nx-calendar')
   .filter('isEventSource', function(isEventListFilter) {
-    var isString = function(str) {
-      return typeof str === "string";
-    };
+    var isString = angular.isString;
 
     return function(source) {
       if(isEventListFilter(source))

app/scripts/modules/nx-calendar/provider/eventSource.js

@@ -48,13 +48,13 @@ angular.module('nx-calendar').provider('nxEventSource', function() {
       if(_filter.namespace && namespace !== _filter.namespace)
         return [];
       return range ? events.filter(range) : events;
-    }
-  }
+    };
+  };
 
   /**
    *  Broadcast any event changes
-   *  @IMPRTANT
-   *    This method might blow up when
+   *  @IMPORTANT
+   *  This method might blow up when
    *    - to many handlers are registered, the handler functions need to be very small
    *    - there are many small changes to the events, as this method needs to be called for every change
    **/
@@ -75,19 +75,24 @@ angular.module('nx-calendar').provider('nxEventSource', function() {
    **/
   self.handler = function(scope, event, filter) {
     var filterFn = createFilter(filter);
-
     // create handle-fn to handle the filtering and broadcasting of the events
     var handle = function handle(type, events, namespace) {
       var publish = filterFn(namespace, events);
       broadcast(scope, type, publish, event);
     };
-    // add handle-fn to list of handlers
-    handler.push(handle);
     // return remove-fn
-    return function remove() {
+    handle.remove = function remove() {
       // remove handle-fn from list of handlers
-      handler = handler.filter(function(item) {return handle !== item; });
+      handler = handler.filter(function(item) {
+        return handle !== item;
+      });
     };
+    // add handle-fn to list of handlers
+    handler.push(handle);
+    // add clean-up
+    scope.$on('$destroy', handle.remove);
+
+    return handle;
   };
 
   self.provider = {
@@ -99,8 +104,8 @@ angular.module('nx-calendar').provider('nxEventSource', function() {
     format: function(evt) {
       if(angular.isArray(evt)) return evt.map(self.provider.format);
       if(!provide('isEventFilter')(evt))return;
-      var format = 'HH:mm:ss';
-      console.log(evt.start.format(format), evt.end.format(format), evt.summary)
+      var format = 'DD.MM.YYYY HH:mm:ss';
+      console.log(evt.start.format(format), evt.end.format(format), evt.summary);
     },
     /**
      * register an eventsource into the provider
@@ -110,8 +115,9 @@ angular.module('nx-calendar').provider('nxEventSource', function() {
      **/
     register: function(namespace, source) {
       if(typeof namespace !== 'string') {
-        source = namespace;
-        namespace = 0;
+        var tmp = source;
+        source    = namespace;
+        namespace = tmp || 0;
       }
 
       if(!angular.isArray(source))
@@ -121,7 +127,6 @@ angular.module('nx-calendar').provider('nxEventSource', function() {
         throw new Error("Can't register event source" + (namespace ? " in '" + namespace + "'." : "."), {
           source: source
         });
-
       namespaces[namespace] = (namespaces[namespace] || []).concat(source);
       self.broadcast(self.config.events.add, source, namespace);
     },
@@ -132,19 +137,23 @@ angular.module('nx-calendar').provider('nxEventSource', function() {
      *  @param scope the scope the event should be registered in
      *  @param event the name of the event that should be broadcasted
      *  @param [filter] - object
-     *    - name property that will check if the events are in the correct namespace
+     *    - namespace property that will check if the events are in the correct namespace
      *    - start&end properties will check if the events are in the range between start & end
      *  @param [fn] callback that will be registered in the scope
      **/
     subscribe: function(scope, event, filter, fn) {
       if(angular.isFunction(filter)) {
-        fn = filter;
-        filter = {};
+        fn      = filter;
+        filter  = {};
       }
-      scope.$on('$destroy', self.handler(scope, event, filter || {}));
+      event = event || self.config.events.update;
+      var handle = self.handler(scope, event, filter || {});
       if(angular.isFunction(fn)) {
         scope.$on(event, fn);
       }
+      Object.keys(namespaces).forEach(function(namespace) {
+        handle(self.config.events.add, namespaces[namespace], namespace);
+      });
     },
 
     /**

app/scripts/modules/nx-calendar/templates/calendarDays.html

@@ -0,0 +1,40 @@
+<table class="table nx-calendar day-view">
+  <thead>
+    <th class="nx-calendar-first">
+      <dic class="nx-calendar-header-text">{{days[0] | moment:weekFormat}}</div>
+    </th>
+    <th ng-repeat="day in days" class="nx-calendar-header">
+      <div class="nx-calendar-header-text">{{day | moment:dayFormat}}</div>
+    </th>
+  </thead>
+<!--
+    @ days  Days that are visible
+    @ hours Hours that are already presented
+    @ skip  extra td's to be skipped
+  <tbody whole-day-view days="days" hours="hours" skip="1"></tbody>
+ -->
+  <tbody class="nx-calendar-colwrapper">
+    <tr>
+      <td class="nx-calendar-first"></td>
+      <td colspan="{{days.length}}" class="nx-calendar-spanningwrapper">
+        <div class="nx-calendar-tg-hourmarkers">
+          <div class="nx-calendar-tg-markercell" ng-repeat="hour in hours">
+            <div class="nx-calendar-tg-dualmarker"></div>
+          </div>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+  <tbody>
+    <tr>
+      <td class="nx-calendar-first nx-calendar-tg-hours">
+        <div class="nx-calendar-tg-hour-inner" ng-repeat="hour in hours">
+          <div class="nx-calendar-tg-hour-clock">{{hour | moment:timeFormat}}</div>
+        </div>
+      </td>
+      <td ng-repeat="day in days" class="nx-calendar-tg-day-container">
+        <hour-view-event-container day="day" hours="hours"></hour-view-event-container>
+      </td>
+    </tr>
+  </tbody>
+</table>