Merge pull request #168 from erickjth/day-header-selection

Make day header clickable.

build/kalendae.css

@@ -156,6 +156,11 @@
  color:#666;
 }
 
+.kalendae .k-header.k-active span {
+ cursor: pointer;
+ border-radius:3px;
+}
+
 .kalendae .k-days span {
  text-align:right;
  width:20px;
@@ -193,7 +198,8 @@
 }
 
 /** Selected day, when inside the selectable area **/
-.kalendae .k-days span.k-selected.k-active {
+.kalendae .k-days span.k-selected.k-active,
+.kalendae .k-header.k-active span.k-selected {
  background:#7EA0E2;
  color:white;
 }
@@ -212,7 +218,8 @@
 }
 
 /** Selectable day, hovered **/
-.kalendae .k-days span.k-active:hover {
+.kalendae .k-days span.k-active:hover,
+.kalendae .k-days span.k-active.k-day-hover-active {
  border-color:#666;
 }
 

index.html

@@ -83,7 +83,31 @@ <h1>Kalendae</h1>
  selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]
  });
 
+ </script>
 
+ <p>Month header day select (Multi-select)</p>
+ <script type="text/javascript" charset="utf-8">
+ var firstDay = Kalendae.moment().startOf('month').weekday(2),
+ secondDay = Kalendae.moment().startOf('month').weekday(4),
+ endMonth = Kalendae.moment().endOf('month');
+ selected = [];
+
+ while(firstDay <= endMonth) {
+ if (firstDay >= Kalendae.moment().startOf('month')) {
+ selected.push(firstDay.clone());
+ selected.push(secondDay.clone());
+ }
+ firstDay.add(7, 'd');
+ secondDay.add(7, 'd');
+ }
+
+ new Kalendae({
+ attachTo:document.body,
+ months:3,
+ mode:'multiple',
+ dayHeaderClickable: true,
+ selected: selected
+ });
  </script>
 
  <p>Week Select</p>
@@ -173,7 +197,7 @@ <h1>Kalendae</h1>
  <hr>
  So is the one on this input.
  <input type="text" class="auto-kal">
- 
+
  <hr>
  <div style="width: 300px;height: 300px;overflow:scroll;border:1px solid black;">
  Scroll down and left to find an input.

readme.md

@@ -122,6 +122,8 @@ The following options are available for configuration.
 
 - `dayOutOfMonthClickable`: Allow clicks on days that fall outside of the currently focused month. Default is `false`.
 
+- `dayHeaderClickable`: Allow click on header days to select all instances of the selected day name. It only works in "multiple" mode. Default is `false`.
+
 - `useYearNav`: Include the double-arrow year navigation. Default is `true`.
 
 - `side`: Chooses the side on which to display the picker. Default is `bottom`.
@@ -248,4 +250,3 @@ To create a minified version, run `make minified`. If the minified file is blan
 ##License
 
 Kalendae is released under an MIT license and is freely distributable.
-

src/main.js

@@ -121,10 +121,31 @@ var Kalendae = function (targetElement, options) {
  $caption = util.make('span', {'class':classes.caption}, $title); //title caption
 
  //column headers
- $header = util.make('div', {'class':classes.header}, $cal);
+ $header = util.make('div', {'class':classes.header + ' ' + (opts.dayHeaderClickable == true ? classes.dayActive : '')}, $cal);
  i = 0;
  do {
- $span = util.make('span', {}, $header);
+ $span = util.make('span', {'data-day':i}, $header);
+
+ if (opts.dayHeaderClickable == true && opts.mode == 'multiple') {
+ $span.addEventListener("mouseover", function(e){
+ var daysContainer = e.target.parentNode.nextSibling;
+ daysToHover = daysContainer.getElementsByClassName('k-day-week-' + e.target.getAttribute('data-day'));
+ if (daysToHover.length > 0) {
+ for (var i = 0; i < daysToHover.length; i++) {
+ if (util.hasClassName(daysToHover[i], classes.dayActive)) util.addClassName(daysToHover[i], 'k-day-hover-active');
+ }
+ }
+ });
+ $span.addEventListener("mouseleave", function(e){
+ var daysContainer = e.target.parentNode.nextSibling;
+ daysToHover = daysContainer.getElementsByClassName('k-day-week-' + e.target.getAttribute('data-day'));
+ if (daysToHover.length > 0) {
+ for (var i = 0; i < daysToHover.length; i++) {
+ if (util.hasClassName(daysToHover[i], classes.dayActive)) util.removeClassName(daysToHover[i], 'k-day-hover-active');
+ }
+ }
+ });
+ }
  $span.innerHTML = columnHeaders[i];
  } while (++i < 7);
 
@@ -146,6 +167,7 @@ var Kalendae = function (targetElement, options) {
 
  //store each calendar view for easy redrawing
  calendars.push({
+ header:$header,
  caption:$caption,
  days:dayNodes
  });
@@ -223,6 +245,20 @@ var Kalendae = function (targetElement, options) {
  }
  }
  return false;
+
+ } else if (util.hasClassName(target.parentNode, classes.header)) {
+ if (opts.mode == 'multiple' && opts.dayHeaderClickable == true) {
+ var parentSelected = util.hasClassName(target, classes.daySelected),
+ month = target.parentNode.parentNode.getAttribute('data-datestart'),
+ dayToSelect = target.getAttribute('data-day');
+
+ if (parentSelected == true) {
+ self.monthDaySelected(month, dayToSelect, true);
+ } else {
+ self.monthDaySelected(month, dayToSelect, false);
+ }
+ }
+ return false;
  }
 
  return false;
@@ -247,6 +283,7 @@ Kalendae.prototype = {
  selected :null, /* dates already selected. can be string, date, or array of strings or dates. */
  mode :'single', /* single, multiple, range */
  dayOutOfMonthClickable:false,
+ dayHeaderClickable :false,
  format :null, /* string used for parsing dates. */
  subscribe :null, /* object containing events to subscribe to */
 
@@ -444,6 +481,23 @@ Kalendae.prototype = {
  this.draw();
  },
 
+ monthDaySelected: function(month, daynumber, unselected) {
+ var days = moment(month).startOf('month').weekday(daynumber),
+ endMonth = moment(month).endOf('month');
+ selected = [];
+
+ while(days <= endMonth) {
+ if (days >= moment(month).startOf('month') && !this.direction(days)) {
+ if (unselected) {
+ this.removeSelected(moment(days).hours(12));
+ } else {
+ this.addSelected(moment(days).hours(12));
+ }
+ }
+ days.add(7, 'd');
+ }
+ },
+
  makeSelectedDateVisible: function (date) {
  outOfViewMonth = moment(date).date('1').diff(this.viewStartDate,'months');
 
@@ -479,8 +533,10 @@ Kalendae.prototype = {
  klass,
  i=0, c,
  j=0, k,
+ t=0, z,
  w,
  s,
+ headers,
  dateString,
  opts = this.settings,
  diff;
@@ -493,9 +549,19 @@ Kalendae.prototype = {
  //if the first day of the month is less than our week start, back up a week
 
  cal = this.calendars[i];
+
+ cal.header.parentNode.setAttribute('data-datestart', month.format(this.settings.dayAttributeFormat));
+
  cal.caption.innerHTML = month.format(this.settings.titleFormat);
  j = 0;
  w = 0;
+ t = 0;
+ headers = [];
+ for (var z = 0; z < 7; z++) {
+ util.removeClassName(cal.header.children[z], classes.daySelected);
+ headers[z] = 0;
+ }
+
  do {
  if (opts.mode == 'week') {
  if (((j % 7) === 0) && (j !== 0)) {
@@ -512,6 +578,13 @@ Kalendae.prototype = {
 
  if (s) klass.push(({'-1':classes.dayInRange,'1':classes.daySelected, 'true':classes.daySelected})[s]);
 
+ if (opts.dayHeaderClickable == true && opts.mode == 'multiple') {
+ klass.push('k-day-week-' + day.weekday());
+ if ((s == true || s == 1) && !this.direction(day) && month.format('M') == day.format('M')) {
+ headers[day.weekday()] = headers[day.weekday()] + 1;
+ }
+ }
+
  if (day.month() != month.month()) klass.push(classes.dayOutOfMonth);
  else klass.push(classes.dayInMonth);
 
@@ -529,6 +602,25 @@ Kalendae.prototype = {
 
  day.add(1, 'days');
  } while (++j < 42);
+ z = 0;
+ if (headers.length > 0) {
+ do {
+ if (headers[z] > 0) {
+ var firstDay = Kalendae.moment(month).startOf('month').weekday(z),
+ startMonth = Kalendae.moment(month).startOf('month');
+ endMonth = Kalendae.moment(month).endOf('month');
+ t = 0;
+ do {
+ if (firstDay >= startMonth && !this.direction(firstDay)) t++;
+ firstDay.add(7, 'd');
+ } while(firstDay <= endMonth)
+
+ if (t == headers[z]) util.addClassName(cal.header.children[z], classes.daySelected);
+ else util.removeClassName(cal.header.children[z], classes.daySelected);
+ }
+ } while(++z < headers.length)
+ }
+
  month.add(1, 'months');
  } while (++i < c);