From 7a2508384b2866b6125b6c318181497a587b4998 Mon Sep 17 00:00:00 2001
From: t1m0n <t1m0n.TR@gmail.com>
Date: Mon, 9 Nov 2015 11:38:01 +0300
Subject: [PATCH] add onRenderCell option

---
 dist/css/datepicker.css     |  2 +-
 dist/js/datepicker.js       | 48 +++++++++++++++++++++++++++----------
 index.html                  |  1 -
 js/datepicker/body.js       | 42 ++++++++++++++++++++++++--------
 js/datepicker/datepicker.js |  6 +++--
 sass/datepicker/_cell.scss  |  2 +-
 6 files changed, 74 insertions(+), 27 deletions(-)

diff --git a/dist/css/datepicker.css b/dist/css/datepicker.css
index 4340950..2ee01d5 100644
--- a/dist/css/datepicker.css
+++ b/dist/css/datepicker.css
@@ -107,5 +107,5 @@
 .datepicker--cell-year {
   width: 25%;
   height: 40px; }
-  .datepicker--cell-year.-another-decade- {
+  .datepicker--cell-year.-other-decade- {
     color: #ddd; }
diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js
index fb3e64b..fc2050e 100644
--- a/dist/js/datepicker.js
+++ b/dist/js/datepicker.js
@@ -16,6 +16,8 @@ var Datepicker;
             start: '', // Start date
             weekends: [6, 0],
             defaultView: 'days',
+            //TODO сделать минимальный вид
+            minView: 'days',
             dateFormat: 'dd.mm.yyyy',
             toggleSelected: true,
 
@@ -37,8 +39,8 @@ var Datepicker;
             nextHtml: '&raquo;',
 
             // events
-            //TODO сделать обратный вызов
-            onChange: ''
+            onChange: '',
+            onRenderCell: ''
         };
 
     Datepicker  = function (el, options) {
@@ -583,13 +585,19 @@ Datepicker.Cell = function () {
             var _class = "datepicker--cell datepicker--cell-day",
                 currentDate = new Date(),
                 d = Datepicker.getParsedDate(date),
+                render,
                 html = d.date;
 
+            if (this.opts.onRenderCell) {
+                render = this.opts.onRenderCell(date, 'day') || {};
+                html = render.html ? render.html : html;
+                _class += render.classes ? ' ' + render.classes : '';
+            }
 
             if (this.d.isWeekend(d.day)) _class += " -weekend-";
             if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
             if (this.d._isSelected(date, 'day')) _class += ' -selected-';
-            if (!this.d._isInRange(date)) _class += ' -disabled-';
+            if (!this.d._isInRange(date) || render.disabled) _class += ' -disabled-';
             if (d.month != this.d.parsedDate.month) {
                 _class += " -other-month-";
 
@@ -629,12 +637,20 @@ Datepicker.Cell = function () {
             var _class = "datepicker--cell datepicker--cell-month",
                 d = Datepicker.getParsedDate(date),
                 currentDate = new Date(),
-                loc = this.d.loc;
+                loc = this.d.loc,
+                html = loc.months[d.month],
+                render = {};
+
+            if (this.opts.onRenderCell) {
+                render = this.opts.onRenderCell(date, 'month') || {};
+                html = render.html ? render.html : html;
+                _class += render.classes ? ' ' + render.classes : '';
+            }
 
             if (Datepicker.isSame(currentDate, date, 'month')) _class += ' -current-';
-            if (!this.d._isInRange(date, 'month')) _class += ' -disabled-';
+            if (!this.d._isInRange(date, 'month') || render.disabled) _class += ' -disabled-';
 
-            return '<div class="' + _class + '" data-month="' + d.month + '">' + loc.months[d.month] + '</div>'
+            return '<div class="' + _class + '" data-month="' + d.month + '">' + html + '</div>'
         },
 
         _getYearsHtml: function (date) {
@@ -655,16 +671,24 @@ Datepicker.Cell = function () {
             var _class = "datepicker--cell datepicker--cell-year",
                 decade = Datepicker.getDecade(this.d.date),
                 currentDate = new Date(),
-                d = Datepicker.getParsedDate(date);
+                d = Datepicker.getParsedDate(date),
+                html = d.year,
+                render = {};
+
+            if (this.opts.onRenderCell) {
+                render = this.opts.onRenderCell(date, 'year') || {};
+                html = render.html ? render.html : html;
+                _class += render.classes ? ' ' + render.classes : '';
+            }
 
             if (d.year < decade[0] || d.year > decade[1]) {
-                _class += ' -another-decade-';
+                _class += ' -other-decade-';
             }
 
             if (Datepicker.isSame(currentDate, date, 'year')) _class += ' -current-';
-            if (!this.d._isInRange(date, 'year')) _class += ' -disabled-';
+            if (!this.d._isInRange(date, 'year') || render.disabled) _class += ' -disabled-';
 
-            return '<div class="' + _class + '" data-year="' + d.year + '">' + d.year + '</div>'
+            return '<div class="' + _class + '" data-year="' + d.year + '">' + html + '</div>'
         },
 
         _renderTypes: {
@@ -706,8 +730,6 @@ Datepicker.Cell = function () {
 
         _handleClick: {
             days: function (el) {
-                if (el.hasClass('-disabled-')) return;
-
                 var date = el.data('date'),
                     month = el.data('month'),
                     year = el.data('year'),
@@ -749,6 +771,8 @@ Datepicker.Cell = function () {
         _onClickCell: function (e) {
             var $el = $(e.target).closest('.datepicker--cell');
 
+            if ($el.hasClass('-disabled-')) return;
+
             this._handleClick[this.d.currentView].bind(this)($el);
         }
     };
diff --git a/index.html b/index.html
index 957805b..f1c4bc4 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,6 @@
         <script type="text/javascript" src="dist/js/datepicker.js"></script>
         <script type="text/javascript">
             $('.calendar').datepicker({
-                maxDate: new Date(2016, 0, 10),
                 onChange: function (dateString, date, inst) {
                     console.log(dateString);
                 }
diff --git a/js/datepicker/body.js b/js/datepicker/body.js
index db0ed9c..0d2e94e 100644
--- a/js/datepicker/body.js
+++ b/js/datepicker/body.js
@@ -88,13 +88,19 @@
             var _class = "datepicker--cell datepicker--cell-day",
                 currentDate = new Date(),
                 d = Datepicker.getParsedDate(date),
+                render,
                 html = d.date;
 
+            if (this.opts.onRenderCell) {
+                render = this.opts.onRenderCell(date, 'day') || {};
+                html = render.html ? render.html : html;
+                _class += render.classes ? ' ' + render.classes : '';
+            }
 
             if (this.d.isWeekend(d.day)) _class += " -weekend-";
             if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
             if (this.d._isSelected(date, 'day')) _class += ' -selected-';
-            if (!this.d._isInRange(date)) _class += ' -disabled-';
+            if (!this.d._isInRange(date) || render.disabled) _class += ' -disabled-';
             if (d.month != this.d.parsedDate.month) {
                 _class += " -other-month-";
 
@@ -134,12 +140,20 @@
             var _class = "datepicker--cell datepicker--cell-month",
                 d = Datepicker.getParsedDate(date),
                 currentDate = new Date(),
-                loc = this.d.loc;
+                loc = this.d.loc,
+                html = loc.months[d.month],
+                render = {};
+
+            if (this.opts.onRenderCell) {
+                render = this.opts.onRenderCell(date, 'month') || {};
+                html = render.html ? render.html : html;
+                _class += render.classes ? ' ' + render.classes : '';
+            }
 
             if (Datepicker.isSame(currentDate, date, 'month')) _class += ' -current-';
-            if (!this.d._isInRange(date, 'month')) _class += ' -disabled-';
+            if (!this.d._isInRange(date, 'month') || render.disabled) _class += ' -disabled-';
 
-            return '<div class="' + _class + '" data-month="' + d.month + '">' + loc.months[d.month] + '</div>'
+            return '<div class="' + _class + '" data-month="' + d.month + '">' + html + '</div>'
         },
 
         _getYearsHtml: function (date) {
@@ -160,16 +174,24 @@
             var _class = "datepicker--cell datepicker--cell-year",
                 decade = Datepicker.getDecade(this.d.date),
                 currentDate = new Date(),
-                d = Datepicker.getParsedDate(date);
+                d = Datepicker.getParsedDate(date),
+                html = d.year,
+                render = {};
+
+            if (this.opts.onRenderCell) {
+                render = this.opts.onRenderCell(date, 'year') || {};
+                html = render.html ? render.html : html;
+                _class += render.classes ? ' ' + render.classes : '';
+            }
 
             if (d.year < decade[0] || d.year > decade[1]) {
-                _class += ' -another-decade-';
+                _class += ' -other-decade-';
             }
 
             if (Datepicker.isSame(currentDate, date, 'year')) _class += ' -current-';
-            if (!this.d._isInRange(date, 'year')) _class += ' -disabled-';
+            if (!this.d._isInRange(date, 'year') || render.disabled) _class += ' -disabled-';
 
-            return '<div class="' + _class + '" data-year="' + d.year + '">' + d.year + '</div>'
+            return '<div class="' + _class + '" data-year="' + d.year + '">' + html + '</div>'
         },
 
         _renderTypes: {
@@ -211,8 +233,6 @@
 
         _handleClick: {
             days: function (el) {
-                if (el.hasClass('-disabled-')) return;
-
                 var date = el.data('date'),
                     month = el.data('month'),
                     year = el.data('year'),
@@ -254,6 +274,8 @@
         _onClickCell: function (e) {
             var $el = $(e.target).closest('.datepicker--cell');
 
+            if ($el.hasClass('-disabled-')) return;
+
             this._handleClick[this.d.currentView].bind(this)($el);
         }
     };
diff --git a/js/datepicker/datepicker.js b/js/datepicker/datepicker.js
index 1d4dc5e..a82d65a 100644
--- a/js/datepicker/datepicker.js
+++ b/js/datepicker/datepicker.js
@@ -16,6 +16,8 @@ var Datepicker;
             start: '', // Start date
             weekends: [6, 0],
             defaultView: 'days',
+            //TODO сделать минимальный вид
+            minView: 'days',
             dateFormat: 'dd.mm.yyyy',
             toggleSelected: true,
 
@@ -37,8 +39,8 @@ var Datepicker;
             nextHtml: '&raquo;',
 
             // events
-            //TODO сделать обратный вызов
-            onChange: ''
+            onChange: '',
+            onRenderCell: ''
         };
 
     Datepicker  = function (el, options) {
diff --git a/sass/datepicker/_cell.scss b/sass/datepicker/_cell.scss
index 2782fe1..4eeb6af 100644
--- a/sass/datepicker/_cell.scss
+++ b/sass/datepicker/_cell.scss
@@ -98,7 +98,7 @@
   width: 100% / $yearsPerRow;
   height: 40px;
 
-  &.-another-decade- {
+  &.-other-decade- {
     color: $colorAnotherMonth;
   }
 }
\ No newline at end of file