diff --git a/build/kalendae.css b/build/kalendae.css
index 8b36473..91476f8 100644
--- a/build/kalendae.css
+++ b/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;
}
diff --git a/index.html b/index.html
index 9b681ee..50b8751 100644
--- a/index.html
+++ b/index.html
@@ -83,7 +83,31 @@ Kalendae
selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]
});
+
+ Month header day select (Multi-select)
+
Week Select
@@ -173,7 +197,7 @@ Kalendae
So is the one on this input.
-
+
Scroll down and left to find an input.
diff --git a/readme.md b/readme.md
index 5ec37cc..b227120 100644
--- a/readme.md
+++ b/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.
-
diff --git a/src/main.js b/src/main.js
index 0045381..3c16838 100644
--- a/src/main.js
+++ b/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);