tsichart-core 2.0.0-beta.7 → 2.0.0

package/dist/index.umd.js

@@ -21599,6 +21599,8 @@
     return voronoi;
   }
 
+  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
   function getDefaultExportFromCjs (x) {
   	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
   }
@@ -29457,50 +29459,89 @@
           }
           return hclColor.toString();
       }
+      /**
+       * Creates an array of colors for split-by series
+       * @param displayState - The current display state
+       * @param aggKey - The aggregate key
+       * @param ignoreIsOnlyAgg - Whether to ignore the "only aggregate" optimization
+       * @returns Array of color strings for each split-by
+       */
       static createSplitByColors(displayState, aggKey, ignoreIsOnlyAgg = false) {
-          if (Object.keys(displayState[aggKey]["splitBys"]).length == 1)
+          const splitBys = displayState[aggKey]?.splitBys;
+          if (!splitBys) {
+              return [];
+          }
+          const splitByCount = Object.keys(splitBys).length;
+          // Early return for single split-by
+          if (splitByCount === 1) {
               return [displayState[aggKey].color];
-          var isOnlyAgg = Object.keys(displayState).reduce((accum, currAgg) => {
-              if (currAgg == aggKey)
-                  return accum;
-              if (displayState[currAgg]["visible"] == false)
-                  return accum && true;
-              return false;
-          }, true);
-          if (isOnlyAgg && !ignoreIsOnlyAgg) {
-              return this.generateColors(Object.keys(displayState[aggKey]["splitBys"]).length);
           }
-          var aggColor = displayState[aggKey].color;
-          var interpolateColor = linear().domain([0, Object.keys(displayState[aggKey]["splitBys"]).length])
-              .range([hcl$2(aggColor).darker().l, hcl$2(aggColor).brighter().l]);
-          var colors = [];
-          for (var i = 0; i < Object.keys(displayState[aggKey]["splitBys"]).length; i++) {
-              const newColor = hcl$2(aggColor);
+          // Create cache key for memoization
+          const cacheKey = `${aggKey}_${splitByCount}_${displayState[aggKey].color}_${ignoreIsOnlyAgg}`;
+          if (this.splitByColorCache.has(cacheKey)) {
+              return this.splitByColorCache.get(cacheKey);
+          }
+          const isOnlyVisibleAgg = !ignoreIsOnlyAgg && this.isOnlyVisibleAggregate(displayState, aggKey);
+          let colors;
+          if (isOnlyVisibleAgg) {
+              // Generate distinct colors when this is the only visible aggregate
+              colors = this.generateColors(splitByCount);
+          }
+          else {
+              // Generate color variations based on aggregate color
+              colors = this.generateSplitByColorVariations(displayState[aggKey].color, splitByCount);
+          }
+          // Cache the result
+          this.splitByColorCache.set(cacheKey, colors);
+          // Limit cache size to prevent memory leaks
+          if (this.splitByColorCache.size > 100) {
+              const firstKey = this.splitByColorCache.keys().next().value;
+              this.splitByColorCache.delete(firstKey);
+          }
+          return colors;
+      }
+      /**
+       * Helper method to check if an aggregate is the only visible one
+       */
+      static isOnlyVisibleAggregate(displayState, aggKey) {
+          for (const currAgg in displayState) {
+              if (currAgg !== aggKey && displayState[currAgg]?.visible !== false) {
+                  return false;
+              }
+          }
+          return true;
+      }
+      /**
+       * Helper method to generate color variations for split-bys
+       */
+      static generateSplitByColorVariations(baseColor, count) {
+          const baseHcl = hcl$2(baseColor);
+          const interpolateColor = linear()
+              .domain([0, count])
+              .range([baseHcl.darker().l, baseHcl.brighter().l]);
+          const colors = new Array(count);
+          for (let i = 0; i < count; i++) {
+              const newColor = hcl$2(baseColor);
               newColor.l = interpolateColor(i);
-              colors.push(newColor.formatHex());
+              colors[i] = newColor.formatHex();
           }
           return colors;
       }
+      /**
+       * Clears the split-by color cache (useful when display state changes significantly)
+       */
+      static clearSplitByColorCache() {
+          this.splitByColorCache.clear();
+      }
       static colorSplitBy(displayState, splitByIndex, aggKey, ignoreIsOnlyAgg = false) {
-          if (Object.keys(displayState[aggKey]["splitBys"]).length == 1)
-              return displayState[aggKey].color;
-          var isOnlyAgg = Object.keys(displayState).reduce((accum, currAgg) => {
-              if (currAgg == aggKey)
-                  return accum;
-              if (displayState[currAgg]["visible"] == false)
-                  return accum && true;
-              return false;
-          }, true);
-          if (isOnlyAgg && !ignoreIsOnlyAgg) {
-              var splitByColors = this.generateColors(Object.keys(displayState[aggKey]["splitBys"]).length);
-              return splitByColors[splitByIndex];
+          const colors = this.createSplitByColors(displayState, aggKey, ignoreIsOnlyAgg);
+          if (typeof splitByIndex === 'number' &&
+              Number.isInteger(splitByIndex) &&
+              splitByIndex >= 0 &&
+              splitByIndex < colors.length) {
+              return colors[splitByIndex];
           }
-          var aggColor = displayState[aggKey].color;
-          var interpolateColor = linear().domain([0, Object.keys(displayState[aggKey]["splitBys"]).length])
-              .range([hcl$2(aggColor).darker().l, hcl$2(aggColor).brighter().l]);
-          const newColor = hcl$2(aggColor);
-          newColor.l = interpolateColor(splitByIndex);
-          return newColor.formatHex();
+          return displayState[aggKey]?.color || '#000000';
       }
       static getTheme(theme) {
           return theme ? 'tsi-' + theme : 'tsi-dark';
@@ -29924,6 +29965,7 @@
       }
   }
   Utils.guidForNullTSID = Utils.guid();
+  Utils.splitByColorCache = new Map();
   Utils.equalToEventTarget = (function (current, event) {
       return (current == event.target);
   });
@@ -31537,9 +31579,9 @@
   // maintainable code, while at the same time manually optimizing for tiny minified file size,
   // browser compatibility without additional requirements
   // and very few assumptions about the user's page layout.
-  var global = typeof window !== 'undefined' ? window : null;
-  var ssr = global === null;
-  var document$1 = !ssr ? global.document : undefined;
+  var global$1 = typeof window !== 'undefined' ? window : null;
+  var ssr = global$1 === null;
+  var document$1 = !ssr ? global$1.document : undefined;
 
   // Save a couple long function names that are used frequently.
   // This optimization saves around 400 bytes.
@@ -32005,11 +32047,11 @@
           self.dragging = false;
 
           // Remove the stored event listeners. This is why we store them.
-          global[removeEventListener]('mouseup', self.stop);
-          global[removeEventListener]('touchend', self.stop);
-          global[removeEventListener]('touchcancel', self.stop);
-          global[removeEventListener]('mousemove', self.move);
-          global[removeEventListener]('touchmove', self.move);
+          global$1[removeEventListener]('mouseup', self.stop);
+          global$1[removeEventListener]('touchend', self.stop);
+          global$1[removeEventListener]('touchcancel', self.stop);
+          global$1[removeEventListener]('mousemove', self.move);
+          global$1[removeEventListener]('touchmove', self.move);
 
           // Clear bound function references
           self.stop = null;
@@ -32066,11 +32108,11 @@
           self.stop = stopDragging.bind(self);
 
           // All the binding. `window` gets the stop events in case we drag out of the elements.
-          global[addEventListener]('mouseup', self.stop);
-          global[addEventListener]('touchend', self.stop);
-          global[addEventListener]('touchcancel', self.stop);
-          global[addEventListener]('mousemove', self.move);
-          global[addEventListener]('touchmove', self.move);
+          global$1[addEventListener]('mouseup', self.stop);
+          global$1[addEventListener]('touchend', self.stop);
+          global$1[addEventListener]('touchcancel', self.stop);
+          global$1[addEventListener]('mousemove', self.move);
+          global$1[addEventListener]('touchmove', self.move);
 
           // Disable selection. Disable!
           a[addEventListener]('selectstart', NOOP);
@@ -33114,6 +33156,8 @@
           this.drawChart = drawChart;
           this.contextMenuElement = select(renderTarget).insert("div", ":first-child")
               .attr("class", "tsi-contextMenu")
+              .attr("aria-label", "Context Menu")
+              .attr("role", "menu")
               .style("left", "0px")
               .style("top", "0px");
       }
@@ -33202,6 +33246,7 @@
           var actionElementsEntered = actionElements.enter()
               .append("div")
               .attr("class", `tsi-actionElement`)
+              .attr("role", "menuitem")
               .classed('tsi-hasSubMenu', d => d.isNested)
               .merge(actionElements)
               .text(d => d.name)
@@ -33328,6 +33373,7 @@
           }).data([theme]);
           this.tooltipDiv = tooltip.enter().append('div')
               .attr('class', 'tsi-tooltip')
+              .attr('role', 'tooltip')
               .merge(tooltip)
               .each(function (d) {
               select(this).selectAll("*").remove();
@@ -36702,6 +36748,8 @@
               label.enter()
                   .append("text")
                   .attr("class", (d) => `tsi-swimLaneLabel-${lane} tsi-swimLaneLabel ${onClickPresentAndValid(d) ? 'tsi-boldOnHover' : ''}`)
+                  .attr("role", "heading")
+                  .attr("aria-level", "3")
                   .merge(label)
                   .style("text-anchor", "middle")
                   .attr("transform", d => `translate(${(-this.horizontalLabelOffset + swimlaneLabelConstants.labelLeftPadding)},${(d.offset + d.height / 2)}) rotate(-90)`)
@@ -36726,13 +36774,12 @@
           });
       }
       render(data, options, aggregateExpressionOptions) {
-          console.log('LineChart render called a');
           super.render(data, options, aggregateExpressionOptions);
           this.originalSwimLanes = this.aggregateExpressionOptions.map((aEO) => {
               return aEO.swimLane;
           });
           this.originalSwimLaneOptions = options.swimLaneOptions;
-          this.hasBrush = options && (options.brushMoveAction || options.brushMoveEndAction || options.brushContextMenuActions);
+          this.hasBrush = !!(options && (options.brushMoveAction || options.brushMoveEndAction || options.brushContextMenuActions));
           this.chartOptions.setOptions(options);
           this.chartMargins.right = this.chartOptions.labelSeriesWithMarker ? (SERIESLABELWIDTH + 8) : LINECHARTCHARTMARGINS.right;
           this.width = this.getWidth();
@@ -36781,6 +36828,7 @@
                   .attr("type", "button")
                   .on("click", function () {
                   self.overwriteSwimLanes();
+                  // cast to any to avoid TS incompatibility when spreading chartOptions instance into ILineChartOptions
                   self.render(self.data, { ...self.chartOptions, yAxisState: self.nextStackedState() }, self.aggregateExpressionOptions);
                   select(this).attr("aria-label", () => self.getString("set axis state to") + ' ' + self.nextStackedState());
                   setTimeout(() => select(this).node().focus(), 200);
@@ -36807,6 +36855,7 @@
               this.svgSelection = this.targetElement.append("svg")
                   .attr("class", "tsi-lineChartSVG tsi-chartSVG")
                   .attr('title', this.getString('Line chart'))
+                  .attr("role", "img")
                   .attr("height", this.height);
               var g = this.svgSelection.append("g")
                   .classed("svgGroup", true)
@@ -37192,6 +37241,55 @@
       }
   }
 
+  class TimezonePicker extends ChartComponent {
+      constructor(renderTarget) {
+          super(renderTarget);
+          this.timeZones = ["Local", "UTC", "Africa/Algiers", "Africa/Cairo", "Africa/Casablanca", "Africa/Harare", "Africa/Johannesburg", "Africa/Lagos", "Africa/Nairobi", "Africa/Windhoek", "America/Anchorage", "America/Bogota", "America/Buenos Aires", "America/Caracas", "America/Chicago", "America/Chihuahua", "America/Denver", "America/Edmonton", "America/Godthab", "America/Guatemala", "America/Halifax", "America/Indiana/Indianapolis", "America/Los Angeles", "America/Manaus", "America/Mexico City", "America/Montevideo", "America/New York", "America/Phoenix", "America/Santiago", "America/Sao Paulo", "America/St Johns", "America/Tijuana", "America/Toronto", "America/Vancouver", "America/Winnipeg", "Asia/Amman", "Asia/Beirut", "Asia/Baghdad", "Asia/Baku", "Asia/Bangkok", "Asia/Calcutta", "Asia/Colombo", "Asia/Dhaka", "Asia/Dubai", "Asia/Ho Chi Minh", "Asia/Hong Kong", "Asia/Irkutsk", "Asia/Istanbul", "Asia/Jakarta", "Asia/Jerusalem", "Asia/Kabul", "Asia/Karachi", "Asia/Kathmandu", "Asia/Krasnoyarsk", "Asia/Kuala Lumpur", "Asia/Kuwait", "Asia/Magadan", "Asia/Muscat", "Asia/Novosibirsk", "Asia/Qatar", "Asia/Rangoon", "Asia/Seoul", "Asia/Shanghai", "Asia/Singapore", "Asia/Taipei", "Asia/Tbilisi", "Asia/Tehran", "Asia/Tokyo", "Asia/Vladivostok", "Asia/Yakutsk", "Asia/Yekaterinburg", "Asia/Yerevan", "Atlantic/Azores", "Atlantic/Cape Verde", "Atlantic/South Georgia", "Australia/Adelaide", "Australia/Brisbane", "Australia/Canberra", "Australia/Darwin", "Australia/Hobart", "Australia/Melbourne", "Australia/Perth", "Australia/Queensland", "Australia/Sydney", "Europe/Amsterdam", "Europe/Andorra", "Europe/Athens", "Europe/Belfast", "Europe/Belgrade", "Europe/Berlin", "Europe/Brussels", "Europe/Budapest", "Europe/Dublin", "Europe/Helsinki", "Europe/Kiev", "Europe/Lisbon", "Europe/London", "Europe/Luxembourg", "Europe/Madrid", "Europe/Minsk", "Europe/Monaco", "Europe/Moscow", "Europe/Oslo", "Europe/Paris", "Europe/Rome", "Europe/Stockholm", "Europe/Vienna", "Europe/Warsaw", "Europe/Zurich", "Pacific/Auckland", "Pacific/Fiji", "Pacific/Guam", "Pacific/Honolulu", "Pacific/Midway", "Pacific/Tongatapu"];
+      }
+      sortTimezones() {
+          let filteredTimezones = this.timeZones.filter((tz) => {
+              return !(tz.toLowerCase() == 'local' || tz == 'UTC');
+          });
+          filteredTimezones.sort((a, b) => {
+              let aOffset = moment$1.tz(new Date(), a.split(' ').join('_')).utcOffset();
+              let bOffset = moment$1.tz(new Date(), b.split(' ').join('_')).utcOffset();
+              if (aOffset < bOffset) {
+                  return -1;
+              }
+              if (aOffset > bOffset) {
+                  return 1;
+              }
+              return 0;
+          });
+          this.timeZones = ['Local', 'UTC'].concat(filteredTimezones);
+      }
+      render(onTimezoneSelect, defaultTimeZone = null) {
+          this.targetElement = select(this.renderTarget)
+              .classed("tsi-timezonePicker", true);
+          var timezoneSelection = this.targetElement.append("select")
+              .attr("class", "tsi-timezonePicker tsi-select");
+          this.sortTimezones();
+          var options = timezoneSelection.selectAll("option")
+              .data(this.timeZones)
+              .enter()
+              .append("option")
+              .attr('value', d => d)
+              .text((tz) => Utils.convertTimezoneToLabel(tz, this.getString('Local')));
+          timezoneSelection.on("change", function (d) {
+              var timezone = select(this).node().value.replace(/\s/g, "_");
+              onTimezoneSelect(timezone);
+          });
+          defaultTimeZone = defaultTimeZone.replace(/_/g, " ");
+          if (defaultTimeZone != null) {
+              options.filter((d) => d == defaultTimeZone).attr("selected", true);
+          }
+          return;
+      }
+  }
+
+  var momentExports = requireMoment();
+  var moment = /*@__PURE__*/getDefaultExportFromCjs(momentExports);
+
   var pikaday$1 = {exports: {}};
 
   /*!
@@ -37207,1231 +37305,1177 @@
   	if (hasRequiredPikaday) return pikaday$1.exports;
   	hasRequiredPikaday = 1;
   	(function (module, exports) {
-  		(function (root, factory)
-  		{
+  		(function (root, factory) {
 
   		    var moment;
   		    {
   		        // CommonJS module
   		        // Load moment.js as an optional dependency
-  		        try { moment = requireMoment(); } catch (e) {}
+  		        try { moment = requireMoment(); } catch (e) { moment = (typeof window !== 'undefined' && window.moment) || undefined; }
   		        module.exports = factory(moment);
   		    }
-  		}(pikaday, function (moment)
-  		{
+  		}(typeof self !== 'undefined' ? self :
+  		    typeof window !== 'undefined' ? window :
+  		        typeof commonjsGlobal !== 'undefined' ? commonjsGlobal :
+  		            pikaday, function (moment) {
 
-  		    /**
-  		     * feature detection and helper functions
-  		     */
-  		    var hasMoment = typeof moment === 'function',
-
-  		    hasEventListeners = !!window.addEventListener,
-
-  		    document = window.document,
+  		                /**
+  		                 * feature detection and helper functions
+  		                 */
+  		                var hasMoment = typeof moment === 'function' || (moment && typeof moment.version === 'string'),
 
-  		    sto = window.setTimeout,
-
-  		    addEvent = function(el, e, callback, capture)
-  		    {
-  		        if (hasEventListeners) {
-  		            el.addEventListener(e, callback, !!capture);
-  		        } else {
-  		            el.attachEvent('on' + e, callback);
-  		        }
-  		    },
+  		                    hasEventListeners = !!window.addEventListener,
 
-  		    removeEvent = function(el, e, callback, capture)
-  		    {
-  		        if (hasEventListeners) {
-  		            el.removeEventListener(e, callback, !!capture);
-  		        } else {
-  		            el.detachEvent('on' + e, callback);
-  		        }
-  		    },
+  		                    document = window.document,
 
-  		    trim = function(str)
-  		    {
-  		        return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g,'');
-  		    },
+  		                    sto = window.setTimeout,
 
-  		    hasClass = function(el, cn)
-  		    {
-  		        return (' ' + el.className + ' ').indexOf(' ' + cn + ' ') !== -1;
-  		    },
+  		                    addEvent = function (el, e, callback, capture) {
+  		                        if (hasEventListeners) {
+  		                            el.addEventListener(e, callback, !!capture);
+  		                        } else {
+  		                            el.attachEvent('on' + e, callback);
+  		                        }
+  		                    },
 
-  		    addClass = function(el, cn)
-  		    {
-  		        if (!hasClass(el, cn)) {
-  		            el.className = (el.className === '') ? cn : el.className + ' ' + cn;
-  		        }
-  		    },
+  		                    removeEvent = function (el, e, callback, capture) {
+  		                        if (hasEventListeners) {
+  		                            el.removeEventListener(e, callback, !!capture);
+  		                        } else {
+  		                            el.detachEvent('on' + e, callback);
+  		                        }
+  		                    },
 
-  		    removeClass = function(el, cn)
-  		    {
-  		        el.className = trim((' ' + el.className + ' ').replace(' ' + cn + ' ', ' '));
-  		    },
+  		                    trim = function (str) {
+  		                        return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g, '');
+  		                    },
 
-  		    isArray = function(obj)
-  		    {
-  		        return (/Array/).test(Object.prototype.toString.call(obj));
-  		    },
+  		                    hasClass = function (el, cn) {
+  		                        return (' ' + el.className + ' ').indexOf(' ' + cn + ' ') !== -1;
+  		                    },
 
-  		    isDate = function(obj)
-  		    {
-  		        return (/Date/).test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
-  		    },
+  		                    addClass = function (el, cn) {
+  		                        if (!hasClass(el, cn)) {
+  		                            el.className = (el.className === '') ? cn : el.className + ' ' + cn;
+  		                        }
+  		                    },
+
+  		                    removeClass = function (el, cn) {
+  		                        el.className = trim((' ' + el.className + ' ').replace(' ' + cn + ' ', ' '));
+  		                    },
+
+  		                    isArray = function (obj) {
+  		                        return (/Array/).test(Object.prototype.toString.call(obj));
+  		                    },
+
+  		                    isDate = function (obj) {
+  		                        return (/Date/).test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
+  		                    },
+
+  		                    isWeekend = function (date) {
+  		                        var day = date.getDay();
+  		                        return day === 0 || day === 6;
+  		                    },
+
+  		                    isLeapYear = function (year) {
+  		                        // solution by Matti Virkkunen: http://stackoverflow.com/a/4881951
+  		                        return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
+  		                    },
+
+  		                    getDaysInMonth = function (year, month) {
+  		                        return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
+  		                    },
+
+  		                    setToStartOfDay = function (date) {
+  		                        if (isDate(date)) date.setHours(0, 0, 0, 0);
+  		                    },
+
+  		                    compareDates = function (a, b) {
+  		                        // weak date comparison (use setToStartOfDay(date) to ensure correct result)
+  		                        return a.getTime() === b.getTime();
+  		                    },
+
+  		                    extend = function (to, from, overwrite) {
+  		                        var prop, hasProp;
+  		                        for (prop in from) {
+  		                            hasProp = to[prop] !== undefined;
+  		                            if (hasProp && typeof from[prop] === 'object' && from[prop] !== null && from[prop].nodeName === undefined) {
+  		                                if (isDate(from[prop])) {
+  		                                    if (overwrite) {
+  		                                        to[prop] = new Date(from[prop].getTime());
+  		                                    }
+  		                                }
+  		                                else if (isArray(from[prop])) {
+  		                                    if (overwrite) {
+  		                                        to[prop] = from[prop].slice(0);
+  		                                    }
+  		                                } else {
+  		                                    to[prop] = extend({}, from[prop], overwrite);
+  		                                }
+  		                            } else if (overwrite || !hasProp) {
+  		                                to[prop] = from[prop];
+  		                            }
+  		                        }
+  		                        return to;
+  		                    },
+
+  		                    fireEvent = function (el, eventName, data) {
+  		                        var ev;
+
+  		                        if (document.createEvent) {
+  		                            ev = document.createEvent('HTMLEvents');
+  		                            ev.initEvent(eventName, true, false);
+  		                            ev = extend(ev, data);
+  		                            el.dispatchEvent(ev);
+  		                        } else if (document.createEventObject) {
+  		                            ev = document.createEventObject();
+  		                            ev = extend(ev, data);
+  		                            el.fireEvent('on' + eventName, ev);
+  		                        }
+  		                    },
 
-  		    isWeekend = function(date)
-  		    {
-  		        var day = date.getDay();
-  		        return day === 0 || day === 6;
-  		    },
+  		                    adjustCalendar = function (calendar) {
+  		                        if (calendar.month < 0) {
+  		                            calendar.year -= Math.ceil(Math.abs(calendar.month) / 12);
+  		                            calendar.month += 12;
+  		                        }
+  		                        if (calendar.month > 11) {
+  		                            calendar.year += Math.floor(Math.abs(calendar.month) / 12);
+  		                            calendar.month -= 12;
+  		                        }
+  		                        return calendar;
+  		                    },
 
-  		    isLeapYear = function(year)
-  		    {
-  		        // solution by Matti Virkkunen: http://stackoverflow.com/a/4881951
-  		        return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
-  		    },
+  		                    /**
+  		                     * defaults and localisation
+  		                     */
+  		                    defaults = {
 
-  		    getDaysInMonth = function(year, month)
-  		    {
-  		        return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
-  		    },
+  		                        // bind the picker to a form field
+  		                        field: null,
 
-  		    setToStartOfDay = function(date)
-  		    {
-  		        if (isDate(date)) date.setHours(0,0,0,0);
-  		    },
+  		                        // automatically show/hide the picker on `field` focus (default `true` if `field` is set)
+  		                        bound: undefined,
 
-  		    compareDates = function(a,b)
-  		    {
-  		        // weak date comparison (use setToStartOfDay(date) to ensure correct result)
-  		        return a.getTime() === b.getTime();
-  		    },
+  		                        // position of the datepicker, relative to the field (default to bottom & left)
+  		                        // ('bottom' & 'left' keywords are not used, 'top' & 'right' are modifier on the bottom/left position)
+  		                        position: 'bottom left',
 
-  		    extend = function(to, from, overwrite)
-  		    {
-  		        var prop, hasProp;
-  		        for (prop in from) {
-  		            hasProp = to[prop] !== undefined;
-  		            if (hasProp && typeof from[prop] === 'object' && from[prop] !== null && from[prop].nodeName === undefined) {
-  		                if (isDate(from[prop])) {
-  		                    if (overwrite) {
-  		                        to[prop] = new Date(from[prop].getTime());
-  		                    }
-  		                }
-  		                else if (isArray(from[prop])) {
-  		                    if (overwrite) {
-  		                        to[prop] = from[prop].slice(0);
-  		                    }
-  		                } else {
-  		                    to[prop] = extend({}, from[prop], overwrite);
-  		                }
-  		            } else if (overwrite || !hasProp) {
-  		                to[prop] = from[prop];
-  		            }
-  		        }
-  		        return to;
-  		    },
+  		                        // automatically fit in the viewport even if it means repositioning from the position option
+  		                        reposition: true,
 
-  		    fireEvent = function(el, eventName, data)
-  		    {
-  		        var ev;
-
-  		        if (document.createEvent) {
-  		            ev = document.createEvent('HTMLEvents');
-  		            ev.initEvent(eventName, true, false);
-  		            ev = extend(ev, data);
-  		            el.dispatchEvent(ev);
-  		        } else if (document.createEventObject) {
-  		            ev = document.createEventObject();
-  		            ev = extend(ev, data);
-  		            el.fireEvent('on' + eventName, ev);
-  		        }
-  		    },
+  		                        // the default output format for `.toString()` and `field` value
+  		                        format: 'YYYY-MM-DD',
 
-  		    adjustCalendar = function(calendar) {
-  		        if (calendar.month < 0) {
-  		            calendar.year -= Math.ceil(Math.abs(calendar.month)/12);
-  		            calendar.month += 12;
-  		        }
-  		        if (calendar.month > 11) {
-  		            calendar.year += Math.floor(Math.abs(calendar.month)/12);
-  		            calendar.month -= 12;
-  		        }
-  		        return calendar;
-  		    },
+  		                        // the toString function which gets passed a current date object and format
+  		                        // and returns a string
+  		                        toString: null,
 
-  		    /**
-  		     * defaults and localisation
-  		     */
-  		    defaults = {
+  		                        // used to create date object from current input string
+  		                        parse: null,
 
-  		        // bind the picker to a form field
-  		        field: null,
+  		                        // the initial date to view when first opened
+  		                        defaultDate: null,
 
-  		        // automatically show/hide the picker on `field` focus (default `true` if `field` is set)
-  		        bound: undefined,
+  		                        // make the `defaultDate` the initial selected value
+  		                        setDefaultDate: false,
 
-  		        // position of the datepicker, relative to the field (default to bottom & left)
-  		        // ('bottom' & 'left' keywords are not used, 'top' & 'right' are modifier on the bottom/left position)
-  		        position: 'bottom left',
+  		                        // first day of week (0: Sunday, 1: Monday etc)
+  		                        firstDay: 0,
 
-  		        // automatically fit in the viewport even if it means repositioning from the position option
-  		        reposition: true,
+  		                        // the default flag for moment's strict date parsing
+  		                        formatStrict: false,
 
-  		        // the default output format for `.toString()` and `field` value
-  		        format: 'YYYY-MM-DD',
+  		                        // the minimum/earliest date that can be selected
+  		                        minDate: null,
+  		                        // the maximum/latest date that can be selected
+  		                        maxDate: null,
 
-  		        // the toString function which gets passed a current date object and format
-  		        // and returns a string
-  		        toString: null,
+  		                        // number of years either side, or array of upper/lower range
+  		                        yearRange: 10,
 
-  		        // used to create date object from current input string
-  		        parse: null,
+  		                        // show week numbers at head of row
+  		                        showWeekNumber: false,
 
-  		        // the initial date to view when first opened
-  		        defaultDate: null,
+  		                        // Week picker mode
+  		                        pickWholeWeek: false,
 
-  		        // make the `defaultDate` the initial selected value
-  		        setDefaultDate: false,
+  		                        // used internally (don't config outside)
+  		                        minYear: 0,
+  		                        maxYear: 9999,
+  		                        minMonth: undefined,
+  		                        maxMonth: undefined,
 
-  		        // first day of week (0: Sunday, 1: Monday etc)
-  		        firstDay: 0,
+  		                        startRange: null,
+  		                        endRange: null,
 
-  		        // the default flag for moment's strict date parsing
-  		        formatStrict: false,
+  		                        isRTL: false,
 
-  		        // the minimum/earliest date that can be selected
-  		        minDate: null,
-  		        // the maximum/latest date that can be selected
-  		        maxDate: null,
+  		                        // Additional text to append to the year in the calendar title
+  		                        yearSuffix: '',
 
-  		        // number of years either side, or array of upper/lower range
-  		        yearRange: 10,
+  		                        // Render the month after year in the calendar title
+  		                        showMonthAfterYear: false,
 
-  		        // show week numbers at head of row
-  		        showWeekNumber: false,
+  		                        // Render days of the calendar grid that fall in the next or previous month
+  		                        showDaysInNextAndPreviousMonths: false,
 
-  		        // Week picker mode
-  		        pickWholeWeek: false,
+  		                        // Allows user to select days that fall in the next or previous month
+  		                        enableSelectionDaysInNextAndPreviousMonths: false,
 
-  		        // used internally (don't config outside)
-  		        minYear: 0,
-  		        maxYear: 9999,
-  		        minMonth: undefined,
-  		        maxMonth: undefined,
+  		                        // how many months are visible
+  		                        numberOfMonths: 1,
 
-  		        startRange: null,
-  		        endRange: null,
+  		                        // when numberOfMonths is used, this will help you to choose where the main calendar will be (default `left`, can be set to `right`)
+  		                        // only used for the first display or when a selected date is not visible
+  		                        mainCalendar: 'left',
 
-  		        isRTL: false,
+  		                        // Specify a DOM element to render the calendar in
+  		                        container: undefined,
 
-  		        // Additional text to append to the year in the calendar title
-  		        yearSuffix: '',
+  		                        // Blur field when date is selected
+  		                        blurFieldOnSelect: true,
 
-  		        // Render the month after year in the calendar title
-  		        showMonthAfterYear: false,
+  		                        // internationalization
+  		                        i18n: {
+  		                            previousMonth: 'Previous Month',
+  		                            nextMonth: 'Next Month',
+  		                            months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+  		                            weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+  		                            weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+  		                        },
 
-  		        // Render days of the calendar grid that fall in the next or previous month
-  		        showDaysInNextAndPreviousMonths: false,
+  		                        // Theme Classname
+  		                        theme: null,
 
-  		        // Allows user to select days that fall in the next or previous month
-  		        enableSelectionDaysInNextAndPreviousMonths: false,
+  		                        // events array
+  		                        events: [],
 
-  		        // how many months are visible
-  		        numberOfMonths: 1,
+  		                        // callback function
+  		                        onSelect: null,
+  		                        onOpen: null,
+  		                        onClose: null,
+  		                        onDraw: null,
 
-  		        // when numberOfMonths is used, this will help you to choose where the main calendar will be (default `left`, can be set to `right`)
-  		        // only used for the first display or when a selected date is not visible
-  		        mainCalendar: 'left',
+  		                        // Enable keyboard input
+  		                        keyboardInput: true
+  		                    },
 
-  		        // Specify a DOM element to render the calendar in
-  		        container: undefined,
 
-  		        // Blur field when date is selected
-  		        blurFieldOnSelect : true,
+  		                    /**
+  		                     * templating functions to abstract HTML rendering
+  		                     */
+  		                    renderDayName = function (opts, day, abbr) {
+  		                        day += opts.firstDay;
+  		                        while (day >= 7) {
+  		                            day -= 7;
+  		                        }
+  		                        return abbr ? opts.i18n.weekdaysShort[day] : opts.i18n.weekdays[day];
+  		                    },
+
+  		                    renderDay = function (opts) {
+  		                        var arr = [];
+  		                        var ariaSelected = 'false';
+  		                        if (opts.isEmpty) {
+  		                            if (opts.showDaysInNextAndPreviousMonths) {
+  		                                arr.push('is-outside-current-month');
+
+  		                                if (!opts.enableSelectionDaysInNextAndPreviousMonths) {
+  		                                    arr.push('is-selection-disabled');
+  		                                }
+
+  		                            } else {
+  		                                return '<td class="is-empty"></td>';
+  		                            }
+  		                        }
+  		                        if (opts.isDisabled) {
+  		                            arr.push('is-disabled');
+  		                        }
+  		                        if (opts.isToday) {
+  		                            arr.push('is-today');
+  		                        }
+  		                        if (opts.isSelected) {
+  		                            arr.push('is-selected');
+  		                            ariaSelected = 'true';
+  		                        }
+  		                        if (opts.hasEvent) {
+  		                            arr.push('has-event');
+  		                        }
+  		                        if (opts.isInRange) {
+  		                            arr.push('is-inrange');
+  		                        }
+  		                        if (opts.isStartRange) {
+  		                            arr.push('is-startrange');
+  		                        }
+  		                        if (opts.isEndRange) {
+  		                            arr.push('is-endrange');
+  		                        }
+  		                        return '<td data-day="' + opts.day + '" class="' + arr.join(' ') + '" aria-selected="' + ariaSelected + '">' +
+  		                            '<button tabIndex="-1" class="pika-button pika-day" type="button" ' +
+  		                            'data-pika-year="' + opts.year + '" data-pika-month="' + opts.month + '" data-pika-day="' + opts.day + '">' +
+  		                            opts.day +
+  		                            '</button>' +
+  		                            '</td>';
+  		                    },
+
+  		                    renderWeek = function (d, m, y) {
+  		                        // Lifted from http://javascript.about.com/library/blweekyear.htm, lightly modified.
+  		                        var onejan = new Date(y, 0, 1),
+  		                            weekNum = Math.ceil((((new Date(y, m, d) - onejan) / 86400000) + onejan.getDay() + 1) / 7);
+  		                        return '<td class="pika-week">' + weekNum + '</td>';
+  		                    },
+
+  		                    renderRow = function (days, isRTL, pickWholeWeek, isRowSelected) {
+  		                        return '<tr class="pika-row' + (pickWholeWeek ? ' pick-whole-week' : '') + (isRowSelected ? ' is-selected' : '') + '">' + (isRTL ? days.reverse() : days).join('') + '</tr>';
+  		                    },
+
+  		                    renderBody = function (rows) {
+  		                        return '<tbody>' + rows.join('') + '</tbody>';
+  		                    },
+
+  		                    renderHead = function (opts) {
+  		                        var i, arr = [];
+  		                        if (opts.showWeekNumber) {
+  		                            arr.push('<th></th>');
+  		                        }
+  		                        for (i = 0; i < 7; i++) {
+  		                            arr.push('<th scope="col"><abbr title="' + renderDayName(opts, i) + '">' + renderDayName(opts, i, true) + '</abbr></th>');
+  		                        }
+  		                        return '<thead><tr>' + (opts.isRTL ? arr.reverse() : arr).join('') + '</tr></thead>';
+  		                    },
+
+  		                    renderTitle = function (instance, c, year, month, refYear, randId) {
+  		                        var i, j, arr,
+  		                            opts = instance._o,
+  		                            isMinYear = year === opts.minYear,
+  		                            isMaxYear = year === opts.maxYear,
+  		                            html = '<div id="' + randId + '" class="pika-title">',
+  		                            monthHtml,
+  		                            yearHtml,
+  		                            prev = true,
+  		                            next = true;
+
+  		                        for (arr = [], i = 0; i < 12; i++) {
+  		                            arr.push('<option value="' + (year === refYear ? i - c : 12 + i - c) + '"' +
+  		                                (i === month ? ' selected="selected"' : '') +
+  		                                ((isMinYear && i < opts.minMonth) || (isMaxYear && i > opts.maxMonth) ? 'disabled="disabled"' : '') + '>' +
+  		                                opts.i18n.months[i] + '</option>');
+  		                        }
 
-  		        // internationalization
-  		        i18n: {
-  		            previousMonth : 'Previous Month',
-  		            nextMonth     : 'Next Month',
-  		            months        : ['January','February','March','April','May','June','July','August','September','October','November','December'],
-  		            weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
-  		            weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
-  		        },
+  		                        monthHtml = '<div class="pika-label">' + opts.i18n.months[month] + '<select aria-label="select month" class="pika-select pika-select-month" tabindex="-1">' + arr.join('') + '</select></div>';
 
-  		        // Theme Classname
-  		        theme: null,
+  		                        if (isArray(opts.yearRange)) {
+  		                            i = opts.yearRange[0];
+  		                            j = opts.yearRange[1] + 1;
+  		                        } else {
+  		                            i = year - opts.yearRange;
+  		                            j = 1 + year + opts.yearRange;
+  		                        }
 
-  		        // events array
-  		        events: [],
+  		                        for (arr = []; i < j && i <= opts.maxYear; i++) {
+  		                            if (i >= opts.minYear) {
+  		                                arr.push('<option value="' + i + '"' + (i === year ? ' selected="selected"' : '') + '>' + (i) + '</option>');
+  		                            }
+  		                        }
+  		                        yearHtml = '<div class="pika-label">' + year + opts.yearSuffix + '<select aria-label="select year" class="pika-select pika-select-year" tabindex="-1">' + arr.join('') + '</select></div>';
 
-  		        // callback function
-  		        onSelect: null,
-  		        onOpen: null,
-  		        onClose: null,
-  		        onDraw: null,
+  		                        if (opts.showMonthAfterYear) {
+  		                            html += yearHtml + monthHtml;
+  		                        } else {
+  		                            html += monthHtml + yearHtml;
+  		                        }
 
-  		        // Enable keyboard input
-  		        keyboardInput: true
-  		    },
+  		                        if (isMinYear && (month === 0 || opts.minMonth >= month)) {
+  		                            prev = false;
+  		                        }
 
+  		                        if (isMaxYear && (month === 11 || opts.maxMonth <= month)) {
+  		                            next = false;
+  		                        }
 
-  		    /**
-  		     * templating functions to abstract HTML rendering
-  		     */
-  		    renderDayName = function(opts, day, abbr)
-  		    {
-  		        day += opts.firstDay;
-  		        while (day >= 7) {
-  		            day -= 7;
-  		        }
-  		        return abbr ? opts.i18n.weekdaysShort[day] : opts.i18n.weekdays[day];
-  		    },
+  		                        if (c === 0) {
+  		                            html += '<button tabIndex="-1" class="pika-prev' + (prev ? '' : ' is-disabled') + '" type="button">' + opts.i18n.previousMonth + '</button>';
+  		                        }
+  		                        if (c === (instance._o.numberOfMonths - 1)) {
+  		                            html += '<button tabIndex="-1" class="pika-next' + (next ? '' : ' is-disabled') + '" type="button">' + opts.i18n.nextMonth + '</button>';
+  		                        }
 
-  		    renderDay = function(opts)
-  		    {
-  		        var arr = [];
-  		        var ariaSelected = 'false';
-  		        if (opts.isEmpty) {
-  		            if (opts.showDaysInNextAndPreviousMonths) {
-  		                arr.push('is-outside-current-month');
-
-  		                if(!opts.enableSelectionDaysInNextAndPreviousMonths) {
-  		                    arr.push('is-selection-disabled');
-  		                }
+  		                        return html += '</div>';
+  		                    },
 
-  		            } else {
-  		                return '<td class="is-empty"></td>';
-  		            }
-  		        }
-  		        if (opts.isDisabled) {
-  		            arr.push('is-disabled');
-  		        }
-  		        if (opts.isToday) {
-  		            arr.push('is-today');
-  		        }
-  		        if (opts.isSelected) {
-  		            arr.push('is-selected');
-  		            ariaSelected = 'true';
-  		        }
-  		        if (opts.hasEvent) {
-  		            arr.push('has-event');
-  		        }
-  		        if (opts.isInRange) {
-  		            arr.push('is-inrange');
-  		        }
-  		        if (opts.isStartRange) {
-  		            arr.push('is-startrange');
-  		        }
-  		        if (opts.isEndRange) {
-  		            arr.push('is-endrange');
-  		        }
-  		        return '<td data-day="' + opts.day + '" class="' + arr.join(' ') + '" aria-selected="' + ariaSelected + '">' +
-  		                 '<button tabIndex="-1" class="pika-button pika-day" type="button" ' +
-  		                    'data-pika-year="' + opts.year + '" data-pika-month="' + opts.month + '" data-pika-day="' + opts.day + '">' +
-  		                        opts.day +
-  		                 '</button>' +
-  		               '</td>';
-  		    },
-
-  		    renderWeek = function (d, m, y) {
-  		        // Lifted from http://javascript.about.com/library/blweekyear.htm, lightly modified.
-  		        var onejan = new Date(y, 0, 1),
-  		            weekNum = Math.ceil((((new Date(y, m, d) - onejan) / 86400000) + onejan.getDay()+1)/7);
-  		        return '<td class="pika-week">' + weekNum + '</td>';
-  		    },
-
-  		    renderRow = function(days, isRTL, pickWholeWeek, isRowSelected)
-  		    {
-  		        return '<tr class="pika-row' + (pickWholeWeek ? ' pick-whole-week' : '') + (isRowSelected ? ' is-selected' : '') + '">' + (isRTL ? days.reverse() : days).join('') + '</tr>';
-  		    },
+  		                    renderTable = function (opts, data, randId) {
+  		                        return '<table cellpadding="0" cellspacing="0" class="pika-table" role="grid" aria-labelledby="' + randId + '">' + renderHead(opts) + renderBody(data) + '</table>';
+  		                    },
 
-  		    renderBody = function(rows)
-  		    {
-  		        return '<tbody>' + rows.join('') + '</tbody>';
-  		    },
 
-  		    renderHead = function(opts)
-  		    {
-  		        var i, arr = [];
-  		        if (opts.showWeekNumber) {
-  		            arr.push('<th></th>');
-  		        }
-  		        for (i = 0; i < 7; i++) {
-  		            arr.push('<th scope="col"><abbr title="' + renderDayName(opts, i) + '">' + renderDayName(opts, i, true) + '</abbr></th>');
-  		        }
-  		        return '<thead><tr>' + (opts.isRTL ? arr.reverse() : arr).join('') + '</tr></thead>';
-  		    },
+  		                    /**
+  		                     * Pikaday constructor
+  		                     */
+  		                    Pikaday = function (options) {
+  		                        var self = this,
+  		                            opts = self.config(options);
 
-  		    renderTitle = function(instance, c, year, month, refYear, randId)
-  		    {
-  		        var i, j, arr,
-  		            opts = instance._o,
-  		            isMinYear = year === opts.minYear,
-  		            isMaxYear = year === opts.maxYear,
-  		            html = '<div id="' + randId + '" class="pika-title">',
-  		            monthHtml,
-  		            yearHtml,
-  		            prev = true,
-  		            next = true;
-
-  		        for (arr = [], i = 0; i < 12; i++) {
-  		            arr.push('<option value="' + (year === refYear ? i - c : 12 + i - c) + '"' +
-  		                (i === month ? ' selected="selected"': '') +
-  		                ((isMinYear && i < opts.minMonth) || (isMaxYear && i > opts.maxMonth) ? 'disabled="disabled"' : '') + '>' +
-  		                opts.i18n.months[i] + '</option>');
-  		        }
+  		                        self._onMouseDown = function (e) {
+  		                            if (!self._v) {
+  		                                return;
+  		                            }
+  		                            e = e || window.event;
+  		                            var target = e.target || e.srcElement;
+  		                            if (!target) {
+  		                                return;
+  		                            }
 
-  		        monthHtml = '<div class="pika-label">' + opts.i18n.months[month] + '<select aria-label="select month" class="pika-select pika-select-month" tabindex="-1">' + arr.join('') + '</select></div>';
+  		                            if (!hasClass(target, 'is-disabled')) {
+  		                                if (hasClass(target, 'pika-button') && !hasClass(target, 'is-empty') && !hasClass(target.parentNode, 'is-disabled')) {
+  		                                    self.setDate(new Date(target.getAttribute('data-pika-year'), target.getAttribute('data-pika-month'), target.getAttribute('data-pika-day')));
+  		                                    if (opts.bound) {
+  		                                        sto(function () {
+  		                                            self.hide();
+  		                                            if (opts.blurFieldOnSelect && opts.field) {
+  		                                                opts.field.blur();
+  		                                            }
+  		                                        }, 100);
+  		                                    }
+  		                                }
+  		                                else if (hasClass(target, 'pika-prev')) {
+  		                                    self.prevMonth();
+  		                                }
+  		                                else if (hasClass(target, 'pika-next')) {
+  		                                    self.nextMonth();
+  		                                }
+  		                            }
+  		                            if (!hasClass(target, 'pika-select')) {
+  		                                // if this is touch event prevent mouse events emulation
+  		                                if (e.preventDefault) {
+  		                                    e.preventDefault();
+  		                                } else {
+  		                                    e.returnValue = false;
+  		                                    return false;
+  		                                }
+  		                            } else {
+  		                                self._c = true;
+  		                            }
+  		                        };
 
-  		        if (isArray(opts.yearRange)) {
-  		            i = opts.yearRange[0];
-  		            j = opts.yearRange[1] + 1;
-  		        } else {
-  		            i = year - opts.yearRange;
-  		            j = 1 + year + opts.yearRange;
-  		        }
+  		                        self._onChange = function (e) {
+  		                            e = e || window.event;
+  		                            var target = e.target || e.srcElement;
+  		                            if (!target) {
+  		                                return;
+  		                            }
+  		                            if (hasClass(target, 'pika-select-month')) {
+  		                                self.gotoMonth(target.value);
+  		                            }
+  		                            else if (hasClass(target, 'pika-select-year')) {
+  		                                self.gotoYear(target.value);
+  		                            }
+  		                        };
+
+  		                        self._onKeyChange = function (e) {
+  		                            e = e || window.event;
+  		                            // ignore if event comes from input box
+  		                            if (self.isVisible() && e.target && e.target.type !== 'text') {
+
+  		                                switch (e.keyCode) {
+  		                                    case 13:
+  		                                    case 27:
+  		                                        if (opts.field) {
+  		                                            opts.field.blur();
+  		                                        }
+  		                                        break;
+  		                                    case 37:
+  		                                        e.preventDefault();
+  		                                        self.adjustDate('subtract', 1);
+  		                                        break;
+  		                                    case 38:
+  		                                        self.adjustDate('subtract', 7);
+  		                                        break;
+  		                                    case 39:
+  		                                        self.adjustDate('add', 1);
+  		                                        break;
+  		                                    case 40:
+  		                                        self.adjustDate('add', 7);
+  		                                        break;
+  		                                }
+  		                            }
+  		                        };
 
-  		        for (arr = []; i < j && i <= opts.maxYear; i++) {
-  		            if (i >= opts.minYear) {
-  		                arr.push('<option value="' + i + '"' + (i === year ? ' selected="selected"': '') + '>' + (i) + '</option>');
-  		            }
-  		        }
-  		        yearHtml = '<div class="pika-label">' + year + opts.yearSuffix + '<select aria-label="select year" class="pika-select pika-select-year" tabindex="-1">' + arr.join('') + '</select></div>';
+  		                        self._onInputChange = function (e) {
+  		                            var date;
 
-  		        if (opts.showMonthAfterYear) {
-  		            html += yearHtml + monthHtml;
-  		        } else {
-  		            html += monthHtml + yearHtml;
-  		        }
+  		                            if (e.firedBy === self) {
+  		                                return;
+  		                            }
+  		                            if (opts.parse) {
+  		                                date = opts.parse(opts.field.value, opts.format);
+  		                            } else if (hasMoment) {
+  		                                date = moment(opts.field.value, opts.format, opts.formatStrict);
+  		                                date = (date && date.isValid()) ? date.toDate() : null;
+  		                            }
+  		                            else {
+  		                                date = new Date(Date.parse(opts.field.value));
+  		                            }
+  		                            // if (isDate(date)) {
+  		                            //   self.setDate(date);
+  		                            // }
+  		                            // if (!self._v) {
+  		                            //     self.show();
+  		                            // }
+  		                        };
+
+  		                        self._onInputFocus = function () {
+  		                            self.show();
+  		                        };
+
+  		                        self._onInputClick = function () {
+  		                            self.show();
+  		                        };
+
+  		                        self._onInputBlur = function () {
+  		                            // IE allows pika div to gain focus; catch blur the input field
+  		                            var pEl = document.activeElement;
+  		                            do {
+  		                                if (hasClass(pEl, 'pika-single')) {
+  		                                    return;
+  		                                }
+  		                            }
+  		                            while ((pEl = pEl.parentNode));
 
-  		        if (isMinYear && (month === 0 || opts.minMonth >= month)) {
-  		            prev = false;
-  		        }
+  		                            if (!self._c) {
+  		                                self._b = sto(function () {
+  		                                    self.hide();
+  		                                }, 50);
+  		                            }
+  		                            self._c = false;
+  		                        };
+
+  		                        self._onClick = function (e) {
+  		                            e = e || window.event;
+  		                            var target = e.target || e.srcElement,
+  		                                pEl = target;
+  		                            if (!target) {
+  		                                return;
+  		                            }
+  		                            if (!hasEventListeners && hasClass(target, 'pika-select')) {
+  		                                if (!target.onchange) {
+  		                                    target.setAttribute('onchange', 'return;');
+  		                                    addEvent(target, 'change', self._onChange);
+  		                                }
+  		                            }
+  		                            do {
+  		                                if (hasClass(pEl, 'pika-single') || pEl === opts.trigger) {
+  		                                    return;
+  		                                }
+  		                            }
+  		                            while ((pEl = pEl.parentNode));
+  		                            if (self._v && target !== opts.trigger && pEl !== opts.trigger) {
+  		                                self.hide();
+  		                            }
+  		                        };
 
-  		        if (isMaxYear && (month === 11 || opts.maxMonth <= month)) {
-  		            next = false;
-  		        }
+  		                        self.el = document.createElement('div');
+  		                        self.el.className = 'pika-single' + (opts.isRTL ? ' is-rtl' : '') + (opts.theme ? ' ' + opts.theme : '');
 
-  		        if (c === 0) {
-  		            html += '<button tabIndex="-1" class="pika-prev' + (prev ? '' : ' is-disabled') + '" type="button">' + opts.i18n.previousMonth + '</button>';
-  		        }
-  		        if (c === (instance._o.numberOfMonths - 1) ) {
-  		            html += '<button tabIndex="-1" class="pika-next' + (next ? '' : ' is-disabled') + '" type="button">' + opts.i18n.nextMonth + '</button>';
-  		        }
+  		                        addEvent(self.el, 'mousedown', self._onMouseDown, true);
+  		                        addEvent(self.el, 'touchend', self._onMouseDown, true);
+  		                        addEvent(self.el, 'change', self._onChange);
 
-  		        return html += '</div>';
-  		    },
+  		                        if (opts.keyboardInput) {
+  		                            addEvent(document, 'keydown', self._onKeyChange);
+  		                        }
 
-  		    renderTable = function(opts, data, randId)
-  		    {
-  		        return '<table cellpadding="0" cellspacing="0" class="pika-table" role="grid" aria-labelledby="' + randId + '">' + renderHead(opts) + renderBody(data) + '</table>';
-  		    },
+  		                        if (opts.field) {
+  		                            if (opts.container) {
+  		                                opts.container.appendChild(self.el);
+  		                            } else if (opts.bound) {
+  		                                document.body.appendChild(self.el);
+  		                            } else {
+  		                                opts.field.parentNode.insertBefore(self.el, opts.field.nextSibling);
+  		                            }
+  		                            addEvent(opts.field, 'change', self._onInputChange);
+
+  		                            if (!opts.defaultDate) {
+  		                                if (hasMoment && opts.field.value) {
+  		                                    opts.defaultDate = moment(opts.field.value, opts.format).toDate();
+  		                                } else {
+  		                                    opts.defaultDate = new Date(Date.parse(opts.field.value));
+  		                                }
+  		                                opts.setDefaultDate = true;
+  		                            }
+  		                        }
 
+  		                        var defDate = opts.defaultDate;
 
-  		    /**
-  		     * Pikaday constructor
-  		     */
-  		    Pikaday = function(options)
-  		    {
-  		        var self = this,
-  		            opts = self.config(options);
+  		                        if (isDate(defDate)) {
+  		                            if (opts.setDefaultDate) {
+  		                                self.setDate(defDate, true);
+  		                            } else {
+  		                                self.gotoDate(defDate);
+  		                            }
+  		                        } else {
+  		                            self.gotoDate(new Date());
+  		                        }
 
-  		        self._onMouseDown = function(e)
-  		        {
-  		            if (!self._v) {
-  		                return;
-  		            }
-  		            e = e || window.event;
-  		            var target = e.target || e.srcElement;
-  		            if (!target) {
-  		                return;
-  		            }
+  		                        if (opts.bound) {
+  		                            this.hide();
+  		                            self.el.className += ' is-bound';
+  		                            addEvent(opts.trigger, 'click', self._onInputClick);
+  		                            addEvent(opts.trigger, 'focus', self._onInputFocus);
+  		                            addEvent(opts.trigger, 'blur', self._onInputBlur);
+  		                        } else {
+  		                            this.show();
+  		                        }
+  		                    };
 
-  		            if (!hasClass(target, 'is-disabled')) {
-  		                if (hasClass(target, 'pika-button') && !hasClass(target, 'is-empty') && !hasClass(target.parentNode, 'is-disabled')) {
-  		                    self.setDate(new Date(target.getAttribute('data-pika-year'), target.getAttribute('data-pika-month'), target.getAttribute('data-pika-day')));
-  		                    if (opts.bound) {
-  		                        sto(function() {
-  		                            self.hide();
-  		                            if (opts.blurFieldOnSelect && opts.field) {
-  		                                opts.field.blur();
-  		                            }
-  		                        }, 100);
-  		                    }
-  		                }
-  		                else if (hasClass(target, 'pika-prev')) {
-  		                    self.prevMonth();
-  		                }
-  		                else if (hasClass(target, 'pika-next')) {
-  		                    self.nextMonth();
-  		                }
-  		            }
-  		            if (!hasClass(target, 'pika-select')) {
-  		                // if this is touch event prevent mouse events emulation
-  		                if (e.preventDefault) {
-  		                    e.preventDefault();
-  		                } else {
-  		                    e.returnValue = false;
-  		                    return false;
-  		                }
-  		            } else {
-  		                self._c = true;
-  		            }
-  		        };
 
-  		        self._onChange = function(e)
-  		        {
-  		            e = e || window.event;
-  		            var target = e.target || e.srcElement;
-  		            if (!target) {
-  		                return;
-  		            }
-  		            if (hasClass(target, 'pika-select-month')) {
-  		                self.gotoMonth(target.value);
-  		            }
-  		            else if (hasClass(target, 'pika-select-year')) {
-  		                self.gotoYear(target.value);
-  		            }
-  		        };
+  		                /**
+  		                 * public Pikaday API
+  		                 */
+  		                Pikaday.prototype = {
 
-  		        self._onKeyChange = function(e)
-  		        {
-  		            e = e || window.event;
-  		            // ignore if event comes from input box
-  		            if (self.isVisible() && e.target && e.target.type !== 'text') {
 
-  		                switch(e.keyCode){
-  		                    case 13:
-  		                    case 27:
-  		                        if (opts.field) {
-  		                            opts.field.blur();
+  		                    /**
+  		                     * configure functionality
+  		                     */
+  		                    config: function (options) {
+  		                        if (!this._o) {
+  		                            this._o = extend({}, defaults, true);
   		                        }
-  		                        break;
-  		                    case 37:
-  		                        e.preventDefault();
-  		                        self.adjustDate('subtract', 1);
-  		                        break;
-  		                    case 38:
-  		                        self.adjustDate('subtract', 7);
-  		                        break;
-  		                    case 39:
-  		                        self.adjustDate('add', 1);
-  		                        break;
-  		                    case 40:
-  		                        self.adjustDate('add', 7);
-  		                        break;
-  		                }
-  		            }
-  		        };
 
-  		        self._onInputChange = function(e)
-  		        {
-  		            var date;
+  		                        var opts = extend(this._o, options, true);
 
-  		            if (e.firedBy === self) {
-  		                return;
-  		            }
-  		            if (opts.parse) {
-  		                date = opts.parse(opts.field.value, opts.format);
-  		            } else if (hasMoment) {
-  		                date = moment(opts.field.value, opts.format, opts.formatStrict);
-  		                date = (date && date.isValid()) ? date.toDate() : null;
-  		            }
-  		            else {
-  		                date = new Date(Date.parse(opts.field.value));
-  		            }
-  		            // if (isDate(date)) {
-  		            //   self.setDate(date);
-  		            // }
-  		            // if (!self._v) {
-  		            //     self.show();
-  		            // }
-  		        };
+  		                        opts.isRTL = !!opts.isRTL;
 
-  		        self._onInputFocus = function()
-  		        {
-  		            self.show();
-  		        };
+  		                        opts.field = (opts.field && opts.field.nodeName) ? opts.field : null;
 
-  		        self._onInputClick = function()
-  		        {
-  		            self.show();
-  		        };
+  		                        opts.theme = (typeof opts.theme) === 'string' && opts.theme ? opts.theme : null;
 
-  		        self._onInputBlur = function()
-  		        {
-  		            // IE allows pika div to gain focus; catch blur the input field
-  		            var pEl = document.activeElement;
-  		            do {
-  		                if (hasClass(pEl, 'pika-single')) {
-  		                    return;
-  		                }
-  		            }
-  		            while ((pEl = pEl.parentNode));
+  		                        opts.bound = !!(opts.bound !== undefined ? opts.field && opts.bound : opts.field);
 
-  		            if (!self._c) {
-  		                self._b = sto(function() {
-  		                    self.hide();
-  		                }, 50);
-  		            }
-  		            self._c = false;
-  		        };
+  		                        opts.trigger = (opts.trigger && opts.trigger.nodeName) ? opts.trigger : opts.field;
 
-  		        self._onClick = function(e)
-  		        {
-  		            e = e || window.event;
-  		            var target = e.target || e.srcElement,
-  		                pEl = target;
-  		            if (!target) {
-  		                return;
-  		            }
-  		            if (!hasEventListeners && hasClass(target, 'pika-select')) {
-  		                if (!target.onchange) {
-  		                    target.setAttribute('onchange', 'return;');
-  		                    addEvent(target, 'change', self._onChange);
-  		                }
-  		            }
-  		            do {
-  		                if (hasClass(pEl, 'pika-single') || pEl === opts.trigger) {
-  		                    return;
-  		                }
-  		            }
-  		            while ((pEl = pEl.parentNode));
-  		            if (self._v && target !== opts.trigger && pEl !== opts.trigger) {
-  		                self.hide();
-  		            }
-  		        };
+  		                        opts.disableWeekends = !!opts.disableWeekends;
 
-  		        self.el = document.createElement('div');
-  		        self.el.className = 'pika-single' + (opts.isRTL ? ' is-rtl' : '') + (opts.theme ? ' ' + opts.theme : '');
+  		                        opts.disableDayFn = (typeof opts.disableDayFn) === 'function' ? opts.disableDayFn : null;
 
-  		        addEvent(self.el, 'mousedown', self._onMouseDown, true);
-  		        addEvent(self.el, 'touchend', self._onMouseDown, true);
-  		        addEvent(self.el, 'change', self._onChange);
+  		                        var nom = parseInt(opts.numberOfMonths, 10) || 1;
+  		                        opts.numberOfMonths = nom > 4 ? 4 : nom;
 
-  		        if (opts.keyboardInput) {
-  		            addEvent(document, 'keydown', self._onKeyChange);
-  		        }
-
-  		        if (opts.field) {
-  		            if (opts.container) {
-  		                opts.container.appendChild(self.el);
-  		            } else if (opts.bound) {
-  		                document.body.appendChild(self.el);
-  		            } else {
-  		                opts.field.parentNode.insertBefore(self.el, opts.field.nextSibling);
-  		            }
-  		            addEvent(opts.field, 'change', self._onInputChange);
-
-  		            if (!opts.defaultDate) {
-  		                if (hasMoment && opts.field.value) {
-  		                    opts.defaultDate = moment(opts.field.value, opts.format).toDate();
-  		                } else {
-  		                    opts.defaultDate = new Date(Date.parse(opts.field.value));
-  		                }
-  		                opts.setDefaultDate = true;
-  		            }
-  		        }
-
-  		        var defDate = opts.defaultDate;
-
-  		        if (isDate(defDate)) {
-  		            if (opts.setDefaultDate) {
-  		                self.setDate(defDate, true);
-  		            } else {
-  		                self.gotoDate(defDate);
-  		            }
-  		        } else {
-  		            self.gotoDate(new Date());
-  		        }
-
-  		        if (opts.bound) {
-  		            this.hide();
-  		            self.el.className += ' is-bound';
-  		            addEvent(opts.trigger, 'click', self._onInputClick);
-  		            addEvent(opts.trigger, 'focus', self._onInputFocus);
-  		            addEvent(opts.trigger, 'blur', self._onInputBlur);
-  		        } else {
-  		            this.show();
-  		        }
-  		    };
-
-
-  		    /**
-  		     * public Pikaday API
-  		     */
-  		    Pikaday.prototype = {
-
-
-  		        /**
-  		         * configure functionality
-  		         */
-  		        config: function(options)
-  		        {
-  		            if (!this._o) {
-  		                this._o = extend({}, defaults, true);
-  		            }
-
-  		            var opts = extend(this._o, options, true);
-
-  		            opts.isRTL = !!opts.isRTL;
-
-  		            opts.field = (opts.field && opts.field.nodeName) ? opts.field : null;
-
-  		            opts.theme = (typeof opts.theme) === 'string' && opts.theme ? opts.theme : null;
-
-  		            opts.bound = !!(opts.bound !== undefined ? opts.field && opts.bound : opts.field);
-
-  		            opts.trigger = (opts.trigger && opts.trigger.nodeName) ? opts.trigger : opts.field;
-
-  		            opts.disableWeekends = !!opts.disableWeekends;
-
-  		            opts.disableDayFn = (typeof opts.disableDayFn) === 'function' ? opts.disableDayFn : null;
-
-  		            var nom = parseInt(opts.numberOfMonths, 10) || 1;
-  		            opts.numberOfMonths = nom > 4 ? 4 : nom;
-
-  		            if (!isDate(opts.minDate)) {
-  		                opts.minDate = false;
-  		            }
-  		            if (!isDate(opts.maxDate)) {
-  		                opts.maxDate = false;
-  		            }
-  		            if ((opts.minDate && opts.maxDate) && opts.maxDate < opts.minDate) {
-  		                opts.maxDate = opts.minDate = false;
-  		            }
-  		            if (opts.minDate) {
-  		                this.setMinDate(opts.minDate);
-  		            }
-  		            if (opts.maxDate) {
-  		                this.setMaxDate(opts.maxDate);
-  		            }
-
-  		            if (isArray(opts.yearRange)) {
-  		                var fallback = new Date().getFullYear() - 10;
-  		                opts.yearRange[0] = parseInt(opts.yearRange[0], 10) || fallback;
-  		                opts.yearRange[1] = parseInt(opts.yearRange[1], 10) || fallback;
-  		            } else {
-  		                opts.yearRange = Math.abs(parseInt(opts.yearRange, 10)) || defaults.yearRange;
-  		                if (opts.yearRange > 100) {
-  		                    opts.yearRange = 100;
-  		                }
-  		            }
-
-  		            return opts;
-  		        },
-
-  		        /**
-  		         * return a formatted string of the current selection (using Moment.js if available)
-  		         */
-  		        toString: function(format)
-  		        {
-  		            format = format || this._o.format;
-  		            if (!isDate(this._d)) {
-  		                return '';
-  		            }
-  		            if (this._o.toString) {
-  		              return this._o.toString(this._d, format);
-  		            }
-  		            if (hasMoment) {
-  		              return moment(this._d).format(format);
-  		            }
-  		            return this._d.toDateString();
-  		        },
-
-  		        /**
-  		         * return a Moment.js object of the current selection (if available)
-  		         */
-  		        getMoment: function()
-  		        {
-  		            return hasMoment ? moment(this._d) : null;
-  		        },
-
-  		        /**
-  		         * set the current selection from a Moment.js object (if available)
-  		         */
-  		        setMoment: function(date, preventOnSelect)
-  		        {
-  		            if (hasMoment && moment.isMoment(date)) {
-  		                this.setDate(date.toDate(), preventOnSelect);
-  		            }
-  		        },
-
-  		        /**
-  		         * return a Date object of the current selection
-  		         */
-  		        getDate: function()
-  		        {
-  		            return isDate(this._d) ? new Date(this._d.getTime()) : null;
-  		        },
-
-  		        /**
-  		         * set the current selection
-  		         */
-  		        setDate: function(date, preventOnSelect)
-  		        {
-  		            if (!date) {
-  		                this._d = null;
-
-  		                if (this._o.field) {
-  		                    this._o.field.value = '';
-  		                    fireEvent(this._o.field, 'change', { firedBy: this });
-  		                }
-
-  		                return this.draw();
-  		            }
-  		            if (typeof date === 'string') {
-  		                date = new Date(Date.parse(date));
-  		            }
-  		            if (!isDate(date)) {
-  		                return;
-  		            }
-
-  		            var min = this._o.minDate,
-  		                max = this._o.maxDate;
-
-  		            if (isDate(min) && date < min) {
-  		                date = min;
-  		            } else if (isDate(max) && date > max) {
-  		                date = max;
-  		            }
-
-  		            this._d = new Date(date.getTime());
-  		            setToStartOfDay(this._d);
-  		            this.gotoDate(this._d);
-
-  		            if (this._o.field) {
-  		                this._o.field.value = this.toString();
-  		                fireEvent(this._o.field, 'change', { firedBy: this });
-  		            }
-  		            if (!preventOnSelect && typeof this._o.onSelect === 'function') {
-  		                this._o.onSelect.call(this, this.getDate());
-  		            }
-  		        },
-
-  		        /**
-  		         * change view to a specific date
-  		         */
-  		        gotoDate: function(date)
-  		        {
-  		            var newCalendar = true;
-
-  		            if (!isDate(date)) {
-  		                return;
-  		            }
-
-  		            if (this.calendars) {
-  		                var firstVisibleDate = new Date(this.calendars[0].year, this.calendars[0].month, 1),
-  		                    lastVisibleDate = new Date(this.calendars[this.calendars.length-1].year, this.calendars[this.calendars.length-1].month, 1),
-  		                    visibleDate = date.getTime();
-  		                // get the end of the month
-  		                lastVisibleDate.setMonth(lastVisibleDate.getMonth()+1);
-  		                lastVisibleDate.setDate(lastVisibleDate.getDate()-1);
-  		                newCalendar = (visibleDate < firstVisibleDate.getTime() || lastVisibleDate.getTime() < visibleDate);
-  		            }
-
-  		            if (newCalendar) {
-  		                this.calendars = [{
-  		                    month: date.getMonth(),
-  		                    year: date.getFullYear()
-  		                }];
-  		                if (this._o.mainCalendar === 'right') {
-  		                    this.calendars[0].month += 1 - this._o.numberOfMonths;
-  		                }
-  		            }
-
-  		            this.adjustCalendars();
-  		        },
+  		                        if (!isDate(opts.minDate)) {
+  		                            opts.minDate = false;
+  		                        }
+  		                        if (!isDate(opts.maxDate)) {
+  		                            opts.maxDate = false;
+  		                        }
+  		                        if ((opts.minDate && opts.maxDate) && opts.maxDate < opts.minDate) {
+  		                            opts.maxDate = opts.minDate = false;
+  		                        }
+  		                        if (opts.minDate) {
+  		                            this.setMinDate(opts.minDate);
+  		                        }
+  		                        if (opts.maxDate) {
+  		                            this.setMaxDate(opts.maxDate);
+  		                        }
 
-  		        adjustDate: function(sign, days) {
+  		                        if (isArray(opts.yearRange)) {
+  		                            var fallback = new Date().getFullYear() - 10;
+  		                            opts.yearRange[0] = parseInt(opts.yearRange[0], 10) || fallback;
+  		                            opts.yearRange[1] = parseInt(opts.yearRange[1], 10) || fallback;
+  		                        } else {
+  		                            opts.yearRange = Math.abs(parseInt(opts.yearRange, 10)) || defaults.yearRange;
+  		                            if (opts.yearRange > 100) {
+  		                                opts.yearRange = 100;
+  		                            }
+  		                        }
 
-  		            var day = this.getDate() || new Date();
-  		            var difference = parseInt(days)*24*60*60*1000;
+  		                        return opts;
+  		                    },
 
-  		            var newDay;
+  		                    /**
+  		                     * return a formatted string of the current selection (using Moment.js if available)
+  		                     */
+  		                    toString: function (format) {
+  		                        format = format || this._o.format;
+  		                        if (!isDate(this._d)) {
+  		                            return '';
+  		                        }
+  		                        if (this._o.toString) {
+  		                            return this._o.toString(this._d, format);
+  		                        }
+  		                        if (hasMoment) {
+  		                            return moment(this._d).format(format);
+  		                        }
+  		                        return this._d.toDateString();
+  		                    },
+
+  		                    /**
+  		                     * return a Moment.js object of the current selection (if available)
+  		                     */
+  		                    getMoment: function () {
+  		                        return hasMoment ? moment(this._d) : null;
+  		                    },
+
+  		                    /**
+  		                     * set the current selection from a Moment.js object (if available)
+  		                     */
+  		                    setMoment: function (date, preventOnSelect) {
+  		                        if (hasMoment && moment.isMoment(date)) {
+  		                            this.setDate(date.toDate(), preventOnSelect);
+  		                        }
+  		                    },
+
+  		                    /**
+  		                     * return a Date object of the current selection
+  		                     */
+  		                    getDate: function () {
+  		                        return isDate(this._d) ? new Date(this._d.getTime()) : null;
+  		                    },
+
+  		                    /**
+  		                     * set the current selection
+  		                     */
+  		                    setDate: function (date, preventOnSelect) {
+  		                        if (!date) {
+  		                            this._d = null;
+
+  		                            if (this._o.field) {
+  		                                this._o.field.value = '';
+  		                                fireEvent(this._o.field, 'change', { firedBy: this });
+  		                            }
 
-  		            if (sign === 'add') {
-  		                newDay = new Date(day.valueOf() + difference);
-  		            } else if (sign === 'subtract') {
-  		                newDay = new Date(day.valueOf() - difference);
-  		            }
+  		                            return this.draw();
+  		                        }
+  		                        if (typeof date === 'string') {
+  		                            date = new Date(Date.parse(date));
+  		                        }
+  		                        if (!isDate(date)) {
+  		                            return;
+  		                        }
 
-  		            this.setDate(newDay);
-  		        },
+  		                        var min = this._o.minDate,
+  		                            max = this._o.maxDate;
 
-  		        adjustCalendars: function() {
-  		            this.calendars[0] = adjustCalendar(this.calendars[0]);
-  		            for (var c = 1; c < this._o.numberOfMonths; c++) {
-  		                this.calendars[c] = adjustCalendar({
-  		                    month: this.calendars[0].month + c,
-  		                    year: this.calendars[0].year
-  		                });
-  		            }
-  		            this.draw();
-  		        },
+  		                        if (isDate(min) && date < min) {
+  		                            date = min;
+  		                        } else if (isDate(max) && date > max) {
+  		                            date = max;
+  		                        }
 
-  		        gotoToday: function()
-  		        {
-  		            this.gotoDate(new Date());
-  		        },
+  		                        this._d = new Date(date.getTime());
+  		                        setToStartOfDay(this._d);
+  		                        this.gotoDate(this._d);
 
-  		        /**
-  		         * change view to a specific month (zero-index, e.g. 0: January)
-  		         */
-  		        gotoMonth: function(month)
-  		        {
-  		            if (!isNaN(month)) {
-  		                this.calendars[0].month = parseInt(month, 10);
-  		                this.adjustCalendars();
-  		            }
-  		        },
+  		                        if (this._o.field) {
+  		                            this._o.field.value = this.toString();
+  		                            fireEvent(this._o.field, 'change', { firedBy: this });
+  		                        }
+  		                        if (!preventOnSelect && typeof this._o.onSelect === 'function') {
+  		                            this._o.onSelect.call(this, this.getDate());
+  		                        }
+  		                    },
 
-  		        nextMonth: function()
-  		        {
-  		            this.calendars[0].month++;
-  		            this.adjustCalendars();
-  		        },
+  		                    /**
+  		                     * change view to a specific date
+  		                     */
+  		                    gotoDate: function (date) {
+  		                        var newCalendar = true;
 
-  		        prevMonth: function()
-  		        {
-  		            this.calendars[0].month--;
-  		            this.adjustCalendars();
-  		        },
+  		                        if (!isDate(date)) {
+  		                            return;
+  		                        }
 
-  		        /**
-  		         * change view to a specific full year (e.g. "2012")
-  		         */
-  		        gotoYear: function(year)
-  		        {
-  		            if (!isNaN(year)) {
-  		                this.calendars[0].year = parseInt(year, 10);
-  		                this.adjustCalendars();
-  		            }
-  		        },
+  		                        if (this.calendars) {
+  		                            var firstVisibleDate = new Date(this.calendars[0].year, this.calendars[0].month, 1),
+  		                                lastVisibleDate = new Date(this.calendars[this.calendars.length - 1].year, this.calendars[this.calendars.length - 1].month, 1),
+  		                                visibleDate = date.getTime();
+  		                            // get the end of the month
+  		                            lastVisibleDate.setMonth(lastVisibleDate.getMonth() + 1);
+  		                            lastVisibleDate.setDate(lastVisibleDate.getDate() - 1);
+  		                            newCalendar = (visibleDate < firstVisibleDate.getTime() || lastVisibleDate.getTime() < visibleDate);
+  		                        }
 
-  		        /**
-  		         * change the minDate
-  		         */
-  		        setMinDate: function(value)
-  		        {
-  		            if(value instanceof Date) {
-  		                setToStartOfDay(value);
-  		                this._o.minDate = value;
-  		                this._o.minYear  = value.getFullYear();
-  		                this._o.minMonth = value.getMonth();
-  		            } else {
-  		                this._o.minDate = defaults.minDate;
-  		                this._o.minYear  = defaults.minYear;
-  		                this._o.minMonth = defaults.minMonth;
-  		                this._o.startRange = defaults.startRange;
-  		            }
+  		                        if (newCalendar) {
+  		                            this.calendars = [{
+  		                                month: date.getMonth(),
+  		                                year: date.getFullYear()
+  		                            }];
+  		                            if (this._o.mainCalendar === 'right') {
+  		                                this.calendars[0].month += 1 - this._o.numberOfMonths;
+  		                            }
+  		                        }
 
-  		            this.draw();
-  		        },
+  		                        this.adjustCalendars();
+  		                    },
 
-  		        /**
-  		         * change the maxDate
-  		         */
-  		        setMaxDate: function(value)
-  		        {
-  		            if(value instanceof Date) {
-  		                setToStartOfDay(value);
-  		                this._o.maxDate = value;
-  		                this._o.maxYear = value.getFullYear();
-  		                this._o.maxMonth = value.getMonth();
-  		            } else {
-  		                this._o.maxDate = defaults.maxDate;
-  		                this._o.maxYear = defaults.maxYear;
-  		                this._o.maxMonth = defaults.maxMonth;
-  		                this._o.endRange = defaults.endRange;
-  		            }
+  		                    adjustDate: function (sign, days) {
 
-  		            this.draw();
-  		        },
+  		                        var day = this.getDate() || new Date();
+  		                        var difference = parseInt(days) * 24 * 60 * 60 * 1000;
 
-  		        setStartRange: function(value)
-  		        {
-  		            this._o.startRange = value;
-  		        },
+  		                        var newDay;
 
-  		        setEndRange: function(value)
-  		        {
-  		            this._o.endRange = value;
-  		        },
+  		                        if (sign === 'add') {
+  		                            newDay = new Date(day.valueOf() + difference);
+  		                        } else if (sign === 'subtract') {
+  		                            newDay = new Date(day.valueOf() - difference);
+  		                        }
 
-  		        /**
-  		         * refresh the HTML
-  		         */
-  		        draw: function(force)
-  		        {
-  		            if (!this._v && !force) {
-  		                return;
-  		            }
-  		            var opts = this._o,
-  		                minYear = opts.minYear,
-  		                maxYear = opts.maxYear,
-  		                minMonth = opts.minMonth,
-  		                maxMonth = opts.maxMonth,
-  		                html = '',
-  		                randId;
-
-  		            if (this._y <= minYear) {
-  		                this._y = minYear;
-  		                if (!isNaN(minMonth) && this._m < minMonth) {
-  		                    this._m = minMonth;
-  		                }
-  		            }
-  		            if (this._y >= maxYear) {
-  		                this._y = maxYear;
-  		                if (!isNaN(maxMonth) && this._m > maxMonth) {
-  		                    this._m = maxMonth;
-  		                }
-  		            }
+  		                        this.setDate(newDay);
+  		                    },
 
-  		            for (var c = 0; c < opts.numberOfMonths; c++) {
-  		                randId = 'pika-title-' + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 2);
-  		                html += '<div class="pika-lendar">' + renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year, randId) + this.render(this.calendars[c].year, this.calendars[c].month, randId) + '</div>';
-  		            }
+  		                    adjustCalendars: function () {
+  		                        this.calendars[0] = adjustCalendar(this.calendars[0]);
+  		                        for (var c = 1; c < this._o.numberOfMonths; c++) {
+  		                            this.calendars[c] = adjustCalendar({
+  		                                month: this.calendars[0].month + c,
+  		                                year: this.calendars[0].year
+  		                            });
+  		                        }
+  		                        this.draw();
+  		                    },
+
+  		                    gotoToday: function () {
+  		                        this.gotoDate(new Date());
+  		                    },
+
+  		                    /**
+  		                     * change view to a specific month (zero-index, e.g. 0: January)
+  		                     */
+  		                    gotoMonth: function (month) {
+  		                        if (!isNaN(month)) {
+  		                            this.calendars[0].month = parseInt(month, 10);
+  		                            this.adjustCalendars();
+  		                        }
+  		                    },
+
+  		                    nextMonth: function () {
+  		                        this.calendars[0].month++;
+  		                        this.adjustCalendars();
+  		                    },
+
+  		                    prevMonth: function () {
+  		                        this.calendars[0].month--;
+  		                        this.adjustCalendars();
+  		                    },
+
+  		                    /**
+  		                     * change view to a specific full year (e.g. "2012")
+  		                     */
+  		                    gotoYear: function (year) {
+  		                        if (!isNaN(year)) {
+  		                            this.calendars[0].year = parseInt(year, 10);
+  		                            this.adjustCalendars();
+  		                        }
+  		                    },
+
+  		                    /**
+  		                     * change the minDate
+  		                     */
+  		                    setMinDate: function (value) {
+  		                        if (value instanceof Date) {
+  		                            setToStartOfDay(value);
+  		                            this._o.minDate = value;
+  		                            this._o.minYear = value.getFullYear();
+  		                            this._o.minMonth = value.getMonth();
+  		                        } else {
+  		                            this._o.minDate = defaults.minDate;
+  		                            this._o.minYear = defaults.minYear;
+  		                            this._o.minMonth = defaults.minMonth;
+  		                            this._o.startRange = defaults.startRange;
+  		                        }
 
-  		            this.el.innerHTML = html;
+  		                        this.draw();
+  		                    },
+
+  		                    /**
+  		                     * change the maxDate
+  		                     */
+  		                    setMaxDate: function (value) {
+  		                        if (value instanceof Date) {
+  		                            setToStartOfDay(value);
+  		                            this._o.maxDate = value;
+  		                            this._o.maxYear = value.getFullYear();
+  		                            this._o.maxMonth = value.getMonth();
+  		                        } else {
+  		                            this._o.maxDate = defaults.maxDate;
+  		                            this._o.maxYear = defaults.maxYear;
+  		                            this._o.maxMonth = defaults.maxMonth;
+  		                            this._o.endRange = defaults.endRange;
+  		                        }
 
-  		            if (opts.bound) {
-  		                if(opts.field.type !== 'hidden') {
-  		                    sto(function() {
-  		                        opts.trigger.focus();
-  		                    }, 1);
-  		                }
-  		            }
+  		                        this.draw();
+  		                    },
 
-  		            if (typeof this._o.onDraw === 'function') {
-  		                this._o.onDraw(this);
-  		            }
+  		                    setStartRange: function (value) {
+  		                        this._o.startRange = value;
+  		                    },
 
-  		            if (opts.bound) {
-  		                // let the screen reader user know to use arrow keys
-  		                opts.field.setAttribute('aria-label', 'Use the arrow keys to pick a date');
-  		            }
-  		        },
+  		                    setEndRange: function (value) {
+  		                        this._o.endRange = value;
+  		                    },
 
-  		        adjustPosition: function()
-  		        {
-  		            var field, pEl, width, height, viewportWidth, viewportHeight, scrollTop, left, top, clientRect;
+  		                    /**
+  		                     * refresh the HTML
+  		                     */
+  		                    draw: function (force) {
+  		                        if (!this._v && !force) {
+  		                            return;
+  		                        }
+  		                        var opts = this._o,
+  		                            minYear = opts.minYear,
+  		                            maxYear = opts.maxYear,
+  		                            minMonth = opts.minMonth,
+  		                            maxMonth = opts.maxMonth,
+  		                            html = '',
+  		                            randId;
+
+  		                        if (this._y <= minYear) {
+  		                            this._y = minYear;
+  		                            if (!isNaN(minMonth) && this._m < minMonth) {
+  		                                this._m = minMonth;
+  		                            }
+  		                        }
+  		                        if (this._y >= maxYear) {
+  		                            this._y = maxYear;
+  		                            if (!isNaN(maxMonth) && this._m > maxMonth) {
+  		                                this._m = maxMonth;
+  		                            }
+  		                        }
 
-  		            if (this._o.container) return;
+  		                        for (var c = 0; c < opts.numberOfMonths; c++) {
+  		                            randId = 'pika-title-' + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 2);
+  		                            html += '<div class="pika-lendar">' + renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year, randId) + this.render(this.calendars[c].year, this.calendars[c].month, randId) + '</div>';
+  		                        }
 
-  		            this.el.style.position = 'absolute';
+  		                        this.el.innerHTML = html;
 
-  		            field = this._o.trigger;
-  		            pEl = field;
-  		            width = this.el.offsetWidth;
-  		            height = this.el.offsetHeight;
-  		            viewportWidth = window.innerWidth || document.documentElement.clientWidth;
-  		            viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-  		            scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
+  		                        if (opts.bound) {
+  		                            if (opts.field.type !== 'hidden') {
+  		                                sto(function () {
+  		                                    opts.trigger.focus();
+  		                                }, 1);
+  		                            }
+  		                        }
 
-  		            if (typeof field.getBoundingClientRect === 'function') {
-  		                clientRect = field.getBoundingClientRect();
-  		                left = clientRect.left + window.pageXOffset;
-  		                top = clientRect.bottom + window.pageYOffset;
-  		            } else {
-  		                left = pEl.offsetLeft;
-  		                top  = pEl.offsetTop + pEl.offsetHeight;
-  		                while((pEl = pEl.offsetParent)) {
-  		                    left += pEl.offsetLeft;
-  		                    top  += pEl.offsetTop;
-  		                }
-  		            }
+  		                        if (typeof this._o.onDraw === 'function') {
+  		                            this._o.onDraw(this);
+  		                        }
 
-  		            // default position is bottom & left
-  		            if ((this._o.reposition && left + width > viewportWidth) ||
-  		                (
-  		                    this._o.position.indexOf('right') > -1 &&
-  		                    left - width + field.offsetWidth > 0
-  		                )
-  		            ) {
-  		                left = left - width + field.offsetWidth;
-  		            }
-  		            if ((this._o.reposition && top + height > viewportHeight + scrollTop) ||
-  		                (
-  		                    this._o.position.indexOf('top') > -1 &&
-  		                    top - height - field.offsetHeight > 0
-  		                )
-  		            ) {
-  		                top = top - height - field.offsetHeight;
-  		            }
+  		                        if (opts.bound) {
+  		                            // let the screen reader user know to use arrow keys
+  		                            opts.field.setAttribute('aria-label', 'Use the arrow keys to pick a date');
+  		                        }
+  		                    },
+
+  		                    adjustPosition: function () {
+  		                        var field, pEl, width, height, viewportWidth, viewportHeight, scrollTop, left, top, clientRect;
+
+  		                        if (this._o.container) return;
+
+  		                        this.el.style.position = 'absolute';
+
+  		                        field = this._o.trigger;
+  		                        pEl = field;
+  		                        width = this.el.offsetWidth;
+  		                        height = this.el.offsetHeight;
+  		                        viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+  		                        viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+  		                        scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
+
+  		                        if (typeof field.getBoundingClientRect === 'function') {
+  		                            clientRect = field.getBoundingClientRect();
+  		                            left = clientRect.left + window.pageXOffset;
+  		                            top = clientRect.bottom + window.pageYOffset;
+  		                        } else {
+  		                            left = pEl.offsetLeft;
+  		                            top = pEl.offsetTop + pEl.offsetHeight;
+  		                            while ((pEl = pEl.offsetParent)) {
+  		                                left += pEl.offsetLeft;
+  		                                top += pEl.offsetTop;
+  		                            }
+  		                        }
 
-  		            this.el.style.left = left + 'px';
-  		            this.el.style.top = top + 'px';
-  		        },
+  		                        // default position is bottom & left
+  		                        if ((this._o.reposition && left + width > viewportWidth) ||
+  		                            (
+  		                                this._o.position.indexOf('right') > -1 &&
+  		                                left - width + field.offsetWidth > 0
+  		                            )
+  		                        ) {
+  		                            left = left - width + field.offsetWidth;
+  		                        }
+  		                        if ((this._o.reposition && top + height > viewportHeight + scrollTop) ||
+  		                            (
+  		                                this._o.position.indexOf('top') > -1 &&
+  		                                top - height - field.offsetHeight > 0
+  		                            )
+  		                        ) {
+  		                            top = top - height - field.offsetHeight;
+  		                        }
 
-  		        /**
-  		         * render HTML for a particular month
-  		         */
-  		        render: function(year, month, randId)
-  		        {
-  		            var opts   = this._o,
-  		                now    = new Date(),
-  		                days   = getDaysInMonth(year, month),
-  		                before = new Date(year, month, 1).getDay(),
-  		                data   = [],
-  		                row    = [];
-  		            setToStartOfDay(now);
-  		            if (opts.firstDay > 0) {
-  		                before -= opts.firstDay;
-  		                if (before < 0) {
-  		                    before += 7;
-  		                }
-  		            }
-  		            var previousMonth = month === 0 ? 11 : month - 1,
-  		                nextMonth = month === 11 ? 0 : month + 1,
-  		                yearOfPreviousMonth = month === 0 ? year - 1 : year,
-  		                yearOfNextMonth = month === 11 ? year + 1 : year,
-  		                daysInPreviousMonth = getDaysInMonth(yearOfPreviousMonth, previousMonth);
-  		            var cells = days + before,
-  		                after = cells;
-  		            while(after > 7) {
-  		                after -= 7;
-  		            }
-  		            cells += 7 - after;
-  		            var isWeekSelected = false;
-  		            for (var i = 0, r = 0; i < cells; i++)
-  		            {
-  		                var day = new Date(year, month, 1 + (i - before)),
-  		                    isSelected = isDate(this._d) ? compareDates(day, this._d) : false,
-  		                    isToday = compareDates(day, now),
-  		                    hasEvent = opts.events.indexOf(day.toDateString()) !== -1 ? true : false,
-  		                    isEmpty = i < before || i >= (days + before),
-  		                    dayNumber = 1 + (i - before),
-  		                    monthNumber = month,
-  		                    yearNumber = year,
-  		                    isStartRange = opts.startRange && compareDates(opts.startRange, day),
-  		                    isEndRange = opts.endRange && compareDates(opts.endRange, day),
-  		                    isInRange = opts.startRange && opts.endRange && opts.startRange < day && day < opts.endRange,
-  		                    isDisabled = (opts.minDate && day < opts.minDate) ||
-  		                                 (opts.maxDate && day > opts.maxDate) ||
-  		                                 (opts.disableWeekends && isWeekend(day)) ||
-  		                                 (opts.disableDayFn && opts.disableDayFn(day));
-
-  		                if (isEmpty) {
-  		                    if (i < before) {
-  		                        dayNumber = daysInPreviousMonth + dayNumber;
-  		                        monthNumber = previousMonth;
-  		                        yearNumber = yearOfPreviousMonth;
-  		                    } else {
-  		                        dayNumber = dayNumber - days;
-  		                        monthNumber = nextMonth;
-  		                        yearNumber = yearOfNextMonth;
-  		                    }
-  		                }
+  		                        this.el.style.left = left + 'px';
+  		                        this.el.style.top = top + 'px';
+  		                    },
+
+  		                    /**
+  		                     * render HTML for a particular month
+  		                     */
+  		                    render: function (year, month, randId) {
+  		                        var opts = this._o,
+  		                            now = new Date(),
+  		                            days = getDaysInMonth(year, month),
+  		                            before = new Date(year, month, 1).getDay(),
+  		                            data = [],
+  		                            row = [];
+  		                        setToStartOfDay(now);
+  		                        if (opts.firstDay > 0) {
+  		                            before -= opts.firstDay;
+  		                            if (before < 0) {
+  		                                before += 7;
+  		                            }
+  		                        }
+  		                        var previousMonth = month === 0 ? 11 : month - 1,
+  		                            nextMonth = month === 11 ? 0 : month + 1,
+  		                            yearOfPreviousMonth = month === 0 ? year - 1 : year,
+  		                            yearOfNextMonth = month === 11 ? year + 1 : year,
+  		                            daysInPreviousMonth = getDaysInMonth(yearOfPreviousMonth, previousMonth);
+  		                        var cells = days + before,
+  		                            after = cells;
+  		                        while (after > 7) {
+  		                            after -= 7;
+  		                        }
+  		                        cells += 7 - after;
+  		                        var isWeekSelected = false;
+  		                        for (var i = 0, r = 0; i < cells; i++) {
+  		                            var day = new Date(year, month, 1 + (i - before)),
+  		                                isSelected = isDate(this._d) ? compareDates(day, this._d) : false,
+  		                                isToday = compareDates(day, now),
+  		                                hasEvent = opts.events.indexOf(day.toDateString()) !== -1 ? true : false,
+  		                                isEmpty = i < before || i >= (days + before),
+  		                                dayNumber = 1 + (i - before),
+  		                                monthNumber = month,
+  		                                yearNumber = year,
+  		                                isStartRange = opts.startRange && compareDates(opts.startRange, day),
+  		                                isEndRange = opts.endRange && compareDates(opts.endRange, day),
+  		                                isInRange = opts.startRange && opts.endRange && opts.startRange < day && day < opts.endRange,
+  		                                isDisabled = (opts.minDate && day < opts.minDate) ||
+  		                                    (opts.maxDate && day > opts.maxDate) ||
+  		                                    (opts.disableWeekends && isWeekend(day)) ||
+  		                                    (opts.disableDayFn && opts.disableDayFn(day));
+
+  		                            if (isEmpty) {
+  		                                if (i < before) {
+  		                                    dayNumber = daysInPreviousMonth + dayNumber;
+  		                                    monthNumber = previousMonth;
+  		                                    yearNumber = yearOfPreviousMonth;
+  		                                } else {
+  		                                    dayNumber = dayNumber - days;
+  		                                    monthNumber = nextMonth;
+  		                                    yearNumber = yearOfNextMonth;
+  		                                }
+  		                            }
 
-  		                var dayConfig = {
-  		                        day: dayNumber,
-  		                        month: monthNumber,
-  		                        year: yearNumber,
-  		                        hasEvent: hasEvent,
-  		                        isSelected: isSelected,
-  		                        isToday: isToday,
-  		                        isDisabled: isDisabled,
-  		                        isEmpty: isEmpty,
-  		                        isStartRange: isStartRange,
-  		                        isEndRange: isEndRange,
-  		                        isInRange: isInRange,
-  		                        showDaysInNextAndPreviousMonths: opts.showDaysInNextAndPreviousMonths,
-  		                        enableSelectionDaysInNextAndPreviousMonths: opts.enableSelectionDaysInNextAndPreviousMonths
-  		                    };
+  		                            var dayConfig = {
+  		                                day: dayNumber,
+  		                                month: monthNumber,
+  		                                year: yearNumber,
+  		                                hasEvent: hasEvent,
+  		                                isSelected: isSelected,
+  		                                isToday: isToday,
+  		                                isDisabled: isDisabled,
+  		                                isEmpty: isEmpty,
+  		                                isStartRange: isStartRange,
+  		                                isEndRange: isEndRange,
+  		                                isInRange: isInRange,
+  		                                showDaysInNextAndPreviousMonths: opts.showDaysInNextAndPreviousMonths,
+  		                                enableSelectionDaysInNextAndPreviousMonths: opts.enableSelectionDaysInNextAndPreviousMonths
+  		                            };
+
+  		                            if (opts.pickWholeWeek && isSelected) {
+  		                                isWeekSelected = true;
+  		                            }
 
-  		                if (opts.pickWholeWeek && isSelected) {
-  		                    isWeekSelected = true;
-  		                }
+  		                            row.push(renderDay(dayConfig));
 
-  		                row.push(renderDay(dayConfig));
+  		                            if (++r === 7) {
+  		                                if (opts.showWeekNumber) {
+  		                                    row.unshift(renderWeek(i - before, month, year));
+  		                                }
+  		                                data.push(renderRow(row, opts.isRTL, opts.pickWholeWeek, isWeekSelected));
+  		                                row = [];
+  		                                r = 0;
+  		                                isWeekSelected = false;
+  		                            }
+  		                        }
+  		                        return renderTable(opts, data, randId);
+  		                    },
+
+  		                    isVisible: function () {
+  		                        return this._v;
+  		                    },
+
+  		                    show: function () {
+  		                        if (!this.isVisible()) {
+  		                            this._v = true;
+  		                            this.draw();
+  		                            removeClass(this.el, 'is-hidden');
+  		                            if (this._o.bound) {
+  		                                addEvent(document, 'click', this._onClick);
+  		                                this.adjustPosition();
+  		                            }
+  		                            if (typeof this._o.onOpen === 'function') {
+  		                                this._o.onOpen.call(this);
+  		                            }
+  		                        }
+  		                    },
 
-  		                if (++r === 7) {
-  		                    if (opts.showWeekNumber) {
-  		                        row.unshift(renderWeek(i - before, month, year));
+  		                    hide: function () {
+  		                        var v = this._v;
+  		                        if (v !== false) {
+  		                            if (this._o.bound) {
+  		                                removeEvent(document, 'click', this._onClick);
+  		                            }
+  		                            this.el.style.position = 'static'; // reset
+  		                            this.el.style.left = 'auto';
+  		                            this.el.style.top = 'auto';
+  		                            addClass(this.el, 'is-hidden');
+  		                            this._v = false;
+  		                            if (v !== undefined && typeof this._o.onClose === 'function') {
+  		                                this._o.onClose.call(this);
+  		                            }
+  		                        }
+  		                    },
+
+  		                    /**
+  		                     * GAME OVER
+  		                     */
+  		                    destroy: function () {
+  		                        var opts = this._o;
+
+  		                        this.hide();
+  		                        removeEvent(this.el, 'mousedown', this._onMouseDown, true);
+  		                        removeEvent(this.el, 'touchend', this._onMouseDown, true);
+  		                        removeEvent(this.el, 'change', this._onChange);
+  		                        if (opts.keyboardInput) {
+  		                            removeEvent(document, 'keydown', this._onKeyChange);
+  		                        }
+  		                        if (opts.field) {
+  		                            removeEvent(opts.field, 'change', this._onInputChange);
+  		                            if (opts.bound) {
+  		                                removeEvent(opts.trigger, 'click', this._onInputClick);
+  		                                removeEvent(opts.trigger, 'focus', this._onInputFocus);
+  		                                removeEvent(opts.trigger, 'blur', this._onInputBlur);
+  		                            }
+  		                        }
+  		                        if (this.el.parentNode) {
+  		                            this.el.parentNode.removeChild(this.el);
+  		                        }
   		                    }
-  		                    data.push(renderRow(row, opts.isRTL, opts.pickWholeWeek, isWeekSelected));
-  		                    row = [];
-  		                    r = 0;
-  		                    isWeekSelected = false;
-  		                }
-  		            }
-  		            return renderTable(opts, data, randId);
-  		        },
-
-  		        isVisible: function()
-  		        {
-  		            return this._v;
-  		        },
 
-  		        show: function()
-  		        {
-  		            if (!this.isVisible()) {
-  		                this._v = true;
-  		                this.draw();
-  		                removeClass(this.el, 'is-hidden');
-  		                if (this._o.bound) {
-  		                    addEvent(document, 'click', this._onClick);
-  		                    this.adjustPosition();
-  		                }
-  		                if (typeof this._o.onOpen === 'function') {
-  		                    this._o.onOpen.call(this);
-  		                }
-  		            }
-  		        },
+  		                };
 
-  		        hide: function()
-  		        {
-  		            var v = this._v;
-  		            if (v !== false) {
-  		                if (this._o.bound) {
-  		                    removeEvent(document, 'click', this._onClick);
-  		                }
-  		                this.el.style.position = 'static'; // reset
-  		                this.el.style.left = 'auto';
-  		                this.el.style.top = 'auto';
-  		                addClass(this.el, 'is-hidden');
-  		                this._v = false;
-  		                if (v !== undefined && typeof this._o.onClose === 'function') {
-  		                    this._o.onClose.call(this);
-  		                }
-  		            }
-  		        },
-
-  		        /**
-  		         * GAME OVER
-  		         */
-  		        destroy: function()
-  		        {
-  		            var opts = this._o;
-
-  		            this.hide();
-  		            removeEvent(this.el, 'mousedown', this._onMouseDown, true);
-  		            removeEvent(this.el, 'touchend', this._onMouseDown, true);
-  		            removeEvent(this.el, 'change', this._onChange);
-  		            if (opts.keyboardInput) {
-  		                removeEvent(document, 'keydown', this._onKeyChange);
-  		            }
-  		            if (opts.field) {
-  		                removeEvent(opts.field, 'change', this._onInputChange);
-  		                if (opts.bound) {
-  		                    removeEvent(opts.trigger, 'click', this._onInputClick);
-  		                    removeEvent(opts.trigger, 'focus', this._onInputFocus);
-  		                    removeEvent(opts.trigger, 'blur', this._onInputBlur);
-  		                }
-  		            }
-  		            if (this.el.parentNode) {
-  		                this.el.parentNode.removeChild(this.el);
-  		            }
-  		        }
-
-  		    };
-
-  		    return Pikaday;
-  		})); 
+  		                return Pikaday;
+  		            })); 
   	} (pikaday$1));
   	return pikaday$1.exports;
   }
@@ -38439,53 +38483,26 @@
   var pikadayExports = /*@__PURE__*/ requirePikaday();
   var Pikaday = /*@__PURE__*/getDefaultExportFromCjs(pikadayExports);
 
-  var momentExports = requireMoment();
-  var moment = /*@__PURE__*/getDefaultExportFromCjs(momentExports);
-
-  class TimezonePicker extends ChartComponent {
-      constructor(renderTarget) {
-          super(renderTarget);
-          this.timeZones = ["Local", "UTC", "Africa/Algiers", "Africa/Cairo", "Africa/Casablanca", "Africa/Harare", "Africa/Johannesburg", "Africa/Lagos", "Africa/Nairobi", "Africa/Windhoek", "America/Anchorage", "America/Bogota", "America/Buenos Aires", "America/Caracas", "America/Chicago", "America/Chihuahua", "America/Denver", "America/Edmonton", "America/Godthab", "America/Guatemala", "America/Halifax", "America/Indiana/Indianapolis", "America/Los Angeles", "America/Manaus", "America/Mexico City", "America/Montevideo", "America/New York", "America/Phoenix", "America/Santiago", "America/Sao Paulo", "America/St Johns", "America/Tijuana", "America/Toronto", "America/Vancouver", "America/Winnipeg", "Asia/Amman", "Asia/Beirut", "Asia/Baghdad", "Asia/Baku", "Asia/Bangkok", "Asia/Calcutta", "Asia/Colombo", "Asia/Dhaka", "Asia/Dubai", "Asia/Ho Chi Minh", "Asia/Hong Kong", "Asia/Irkutsk", "Asia/Istanbul", "Asia/Jakarta", "Asia/Jerusalem", "Asia/Kabul", "Asia/Karachi", "Asia/Kathmandu", "Asia/Krasnoyarsk", "Asia/Kuala Lumpur", "Asia/Kuwait", "Asia/Magadan", "Asia/Muscat", "Asia/Novosibirsk", "Asia/Qatar", "Asia/Rangoon", "Asia/Seoul", "Asia/Shanghai", "Asia/Singapore", "Asia/Taipei", "Asia/Tbilisi", "Asia/Tehran", "Asia/Tokyo", "Asia/Vladivostok", "Asia/Yakutsk", "Asia/Yekaterinburg", "Asia/Yerevan", "Atlantic/Azores", "Atlantic/Cape Verde", "Atlantic/South Georgia", "Australia/Adelaide", "Australia/Brisbane", "Australia/Canberra", "Australia/Darwin", "Australia/Hobart", "Australia/Melbourne", "Australia/Perth", "Australia/Queensland", "Australia/Sydney", "Europe/Amsterdam", "Europe/Andorra", "Europe/Athens", "Europe/Belfast", "Europe/Belgrade", "Europe/Berlin", "Europe/Brussels", "Europe/Budapest", "Europe/Dublin", "Europe/Helsinki", "Europe/Kiev", "Europe/Lisbon", "Europe/London", "Europe/Luxembourg", "Europe/Madrid", "Europe/Minsk", "Europe/Monaco", "Europe/Moscow", "Europe/Oslo", "Europe/Paris", "Europe/Rome", "Europe/Stockholm", "Europe/Vienna", "Europe/Warsaw", "Europe/Zurich", "Pacific/Auckland", "Pacific/Fiji", "Pacific/Guam", "Pacific/Honolulu", "Pacific/Midway", "Pacific/Tongatapu"];
+  // Ensure moment is available globally for Pikaday
+  if (typeof window !== 'undefined') {
+      window.moment = moment;
+  }
+  // Export a function to safely create Pikaday instances
+  function createPikaday(options) {
+      if (typeof window === 'undefined') {
+          console.warn('Pikaday requires a browser environment');
+          return null;
       }
-      sortTimezones() {
-          let filteredTimezones = this.timeZones.filter((tz) => {
-              return !(tz.toLowerCase() == 'local' || tz == 'UTC');
-          });
-          filteredTimezones.sort((a, b) => {
-              let aOffset = moment$1.tz(new Date(), a.split(' ').join('_')).utcOffset();
-              let bOffset = moment$1.tz(new Date(), b.split(' ').join('_')).utcOffset();
-              if (aOffset < bOffset) {
-                  return -1;
-              }
-              if (aOffset > bOffset) {
-                  return 1;
-              }
-              return 0;
-          });
-          this.timeZones = ['Local', 'UTC'].concat(filteredTimezones);
+      const Pikaday = window.Pikaday;
+      if (!Pikaday) {
+          console.error('Pikaday not available. Make sure pikaday.js is loaded.');
+          return null;
       }
-      render(onTimezoneSelect, defaultTimeZone = null) {
-          this.targetElement = select(this.renderTarget)
-              .classed("tsi-timezonePicker", true);
-          var timezoneSelection = this.targetElement.append("select")
-              .attr("class", "tsi-timezonePicker tsi-select");
-          this.sortTimezones();
-          var options = timezoneSelection.selectAll("option")
-              .data(this.timeZones)
-              .enter()
-              .append("option")
-              .attr('value', d => d)
-              .text((tz) => Utils.convertTimezoneToLabel(tz, this.getString('Local')));
-          timezoneSelection.on("change", function (d) {
-              var timezone = select(this).node().value.replace(/\s/g, "_");
-              onTimezoneSelect(timezone);
-          });
-          defaultTimeZone = defaultTimeZone.replace(/_/g, " ");
-          if (defaultTimeZone != null) {
-              options.filter((d) => d == defaultTimeZone).attr("selected", true);
-          }
-          return;
+      if (!moment || !window.moment) {
+          console.error('Moment.js not available. Pikaday requires moment.js.');
+          return null;
       }
+      return new Pikaday(options);
   }
 
   class DateTimePicker extends ChartComponent {
@@ -38758,8 +38775,8 @@
               weekdays: moment.localeData().weekdays(),
               weekdaysShort: moment.localeData().weekdaysMin()
           };
-          //@ts-ignore
-          this.calendarPicker = new Pikaday({
+          // Use the safe Pikaday wrapper
+          this.calendarPicker = createPikaday({
               bound: false,
               container: this.calendar.node(),
               field: this.calendar.node(),
@@ -38795,6 +38812,11 @@
               maxDate: this.convertToCalendarDate(this.maxMillis),
               defaultDate: Utils.adjustDateFromTimezoneOffset(new Date(this.fromMillis))
           });
+          // Check if Pikaday was created successfully
+          if (!this.calendarPicker) {
+              console.error('Failed to create Pikaday calendar. Check moment.js availability.');
+              return;
+          }
       }
       setSelectedQuickTimes() {
           let isSelected = d => {
@@ -39203,6 +39225,7 @@
       }
       //transformation of buckets created by the UX client to buckets for the availabilityChart
       createDisplayBuckets(fromMillis, toMillis) {
+          //TODO: "" key is confusing, should be "count" or something similar
           var keysInRange = Object.keys(this.transformedAvailability[0].availabilityCount[""]).reduce((inRangeObj, timestamp, i, timestamps) => {
               var currTSMillis = (new Date(timestamp)).valueOf();
               var nextTSMillis = currTSMillis + this.bucketSize;
@@ -39255,6 +39278,7 @@
               this.bucketSize = null;
           }
       }
+      //TODO: should have proper types for parameters
       render(transformedAvailability, chartOptions, rawAvailability = {}) {
           this.setChartOptions(chartOptions);
           this.rawAvailability = rawAvailability;
@@ -45009,6 +45033,10 @@
       }
   }
 
+  // Ensure moment is available globally for Pikaday and other components
+  if (typeof window !== 'undefined') {
+      window.moment = moment;
+  }
   class UXClient {
       constructor() {
           // Public facing components have class constructors exposed as public UXClient members.