add days render method, update weekend and another month detection

dist/css/datepicker.css

@@ -3,15 +3,34 @@
    ------------------------------------------------- */
 .datepicker {
   border: 1px solid #dddddd;
+  box-sizing: content-box;
   width: 224px; }
 
-.datepicker--days--names {
+.datepicker--days-names {
-  display: flex; }
+  display: flex;
+  flex-wrap: wrap; }
 
-.datepicker--days--name {
+.datepicker--day-name {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   text-align: center; }
+
+/* -------------------------------------------------
+    Datepicker cells
+   ------------------------------------------------- */
+.datepicker--cells {
+  display: flex;
+  flex-wrap: wrap; }
+
+.datepicker--cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px; }
+
+.datepicker--cell-day.-another-month- {
+  color: #ddd; }

dist/js/datepicker.js

@@ -11,8 +11,9 @@ var Datepicker;
         defaults = {
             inline: true,
             region: 'ru',
-            firstDay: 1,
+            firstDay: 1, // Week's first day
-            start: '',
+            start: '', // Start date
+            weekends: [6, 0],
             format: 'dd.mm.yyyy'
         };
 
@@ -58,6 +59,11 @@ var Datepicker;
 
         },
 
+        isWeekend: function (day) {
+            return this.opts.weekends.indexOf(day) !== -1;
+
+        },
+
         _buildDatepickersContainer: function () {
             this.containerBuilt = true;
             $body.append('<div class="datepickers-container" id="datepickers-container"></div>')
@@ -79,7 +85,6 @@ var Datepicker;
         }
     };
 
-
     $.fn[pluginName] = function ( options ) {
         if (Datepicker.prototype[options]) {
             Datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1));
@@ -99,6 +104,8 @@ var Datepicker;
     };
 
 })(window, jQuery, '');
+
+
 ;(function () {
     Datepicker.region = {
         'ru': {
@@ -114,8 +121,8 @@ Datepicker.Cell = function () {
     var templates = {
         days:'' +
         '<div class="datepicker--days">' +
-        '<div class="datepicker--days--names"></div>' +
+        '<div class="datepicker--days-names"></div>' +
-        '<div class="datepicker--days--cells"></div>' +
+        '<div class="datepicker--cells datepicker--cells-days"></div>' +
         '</div>'
     };
 
@@ -136,8 +143,8 @@ Datepicker.Cell = function () {
 
         _buildBaseHtml: function () {
             this.$el = $(templates[this.type]).appendTo(this.d.$content);
-            this.$names = $('.datepicker--days--names', this.$el);
+            this.$names = $('.datepicker--days-names', this.$el);
-            this.$cells = $('.datepicker--days--cells', this.$el);
+            this.$cells = $('.datepicker--cells', this.$el);
         },
 
         _getDayNamesHtml: function (firstDay, curDay, html, i) {
@@ -148,16 +155,53 @@ Datepicker.Cell = function () {
             if (i > 7) return html;
             if (curDay == 7) return this._getDayNamesHtml(firstDay, 0, html, ++i);
 
-            html += '<div class="datepicker--days--name' + (i >= 5 ? " -weekend-" : "") + '">' + this.d.loc.days[curDay] + '</div>';
+            html += '<div class="datepicker--day-name' + (this.d.isWeekend(curDay) ? " -weekend-" : "") + '">' + this.d.loc.days[curDay] + '</div>';
 
             return this._getDayNamesHtml(firstDay, ++curDay, html, ++i);
         },
 
-        _renderDays: function () {
+        /**
-            var count = Datepicker.getDaysCount(this.viewDate),
+         * Calculates days number to render. Generates days html and returns it.
-                dayNames = this._getDayNamesHtml(this.opts.firstDay),
+         * @param {object} date - Date object
-                firstDayIndex = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth(), 1).getDay();
+         * @returns {string}
+         * @private
+         */
+        _getDaysHtml: function (date) {
+            var totalMonthDays = Datepicker.getDaysCount(date),
 
+                firstMonthDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay(),
+                lastMonthDay = new Date(date.getFullYear(), date.getMonth(), totalMonthDays).getDay(),
+
+                remainingDays = 6 - lastMonthDay + this.opts.firstDay,
+                startDayIndex = this.opts.firstDay - (firstMonthDay - 1), // Minus one, because of zero based counter
+
+                m, y,
+                html = '';
+
+            for (var i = startDayIndex, max = totalMonthDays + remainingDays; i <= max; i++) {
+                y = date.getFullYear();
+                m = date.getMonth();
+
+                html += this._getDayHtml(new Date(y, m, i))
+            }
+
+            return html;
+        },
+
+        _getDayHtml: function (date) {
+            var _class = "datepicker--cell datepicker--cell-day";
+
+            if (this.d.isWeekend(date.getDay())) _class += " -weekend-";
+            if (date.getMonth() != this.viewDate.getMonth()) _class += " -another-month-";
+
+            return '<div class="' + _class + '">' + date.getDate() + '</div>';
+        },
+
+        _renderDays: function () {
+            var dayNames = this._getDayNamesHtml(this.opts.firstDay),
+                days = this._getDaysHtml(this.viewDate);
+
+            this.$cells.html(days);
             this.$names.html(dayNames)
         },
 

js/datepicker/body.js

@@ -2,8 +2,8 @@
     var templates = {
         days:'' +
         '<div class="datepicker--days">' +
-        '<div class="datepicker--days--names"></div>' +
+        '<div class="datepicker--days-names"></div>' +
-        '<div class="datepicker--days--cells"></div>' +
+        '<div class="datepicker--cells datepicker--cells-days"></div>' +
         '</div>'
     };
 
@@ -24,8 +24,8 @@
 
         _buildBaseHtml: function () {
             this.$el = $(templates[this.type]).appendTo(this.d.$content);
-            this.$names = $('.datepicker--days--names', this.$el);
+            this.$names = $('.datepicker--days-names', this.$el);
-            this.$cells = $('.datepicker--days--cells', this.$el);
+            this.$cells = $('.datepicker--cells', this.$el);
         },
 
         _getDayNamesHtml: function (firstDay, curDay, html, i) {
@@ -36,16 +36,53 @@
             if (i > 7) return html;
             if (curDay == 7) return this._getDayNamesHtml(firstDay, 0, html, ++i);
 
-            html += '<div class="datepicker--days--name' + (i >= 5 ? " -weekend-" : "") + '">' + this.d.loc.days[curDay] + '</div>';
+            html += '<div class="datepicker--day-name' + (this.d.isWeekend(curDay) ? " -weekend-" : "") + '">' + this.d.loc.days[curDay] + '</div>';
 
             return this._getDayNamesHtml(firstDay, ++curDay, html, ++i);
         },
 
-        _renderDays: function () {
+        /**
-            var count = Datepicker.getDaysCount(this.viewDate),
+         * Calculates days number to render. Generates days html and returns it.
-                dayNames = this._getDayNamesHtml(this.opts.firstDay),
+         * @param {object} date - Date object
-                firstDayIndex = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth(), 1).getDay();
+         * @returns {string}
+         * @private
+         */
+        _getDaysHtml: function (date) {
+            var totalMonthDays = Datepicker.getDaysCount(date),
 
+                firstMonthDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay(),
+                lastMonthDay = new Date(date.getFullYear(), date.getMonth(), totalMonthDays).getDay(),
+
+                remainingDays = 6 - lastMonthDay + this.opts.firstDay,
+                startDayIndex = this.opts.firstDay - (firstMonthDay - 1), // Minus one, because of zero based counter
+
+                m, y,
+                html = '';
+
+            for (var i = startDayIndex, max = totalMonthDays + remainingDays; i <= max; i++) {
+                y = date.getFullYear();
+                m = date.getMonth();
+
+                html += this._getDayHtml(new Date(y, m, i))
+            }
+
+            return html;
+        },
+
+        _getDayHtml: function (date) {
+            var _class = "datepicker--cell datepicker--cell-day";
+
+            if (this.d.isWeekend(date.getDay())) _class += " -weekend-";
+            if (date.getMonth() != this.viewDate.getMonth()) _class += " -another-month-";
+
+            return '<div class="' + _class + '">' + date.getDate() + '</div>';
+        },
+
+        _renderDays: function () {
+            var dayNames = this._getDayNamesHtml(this.opts.firstDay),
+                days = this._getDaysHtml(this.viewDate);
+
+            this.$cells.html(days);
             this.$names.html(dayNames)
         },
 

js/datepicker/datepicker.js

@@ -11,8 +11,9 @@ var Datepicker;
         defaults = {
             inline: true,
             region: 'ru',
-            firstDay: 1,
+            firstDay: 1, // Week's first day
-            start: '',
+            start: '', // Start date
+            weekends: [6, 0],
             format: 'dd.mm.yyyy'
         };
 
@@ -58,6 +59,11 @@ var Datepicker;
 
         },
 
+        isWeekend: function (day) {
+            return this.opts.weekends.indexOf(day) !== -1;
+
+        },
+
         _buildDatepickersContainer: function () {
             this.containerBuilt = true;
             $body.append('<div class="datepickers-container" id="datepickers-container"></div>')
@@ -79,7 +85,6 @@ var Datepicker;
         }
     };
 
-
     $.fn[pluginName] = function ( options ) {
         if (Datepicker.prototype[options]) {
             Datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1));
@@ -99,3 +104,4 @@ var Datepicker;
     };
 
 })(window, jQuery, '');
+

sass/datepicker.scss

@@ -1 +1,2 @@
 @import "datepicker/datepicker";
+@import "datepicker/cell";

sass/datepicker/_cell.scss

@@ -0,0 +1,27 @@
+@import "datepicker-config";
+
+/* -------------------------------------------------
+    Datepicker cells
+   ------------------------------------------------- */
+
+.datepicker--cells {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.datepicker--cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $dayCellSize;
+  height: $dayCellSize;
+}
+
+//  Day cell
+// -------------------------------------------------
+
+.datepicker--cell-day {
+  &.-another-month- {
+    color: $colorAnotherMonth;
+  }
+}

sass/datepicker/_datepicker.scss

@@ -6,7 +6,8 @@
 
 .datepicker {
   border: 1px solid #dddddd;
-  width: $width;
+  box-sizing: content-box;
+  width: $datepickerWidth;
 }
 
 //  Days
@@ -18,14 +19,15 @@
 //  Day names
 // -------------------------
 
-.datepicker--days--names {
+.datepicker--days-names {
   display: flex;
+  flex-wrap: wrap;
 }
-.datepicker--days--name {
+.datepicker--day-name {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: $cellSize;
+  width: $dayCellSize;
-  height: $cellSize;
+  height: $dayCellSize;
   text-align: center;
 }

sass/datepicker/datepicker-config.scss

@@ -1,3 +1,5 @@
-$cellSize: 32px;
+$dayCellSize: 32px;
-$width: 7 * $cellSize;
+$datepickerWidth: 7 * $dayCellSize;
+
+$colorAnotherMonth: #ddd;