feat: Week.options.hourStart, Week.options.hourEnd (resolves: #175)

examples/js/default.js

@@ -12,7 +12,7 @@
     var datePicker, selectedCalendar;
 
     cal = new Calendar('#calendar', {
-        defaultView: 'week',
+        defaultView: 'month',
         useCreationPopup: useCreationPopup,
         useDetailPopup: useDetailPopup,
         calendars: CalendarList,
@@ -26,23 +26,6 @@
             time: function(schedule) {
                 return getTimeTemplate(schedule, false);
             }
-        },
-        timezones: [{
-            timezoneOffset: 600,
-            // displayLabel: 'GMT+09:00',
-            tooltip: 'Seoul'
-        }, {
-            timezoneOffset: -720,
-            // displayLabel: 'GMT-08:00',
-            tooltip: 'Los Angeles'
-        }, {
-            timezoneOffset: -120,
-            // displayLabel: 'GMT-08:00',
-            tooltip: 'Los Angeles'
-        }],
-        week: {
-            showTimezoneCollapseButton: true,
-            timezonesCollapsed: false
         }
     });
 

src/js/controller/viewMixin/week.js

@@ -10,6 +10,7 @@ var util = require('tui-code-snippet');
 var Collection = require('../../common/collection');
 var array = require('../../common/array');
 var datetime = require('../../common/datetime');
+var TZDate = require('../../common/timezone').Date;
 
 var MILLISECONDS_SCHEDULE_MIN_DURATION = datetime.MILLISECONDS_SCHEDULE_MIN_DURATION;
 
@@ -146,17 +147,20 @@ var Week = {
      * @param {Date} start - start date.
      * @param {Date} end - end date.
      * @param {Collection} time - view model collection.
+     * @param {number} hourStart - start hour to be shown
+     * @param {number} hourEnd - end hour to be shown
      * @returns {object} view model for time part.
      */
-    getViewModelForTimeView: function(start, end, time) {
+    getViewModelForTimeView: function(start, end, time, hourStart, hourEnd) {
         var self = this,
             ymdSplitted = this.splitScheduleByDateRange(start, end, time),
             result = {};
 
+        var _getViewModel = Week._makeGetViewModelFuncForTimeView(hourStart, hourEnd);
+
         util.forEach(ymdSplitted, function(collection, ymd) {
-            var viewModels = collection.sort(array.compare.schedule.asc),
-                collisionGroups,
-                matrices;
+            var viewModels = _getViewModel(collection);
+            var collisionGroups, matrices;
 
             collisionGroups = self.Core.getCollisionGroup(viewModels);
             matrices = self.Core.getMatrices(collection, collisionGroups);
@@ -168,6 +172,51 @@ var Week = {
         return result;
     },
 
+    /**
+     * make view model function depending on start and end hour
+     * if time view option has start or end hour condition
+     * it add filter
+     * @param {number} hourStart - start hour to be shown
+     * @param {number} hourEnd - end hour to be shown
+     * @returns {function} function
+     */
+    _makeGetViewModelFuncForTimeView: function(hourStart, hourEnd) {
+        if (hourStart === 0 && hourEnd === 24) {
+            return function(collection) {
+                return collection.sort(array.compare.schedule.asc);
+            };
+        }
+
+        return function(collection) {
+            return collection.find(Week._makeHourRangeFilter(hourStart, hourEnd))
+                .sort(array.compare.schedule.asc);
+        };
+    },
+
+    /**
+     * make a filter function that is not included range of start, end hour
+     * @param {number} hStart - hour start
+     * @param {number} hEnd - hour end
+     * @returns {function} - filtering function
+     */
+    _makeHourRangeFilter: function(hStart, hEnd) {
+        return function(schedule) {
+            var ownHourStart = schedule.model.start;
+            var ownHourEnd = schedule.model.end;
+            var yyyy = ownHourStart.getFullYear();
+            var mm = ownHourStart.getMonth();
+            var dd = ownHourStart.getDate();
+
+            var hourStart = new TZDate(yyyy, mm, dd).setHours(hStart);
+            var hourEnd = new TZDate(yyyy, mm, dd).setHours(hEnd);
+
+            return (ownHourStart >= hourStart && ownHourStart < hourEnd) ||
+                (ownHourEnd > hourStart && ownHourEnd <= hourEnd) ||
+                (ownHourStart < hourStart && ownHourEnd > hourStart) ||
+                (ownHourEnd > hourEnd && ownHourStart < hourEnd);
+        };
+    },
+
     /**********
      * ALLDAY VIEW
      **********/
@@ -228,13 +277,16 @@ var Week = {
      * @param {Date} end end date.
      * @param {Array.<object>} panels - schedule panels like 'milestone', 'task', 'allday', 'time'
      * @param {function[]} [andFilters] - optional filters to applying search query
+     * @param {Object} options - week view options
      * @returns {object} schedules grouped by dates.
      */
-    findByDateRange: function(start, end, panels, andFilters) {
+    findByDateRange: function(start, end, panels, andFilters, options) {
         var ctrlCore = this.Core,
             ctrlWeek = this.Week,
             filter = ctrlCore.getScheduleInDateRangeFilter(start, end),
             scheduleTypes = util.pluck(panels, 'name'),
+            hourStart = util.pick(options, 'hourStart'),
+            hourEnd = util.pick(options, 'hourEnd'),
             modelColl,
             group;
 
@@ -250,7 +302,7 @@ var Week = {
             if (panel.type === 'daygrid') {
                 group[name] = ctrlWeek.getViewModelForAlldayView(start, end, group[name]);
             } else if (panel.type === 'timegrid') {
-                group[name] = ctrlWeek.getViewModelForTimeView(start, end, group[name]);
+                group[name] = ctrlWeek.getViewModelForTimeView(start, end, group[name], hourStart, hourEnd);
             }
         });
 

src/js/factory/calendar.js

@@ -78,6 +78,8 @@ var mmin = Math.min;
  * @property {boolean} [workweek=false] - show only 5 days except for weekend
  * @property {boolean} [showTimezoneCollapseButton=false] - show a collapse button to close multiple timezones
  * @property {boolean} [timezonesCollapsed=false] - An initial multiple timezones collapsed state
+ * @property {number} [hourStart=0] - Can limit of render hour start.
+ * @property {number} [hourEnd=24] - Can limit of render hour end.
  */
 
 /**

src/js/view/template/week/time.hbs

@@ -10,15 +10,23 @@
                 {{/fi}}
             ">
             <div data-schedule-id="{{model.id}}" data-calendar-id="{{model.calendarId}}" class="{{CSS_PREFIX}}time-schedule {{#if model.isFocused}}{{CSS_PREFIX}}time-schedule-focused {{/if}}"
-                style="border-radius: {{@root.styles.borderRadius}};
+                style="
+                {{#unless croppedEnd}}
+                    border-bottom-left-radius: {{@root.styles.borderRadius}};
+                    border-bottom-right-radius: {{@root.styles.borderRadius}};
+                {{/unless}}
+                {{#unless croppedStart}}
+                    border-top-left-radius: {{@root.styles.borderRadius}};
+                    border-top-right-radius: {{@root.styles.borderRadius}};
+                {{/unless}}
                 {{#if model.isFocused}}
                     color: #ffffff; background-color:{{model.color}}; border-color:{{model.color}};
                 {{else}}
                     color:{{model.color}}; background-color:{{model.bgColor}}; border-color:{{model.borderColor}};
                 {{/if}}
                  {{model.customStyle}}"
             >{{{time-tmpl model}}}</div>
-            {{#unless cropped}}<div class="{{CSS_PREFIX}}time-resize-handle handle-x" style="margin-left: {{@root.styles.paddingLeft}};">&nbsp;</div>{{/unless}}
+            {{#unless croppedEnd}}<div class="{{CSS_PREFIX}}time-resize-handle handle-x" style="margin-left: {{@root.styles.paddingLeft}};">&nbsp;</div>{{/unless}}
         </div>
         {{/if ~}}
         {{/each}}

src/js/view/template/week/timeMoveGuide.hbs

@@ -1,5 +1,5 @@
 <div class="{{CSS_PREFIX}}time-date-schedule-block" data-id="{{stamp model}}" style="width: 100%; height: 100%;">
     <div class="{{CSS_PREFIX}}time-schedule {{CSS_PREFIX}}time-date-schedule-block-focused" style="color: #ffffff; background-color:{{model.dragBgColor}}; border-color:{{model.borderColor}};">{{{time-tmpl model}}}</div>
-    {{#unless cropped}}<div class="{{CSS_PREFIX}}time-resize-handle handle-x">&nbsp;</div>{{/unless}}
+    {{#unless croppedEnd}}<div class="{{CSS_PREFIX}}time-resize-handle handle-x">&nbsp;</div>{{/unless}}
     <div class="{{CSS_PREFIX}}time-date-schedule-block-cover"></div>
 </div>

src/js/view/week/time.js

@@ -76,51 +76,85 @@ Time.prototype._parseDateGroup = function(str) {
 };
 
 /**
+ * calculate left and width
  * @param {ScheduleViewModel} viewModel - view model instance to calculate bound.
  * @param {object} options - options for calculating schedule element's bound.
- * @param {Date} options.todayStart - date object represent schedule date's start (00:00:00)
- * @param {number} options.baseMS - the number of milliseconds to render schedule blocks.
- * @param {number} options.baseHeight - pixel value related with baseMS options.
- * @param {number[]} options.baseLeft - left position percents for each columns.
- * @param {number} options.baseWidth - the unit of schedule blocks width percent.
- * @param {number} options.columnIndex - the number index of schedule blocks.
- * it represent rendering index from left sides in view.
- * @returns {object} bound object for supplied view model.
+ * @returns {object} - left and width
  */
-Time.prototype.getScheduleViewBound = function(viewModel, options) {
-    var baseMS = options.baseMS;
-    var baseHeight = options.baseHeight;
-    var cropped = false;
-    var offsetStart, width, height, top;
-    var isReadOnly = util.pick(viewModel, 'model', 'isReadOnly') || false;
-
-    offsetStart = viewModel.valueOf().start - options.todayStart;
-
-    // containerHeight : milliseconds in day = x : schedule's milliseconds
-    top = (baseHeight * offsetStart) / baseMS;
-    height = (baseHeight * viewModel.duration()) / baseMS;
-    width = options.baseWidth * (viewModel.extraSpace + 1);
+Time.prototype._getScheduleViewBoundX = function(viewModel, options) {
+    var width = options.baseWidth * (viewModel.extraSpace + 1);
 
     // set width auto when has no collisions.
     if (!viewModel.hasCollide) {
         width = null;
     }
 
-    if (height + top > baseHeight) {
-        height = baseHeight - top;
-        cropped = true;
+    return {
+        left: options.baseLeft[options.columnIndex],
+        width: width
+    };
+};
+
+/**
+ * calculate top, height, croppedStart and croppedEnd
+ * @param {ScheduleViewModel} viewModel - view model instance to calculate bound.
+ * @param {object} options - options for calculating schedule element's bound.
+ * @returns {object} - left and width
+ */
+Time.prototype._getScheduleViewBoundY = function(viewModel, options) {
+    var baseMS = options.baseMS;
+    var baseHeight = options.baseHeight;
+    var croppedStart = false;
+    var croppedEnd = false;
+    var offsetStart = viewModel.valueOf().start - options.todayStart;
+    // containerHeight : milliseconds in day = x : schedule's milliseconds
+    var top = (baseHeight * offsetStart) / baseMS;
+    var height = (baseHeight * viewModel.duration()) / baseMS;
+
+    if (offsetStart < 0) {
+        top = 0;
+        height += ((baseHeight * offsetStart) / baseMS);
+        croppedStart = true;
     }
 
-    if (isReadOnly || options.isReadOnly) {
-        cropped = true;
+    if (height + top > baseHeight) {
+        height = baseHeight - top;
+        croppedEnd = true;
     }
 
     return {
         top: top,
-        left: options.baseLeft[options.columnIndex],
-        width: width,
         height: Math.max(height, this.options.minHeight) - this.options.defaultMarginBottom,
-        cropped: cropped
+        croppedStart: croppedStart,
+        croppedEnd: croppedEnd
+    };
+};
+
+/**
+ * @param {ScheduleViewModel} viewModel - view model instance to calculate bound.
+ * @param {object} options - options for calculating schedule element's bound.
+ * @param {Date} options.todayStart - date object represent schedule date's start (00:00:00)
+ * @param {number} options.baseMS - the number of milliseconds to render schedule blocks.
+ * @param {number} options.baseHeight - pixel value related with baseMS options.
+ * @param {number[]} options.baseLeft - left position percents for each columns.
+ * @param {number} options.baseWidth - the unit of schedule blocks width percent.
+ * @param {number} options.columnIndex - the number index of schedule blocks.
+ * it represent rendering index from left sides in view.
+ * @returns {object} bound object for supplied view model.
+ */
+Time.prototype.getScheduleViewBound = function(viewModel, options) {
+    var boundX = this._getScheduleViewBoundX(viewModel, options);
+    var boundY = this._getScheduleViewBoundY(viewModel, options);
+    var isReadOnly = util.pick(viewModel, 'model', 'isReadOnly') || false;
+
+    return {
+        top: boundY.top,
+        left: boundX.left,
+        width: boundX.width,
+        height: boundY.height,
+        croppedEnd: boundY.croppedEnd,
+        croppedStart: boundY.croppedStart,
+        isReadOnly: isReadOnly
     };
 };
 

src/js/view/week/week.js

@@ -53,16 +53,18 @@ function Week(controller, options, container, panels) {
      * @type {object} Options for view.
      */
     this.options = util.extend({
-        scheduleFilter: function(schedule) {
+        scheduleFilter: [function(schedule) {
             return Boolean(schedule.isVisible);
-        },
+        }],
         renderStartDate: datetime.format(range.start, 'YYYY-MM-DD'),
         renderEndDate: datetime.format(range.end, 'YYYY-MM-DD'),
         narrowWeekend: false,
         startDayOfWeek: 0,
         workweek: false,
         showTimezoneCollapseButton: false,
-        timezonesCollapsed: false
+        timezonesCollapsed: false,
+        hourStart: 0,
+        hourEnd: 24
     }, options);
 
     /**
@@ -130,7 +132,8 @@ Week.prototype.render = function() {
         datetime.start(renderStartDate),
         datetime.end(renderEndDate),
         this.panels,
-        scheduleFilter
+        scheduleFilter,
+        this.options
     );
 
     grids = datetime.getGridLeftAndWidth(