Fix endDate trigger; add config options for period labels; trigger change for month-select, year-select, decade-select.

.gitignore

@@ -3,3 +3,4 @@ dist/website
 .tmp
 .sass-cache
 bower_components
+/.idea/

src/scripts/daterangepicker/calendar-view.coffee

@@ -1,5 +1,6 @@
 class CalendarView
   constructor: (mainView, dateSubscribable, type) ->
+    @allEvents = mainView.allEvents
     @period = mainView.period
     @single = mainView.single
     @timeZone = mainView.timeZone
@@ -35,6 +36,16 @@ class CalendarView
           date = @firstYearOfDecade(date)
       date
 
+    @lastDate = ko.pureComputed () =>
+      date = @currentDate().clone().endOf(@period.scale())
+      switch @period()
+        when 'day', 'week'
+          firstDate = @firstDate().clone()
+          date = firstDate.add(6, 'week').subtract(1, 'day')
+        when 'year'
+          date = @lastYearOfDecade(date)
+      date
+
     @activeDate.subscribe (newValue) =>
       @currentDate(newValue)
 
@@ -57,6 +68,14 @@ class CalendarView
   inRange: (date) =>
     date.isAfter(@startDate(), @period()) && date.isBefore(@endDate(), @period()) || (date.isSame(@startDate(), @period()) || date.isSame(@endDate(), @period()))
 
+  isEvent: (date) =>
+    ref = @allEvents()
+    for j in ref
+      if (date.isSame(j, 'year') && date.isSame(j, 'month') && date.isSame(j, 'day'))
+        return true
+    return false
+
+
   tableValues: (date) =>
     format = @period.format()
     switch @period()
@@ -102,9 +121,11 @@ class CalendarView
     periodIsDay ||= @period() == 'day'
     differentMonth = !date.isSame(@currentDate(), 'month')
     inRange = @inRange(date)
+    isEvent = @isEvent(date)
     {
       "in-range": !@single() && (inRange || onRangeEnd)
       "#{@type}-date": onRangeEnd
+      "highlight": !@single() && (inRange || onRangeEnd) && isEvent
       "clickable": withinBoundaries && !@isCustomPeriodRangeActive()
       "out-of-boundaries": !withinBoundaries || @isCustomPeriodRangeActive()
       "unavailable": (periodIsDay && differentMonth)
@@ -116,4 +137,12 @@ class CalendarView
     firstYear = currentYear - 4
     offset = Math.floor((date.year() - firstYear) / 9)
     year = firstYear + offset * 9
-    MomentUtil.tz([year], @timeZone())
+    MomentUtil.tz([year], @timeZone()).startOf('year')
+
+  lastYearOfDecade: (date) ->
+    # we use current year here so that it's always in the middle of the calendar
+    currentYear = MomentUtil.tz(moment(), @timeZone()).year()
+    lastYear = currentYear + 4
+    offset = Math.ceil((date.year() - lastYear) / 9)
+    year = lastYear + offset * 9
+    MomentUtil.tz([year], @timeZone()).endOf('year')

src/scripts/daterangepicker/config.coffee

@@ -1,6 +1,7 @@
 class Config
   constructor: (options = {}) ->
     @firstDayOfWeek = @_firstDayOfWeek(options.firstDayOfWeek)
+    @allEvents = @_allEvents(options.allEvents)
     @timeZone = @_timeZone(options.timeZone)
     @periods = @_periods(options.periods)
     @customPeriodRanges = @_customPeriodRanges(options.customPeriodRanges)
@@ -36,6 +37,9 @@ class Config
   _firstDayOfWeek: (val) ->
     ko.observable(if val then val else 0) # default to Sunday (0)
 
+  _allEvents: (val) ->
+    ko.observable(val || [])
+
   _timeZone: (val) ->
     ko.observable(val || 'UTC')
 
@@ -114,7 +118,12 @@ class Config
       cancelButtonTitle: 'Cancel'
       inputFormat: 'L'
       startLabel: 'Start'
-      endLabel: 'End'
+      endLabel: 'End',
+      dayLabel: 'Day',
+      weekLabel: 'Week',
+      monthLabel: 'Month',
+      quarterLabel: 'Quarter',
+      yearLabel: 'Year'
     }, val || {})
 
   _orientation: (val) ->

src/scripts/daterangepicker/date-range-picker-view.coffee

@@ -20,15 +20,25 @@ class DateRangePickerView
         if @standalone()
           @updateDateRange()
 
+    @endDate.subscribe (newValue) =>
+      if not @single() and @standalone()
+        @updateDateRange()
+
     @style = ko.observable({})
 
     if @callback
       @dateRange.subscribe (newValue) =>
         [startDate, endDate] = newValue
-        @callback(startDate.clone(), endDate.clone(), @period())
+        @callback(startDate.clone(), endDate.clone(), @period(), @startCalendar.firstDate(), @endCalendar.lastDate())
+      @startCalendar.firstDate.subscribe (newValue) =>
+        [startDate, endDate] = @dateRange()
+        @callback(startDate.clone(), endDate.clone(), @period(), newValue, @endCalendar.lastDate())
+      @endCalendar.lastDate.subscribe (newValue) =>
+        [startDate, endDate] = @dateRange()
+        @callback(startDate.clone(), endDate.clone(), @period(), @startCalendar.firstDate(), newValue)
       if @forceUpdate
         [startDate, endDate] = @dateRange()
-        @callback(startDate.clone(), endDate.clone(), @period())
+        @callback(startDate.clone(), endDate.clone(), @period(), @startCalendar.firstDate(), @endCalendar.lastDate())
 
     if @anchorElement
       wrapper = $("<div data-bind=\"stopBinding: true\"></div>").appendTo(@parentElement)
@@ -49,6 +59,9 @@ class DateRangePickerView
 
   periodProxy: Period
 
+  getLocale: () ->
+    @locale
+
   calendars: () ->
     if @single()
       [@startCalendar]

src/scripts/daterangepicker/period.coffee

@@ -29,18 +29,18 @@ class Period
       when 'year'
         'YYYY'
 
-  @title: (period) ->
+  @title: (period, localeObj) ->
     switch period
       when 'day'
-        'Day'
+        localeObj.dayLabel
       when 'week'
-        'Week'
+        localeObj.weekLabel
       when 'month'
-        'Month'
+        localeObj.monthLabel
       when 'quarter'
-        'Quarter'
+        localeObj.quarterLabel
       when 'year'
-        'Year'
+        localeObj.yearLabel
 
   @dimentions: (period) ->
     switch period

src/scripts/daterangepicker/util/knockout.coffee

@@ -13,12 +13,12 @@ ko.bindingHandlers.daterangepicker = do ->
       observable = valueAccessor()
       options = ko.unwrap(allBindings.get(@_optionsKey)) || {}
       $(element).daterangepicker(options, (startDate, endDate, period) ->
-        observable([startDate, endDate])
+        observable([startDate, endDate, allEvents])
       )
 
     update: (element, valueAccessor, allBindings) ->
       $element = $(element)
-      [startDate, endDate] = valueAccessor()()
+      [startDate, endDate, allEvents] = valueAccessor()()
       dateFormat = ko.unwrap(allBindings.get(@_formatKey)) || 'MMM D, YYYY'
       startDateText = moment(startDate).format(dateFormat)
       endDateText = moment(endDate).format(dateFormat)
@@ -33,3 +33,10 @@ ko.bindingHandlers.daterangepicker = do ->
 
         $element.data('daterangepicker').startDate(startDate)
         $element.data('daterangepicker').endDate(endDate)
+        $element.data('daterangepicker').allEvents(allEvents)
+
+ko.bindingHandlers.fireChange =
+  update: (element, valueAccessor, allBindings) ->
+    selectorValue = ko.unwrap(allBindings.get('value'))
+    if selectorValue
+      $(element).change()

src/templates/daterangepicker.html

@@ -2,7 +2,7 @@
   <div class="controls">
     <ul class="periods">
       <!-- ko foreach: $data.periods -->
-      <li class="period" data-bind="css: {active: $parent.isActivePeriod($data) && !$parent.isCustomPeriodRangeActive()}, text: $parent.periodProxy.title($data), click: function(){ $parent.setPeriod($data); }"></li>
+      <li class="period" data-bind="css: {active: $parent.isActivePeriod($data) && !$parent.isCustomPeriodRangeActive()}, text: $parent.periodProxy.title($data, $parent.getLocale()), click: function(){ $parent.setPeriod($data); }"></li>
       <!-- /ko -->
       <!-- ko foreach: $data.customPeriodRanges -->
       <li class="period" data-bind="css: {active: $parent.isActiveCustomPeriodRange($data)}, text: $data.title, click: function(){ $parent.setCustomPeriodRange($data); }"></li>
@@ -31,9 +31,9 @@
           <button data-bind="click: $data.clickPrevButton"><span class="arrow-left"></span></button>
         </div>
         <div class="calendar-selects">
-          <select class="month-select" data-bind="options: $data.monthOptions(), optionsText: $data.monthFormatter, valueAllowUnset: true, value: $data.selectedMonth, css: {hidden: !$data.monthSelectorAvailable()}"></select>
-          <select class="year-select" data-bind="options: $data.yearOptions(), optionsText: $data.yearFormatter, valueAllowUnset: true, value: $data.selectedYear, css: {hidden: !$data.yearSelectorAvailable()}"></select>
-          <select class="decade-select" data-bind="options: $data.decadeOptions(), optionsText: $data.decadeFormatter, valueAllowUnset: true, value: $data.selectedDecade, css: {hidden: !$data.decadeSelectorAvailable()}"></select>
+          <select class="month-select" data-bind="options: $data.monthOptions(), optionsText: $data.monthFormatter, valueAllowUnset: true, value: $data.selectedMonth, fireChange: true, css: {hidden: !$data.monthSelectorAvailable()}"></select>
+          <select class="year-select" data-bind="options: $data.yearOptions(), optionsText: $data.yearFormatter, valueAllowUnset: true, value: $data.selectedYear, fireChange: true, css: {hidden: !$data.yearSelectorAvailable()}"></select>
+          <select class="decade-select" data-bind="options: $data.decadeOptions(), optionsText: $data.decadeFormatter, valueAllowUnset: true, value: $data.selectedDecade, fireChange: true, css: {hidden: !$data.decadeSelectorAvailable()}"></select>
         </div>
         <div class="arrow" data-bind="css: $data.nextArrowCss()">
           <button data-bind="click: $data.clickNextButton"><span class="arrow-right"></span></button>