added range picker

README.md

@@ -21,7 +21,7 @@ Download `jquery.bootstrap.year.calendar.min.css` and `jquery.bootstrap.year.cal
 Option name: `boostrapVersion`  
 Description:  choose boostrap compatibile
 Default: *4*  
-Accepts: *integer (3 or 4)* 
+Accepts: *integer * (3 or 4)
 
 Option name: `showHeaders`  
 Description:  determine if show months name  
@@ -33,7 +33,7 @@ Description:  start calendar from this year
 Default: current year  
 Accepts: *integer*  
 
-  Option name: `maxYear`  
+Option name: `maxYear`  
 Description:  max year to show  
 Default: *null*  
 Accepts: *integer*  
@@ -51,7 +51,7 @@ Accepts: *integer*
 Option name: `maxDayMessage`    
 Description:  Massage to alert when not max day is clicked  
 Default: *You can not choose day from past*  
-Accepts: *string*    
+Accepts: *string or false*    
 
  Option name: `minYear`  
 Description:  min year to show  
@@ -71,7 +71,7 @@ Accepts: *integer*
 Option name: `minDayMessage`    
 Description:  Massage to alert when not min day is clicked  
 Default: *You can not choose day from past*  
-Accepts: *string*    
+Accepts: *string or false*    
 
 Option name: `cols`  
 Description:  add  bootstrap cols-*cols* class to months view (IGNORE IT IN BOOTSTRAP 3)  
@@ -98,11 +98,29 @@ Description:  add  bootstrap cols-xl-*cols* class to months view   (IGNORE IT IN
 Default: *3*  
 Accepts: *integer*  (1-12)  
 
+Option name: `mode`  
+Description:  choose mode of using (check mode *xxx* options reference)
+Default: *classic*  
+Accepts: *string* (accepts: classic, rangepicker)   
+
+
+## Mode: classic  function refenece
 Option name: `addUniqueClassOnClick`  
 Description:  add  class to day on click  
 Default: *false*  
-Accepts: *integer*  (1-12)  
-
+Accepts: *integer*   
+
+## Mode: rangepicker  function refenece
+Option name: `maxDaysToChoose`  
+Description:  choose how many days user can choose;  
+Default: *false*  
+Accepts: *integer*   
+
+Option name: `maxDaysToChooseMessage`    
+Description:  massage to alert when choosen more than maxDaysToChoose in range picker  
+Default: *Maximum days to choose is: * -here you got maxDaysToChoose integer.  
+Accepts: *string or false* 
+
 ## Options example
 You need to choose option when initalizing calendar like this
 ```html
@@ -115,8 +133,20 @@ You need to choose option when initalizing calendar like this
 
 ## Function refence
 Function name: `appendText`  
-Description; Append text to specyfic day.  
-Parameters: *(text*(**string**)*, year*(**integer**)*, month*(**integer**)*, day*(**integer**)*, classes*(**string**)*)*
+Description: Append text to specyfic day.  
+Parameters: *(text*(**string (also accepts html)**)*, year*(**integer**)*, month*(**integer**)*, day*(**integer**)*, classes*(**string**)*)*
+
+Function name: `clearText`  
+Description: Clear text to specyfic day.  
+Parameter: *year*(**integer**)*, month*(**integer**)*, day*(**integer**)*, classes*(**string**)*)*
+
+Function name: `clearTextFromAll`  
+Description: Clear text from all days.
+Parameter: *none*
+
+Function name: `recalcHeight`  
+Description: Recalc tables height, in case of columns mismatch
+Parameters: *none*
 
 ## Functions example
 ```html
@@ -144,7 +174,7 @@ If you want to use it with chaning year funcionality, you need to use event call
 ```
 
 ## Events reference
-There are 4 events available at the moment. You can use is simply calling it, like in example.
+There are 7 events available at the moment. You can use is simply calling it, like in example.
 
 Event name: `jqyc.changeYearToPrevious`
 Tiggered: When year is changed to previous
@@ -156,7 +186,20 @@ Tiggered: When year is changed to next
 Tiggered: When year is changed to any
 
 Event name: `jqyc.dayChoose` .
-Tiggered: When any day is choosen
+Tiggered: When day in range is choosen
+
+Event name: `jqyc.notMinDayChoose` .
+Tiggered: When day out of range is choosen
+
+Event name: `jqyc.notMaxDayChoose` .
+Tiggered: When day out of range is choosen
+
+Event name: `jqyc.outOfRangeDayChoose` .
+Tiggered: When day out of range is choosen
+
+## Mode: rangepicker events reference
+Event name: `jqyc.rangeChoose` .
+Tiggered: When valid range is choosen
 
 ## Event example
 ```html
@@ -186,6 +229,21 @@ Tiggered: When any day is choosen
         var date = new Date(choosenYear, choosenMonth, choosenDay);
         console.log(date);
     });
+
+    //tiggered when range is choosen (ONLY FOR MODE: RANGEPICKER)
+    $('.calendar').on('jqyc.rageChoose', function (event) {
+        var startChoosenYear = $(this).data('rangepicker-start-year')];
+        var startChoosenMonth = $(this).data('rangepicker-start-month');
+        var startChoosenDay = $(this).data('rangepicker-start-day-of-month');
+        var startDate = new Date(startChoosenYear, startChoosenMonth, startChoosenDay);
+        console.log(startDate);
+
+        var endChoosenYear = $(this).data('rangepicker-end-year')];
+        var endChoosenMonth = $(this).data('rangepicker-end-month');
+        var endChoosenDay = $(this).data('rangepicker-end-day-of-month');
+        var endDate = new Date(endChoosenYear, endChoosenMonth, endChoosenDay);
+        console.log(endDate);
+    });
 </script>
 ```
 
@@ -218,7 +276,4 @@ Localization is very easy. You can simply localize Your calendar by passing opti
         }
     });
 </script>
-```
-
-
-
+```

jquery.bootstrap.year.calendar.css

@@ -37,4 +37,23 @@
 
 .jqyc-appended{
     background-color: #f6f7f8;
+}
+
+.jqyc-start-day-of-month {
+    background-color: #157EFB;
+    color: #FFF;
+    border-radius: 0.25rem;
+}
+
+.jqyc-end-day-of-month {
+    background-color: #157EFB;
+    color: #FFF;
+    border-radius: 0.25rem;
+}
+
+
+.jqyc-range-choosen-between{
+    background-color: #157EFB;
+    color: #FFF;
+    border-radius: 0.25rem;
 }