@aarhus-university/au-lib-react-components 9.11.18 → 9.12.1

package/src/components/delphinus/AUCalendarComponent.js

@@ -1,487 +1,487 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import moment from 'moment';
-
-const months = {
-  da: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'December'],
-  en: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-};
-const dayTitles = {
-  da: ['Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør', 'Søn'],
-  en: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-};
-
-const daysInMonth = (year, month) => new Date(year, month, 0).getDate();
-
-const addDays = (days, date) => new Date(date.getTime() + days * 60 * 24 * 60000);
-
-const calcEaster = (year) => {
-  const a = year % 19;
-  const b = Math.floor(year / 100);
-  const c = year % 100;
-  const d = Math.floor(b / 4);
-  const e = b % 4;
-  const f = Math.floor((b + 8) / 25);
-  const g = Math.floor((b - f + 1) / 3);
-  const h = (19 * a + b - d - g + 15) % 30;
-  const i = Math.floor(c / 4);
-  const k = c % 4;
-  const l = (32 + 2 * e + 2 * i - h - k) % 7;
-  const m = Math.floor((a + 11 * h + 22 * l) / 451);
-  const n0 = (h + l + 7 * m + 114);
-  const n = Math.floor(n0 / 31) - 1;
-  const p = (n0 % 31) + 1;
-  const date = new Date(year, n, p);
-  return date;
-};
-
-const isHoliday = (date) => {
-  const year = date.getFullYear();
-  const holidays = [];
-  const newYear = new Date(year, 0, 1);
-  holidays.push(newYear);
-  const easter = calcEaster(year);
-  holidays.push(easter);
-  const easterThu = addDays(-3, easter);
-  holidays.push(easterThu);
-  const easterFri = addDays(-2, easter);
-  holidays.push(easterFri);
-  const easter2 = addDays(1, easter);
-  holidays.push(easter2);
-  const stBededag = addDays(26, easter);
-  holidays.push(stBededag);
-  const kristiHf = addDays(39, easter);
-  holidays.push(kristiHf);
-  const whitsun = addDays(49, easter);
-  holidays.push(whitsun);
-  const whitsun2 = addDays(1, whitsun);
-  holidays.push(whitsun2);
-  const grundlov = new Date(year, 5, 5);
-  holidays.push(grundlov);
-  const christmas = new Date(year, 11, 25);
-  holidays.push(christmas);
-  const christmas2 = addDays(1, christmas);
-  holidays.push(christmas2);
-
-  return holidays.map((h) => h.toString()).find((x) => x === date.toString());
-};
-
-const dateAllowed = (date, limitStart, limitEnd) => {
-  if (limitStart && !limitEnd) {
-    return date >= limitStart;
-  }
-
-  if (!limitStart && limitEnd) {
-    return date <= limitEnd;
-  }
-
-  if (limitStart && limitEnd) {
-    return date >= limitStart && date <= limitEnd;
-  }
-
-  return true;
-}
-
-class AUCalendarComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      day: props.day,
-      month: props.month,
-      year: props.year,
-      hour: props.hour,
-      minute: props.minute,
-      selected: props.selected,
-    };
-
-    this.skipDays = [6, 0, 1, 2, 3, 4, 5];
-    this.goBack = this.goBack.bind(this);
-    this.goForward = this.goForward.bind(this);
-
-    moment.locale(props.lang);
-  }
-
-  goBack() {
-    const { month, year } = this.state;
-    const newMonth = month - 1 < 1 ? 12 : (month - 1);
-    const newYear = newMonth === 12 ? (year - 1) : year;
-    this.setState({
-      month: newMonth,
-      year: newYear,
-    });
-  }
-
-  goForward() {
-    const { month, year } = this.state;
-    const newMonth = month + 1 > 12 ? 1 : (month + 1);
-    const newYear = newMonth === 1 ? (year + 1) : year;
-    this.setState({
-      month: newMonth,
-      year: newYear,
-    });
-  }
-
-  render() {
-    const {
-      day,
-      month,
-      year,
-      hour,
-      minute,
-      selected,
-    } = this.state;
-    const {
-      lang,
-      onSelected,
-      highlightWeekend,
-      highlightHolidays,
-      yearSpanMinus,
-      yearSpanPlus,
-      minuteInterval,
-      showTime,
-      closeable,
-      onClose,
-      controls,
-      limitStart,
-      limitEnd,
-    } = this.props;
-
-    const renderMonths = months[lang].map(
-      (m, i) => (
-        <option key={m} value={i + 1}>
-          {m}
-        </option>
-      ),
-    );
-
-    let yearStart = yearSpanMinus;
-    if (limitStart && limitStart.getFullYear() > (selected.getFullYear() - yearSpanMinus)) {
-      yearStart = selected.getFullYear() - limitStart.getFullYear();
-    }
-
-    let yearEnd = yearSpanPlus;
-    if (limitEnd && limitEnd.getFullYear() < (selected.getFullYear() + yearSpanPlus)) {
-      yearEnd = limitEnd.getFullYear() + selected.getFullYear();
-    }
-
-    const yearArr = [];
-    for (let y = year - yearStart; y <= year + yearEnd; y += 1) {
-      yearArr.push(y);
-    }
-
-    const renderYears = yearArr.map(
-      (y) => (
-        <option key={y}>
-          {y}
-        </option>
-      ),
-    );
-
-    const renderWeekDays = dayTitles[lang].map(
-      (w) => (
-        <span key={w} className="calendar__days__day">
-          {w}
-        </span>
-      ),
-    );
-
-    const firstDayInMonth = new Date(year, month - 1, 1);
-    const emptyDays = this.skipDays[firstDayInMonth.getDay()];
-    const prevYear = month === 1 ? year - 1 : year;
-    const prevMonth = month === 1 ? 12 : month - 1;
-    const numberOfDaysInPrevMonth = daysInMonth(
-      prevYear, prevMonth,
-    );
-
-    let rowCount = -1;
-    const renderEmptyDaysBefore = Array(emptyDays).fill().map((e, i) => {
-      rowCount = i;
-      const beforeDay = numberOfDaysInPrevMonth - emptyDays + i + 1;
-      const date = new Date(prevYear, prevMonth - 1, beforeDay);
-      const isWeekend = (highlightWeekend && rowCount > 4)
-        || (highlightHolidays
-          && isHoliday(date));
-      return (
-        <button
-          type="button"
-          key={rowCount}
-          disabled={limitStart && date < limitStart}
-          className={`calendar__days__date ${isWeekend ? 'calendar__days__date--weekend calendar__days__date--empty' : 'calendar__days__date--empty'}`}
-          onClick={() => {
-            this.goBack();
-          }}
-          aria-label={moment(date).format('LL')}
-        >
-          {beforeDay}
-        </button>
-      );
-    });
-
-    const renderDays = Array(daysInMonth(year, month)).fill().map((d, i) => {
-      const key = i; // suck it
-      if (rowCount === 6) {
-        rowCount = 0;
-      } else {
-        rowCount += 1;
-      }
-      const newDay = i + 1;
-      const isSelected = (
-        newDay === selected.getDate()
-        && year === selected.getFullYear()
-        && month === selected.getMonth() + 1
-      );
-      const isWeekend = (highlightWeekend && rowCount > 4)
-        || (highlightHolidays && isHoliday(new Date(year, month - 1, newDay)));
-      let className = 'calendar__days__date';
-      if (isSelected) {
-        className = `${className} calendar__days__date--selected`;
-      }
-      if (isWeekend) {
-        className = `${className} calendar__days__date--weekend`;
-      }
-      const date = new Date(year, month - 1, newDay, hour, minute);
-      return (
-        <button
-          key={key}
-          disabled={(limitStart && date < limitStart) || (limitEnd && date > limitEnd)}
-          type="button"
-          className={className}
-          onClick={() => {
-            const newSelected = date;
-            this.setState({
-              day: newDay,
-              selected: newSelected,
-            }, () => {
-              onSelected(newSelected);
-            });
-          }}
-          aria-label={moment(date).format('LL')}
-        >
-          {i + 1}
-        </button>
-      );
-    });
-
-    const nextYear = month === 12 ? (year + 1) : year;
-    const nextMonth = month === 12 ? 1 : (month + 1);
-    const renderEmptyDaysAfter = Array(6 - rowCount).fill().map((e, i) => {
-      const key = i;
-      const afterDay = i + 1;
-      if (rowCount === 6) {
-        rowCount = 0;
-      } else {
-        rowCount += 1;
-      }
-      const date = new Date(nextYear, nextMonth - 1, afterDay);
-      const isWeekend = (highlightWeekend && rowCount > 4)
-        || (highlightHolidays
-          && isHoliday(date));
-      return (
-        <button
-          type="button"
-          key={key}
-          disabled={limitEnd && date > limitEnd}
-          className={`calendar__days__date ${isWeekend ? 'calendar__days__date--weekend calendar__days__date--empty' : 'calendar__days__date--empty'}`}
-          onClick={() => {
-            this.goForward();
-          }}
-          aria-label={moment(date).format('LL')}
-        >
-          {afterDay}
-        </button>
-      );
-    });
-
-    const renderHours = Array(24).fill().map((h, i) => {
-      const key = i;
-      const optHour = i < 10 ? `0${i}` : i;
-      return (
-        <option key={key} value={i}>
-          {optHour}
-        </option>
-      );
-    });
-
-    const renderMinutes = Array(60).fill().map((h, i) => {
-      const key = i;
-      if (i % minuteInterval === 0) {
-        const optMinute = i < 10 ? `0${i}` : i;
-        return (
-          <option key={key} value={i}>
-            {optMinute}
-          </option>
-        );
-      }
-      return null;
-    });
-
-    return (
-      <div id={`${controls}-calendar`} className="calendar" aria-controls={controls}>
-        <div className="calendar__year-month">
-          <div className="form__field">
-            <select
-              value={month}
-              title={lang === 'da' ? 'Vælg måned' : 'Select month'}
-              onChange={(e) => {
-                const newMonth = parseInt(e.target.value, 10);
-                const newSelected = new Date(year, newMonth - 1, day, hour, minute);
-                if (dateAllowed(newSelected, limitStart, limitEnd)) {
-                  this.setState({
-                    month: newMonth,
-                    selected: newSelected,
-                  }, () => {
-                    onSelected(newSelected);
-                  });
-                } else {
-                  this.setState({
-                    month: newMonth,
-                  });
-                }
-              }}
-            >
-              {renderMonths}
-            </select>
-          </div>
-          <div className="form__field">
-            <select
-              value={year}
-              title={lang === 'da' ? 'Vælg år' : 'Select year'}
-              onChange={(e) => {
-                const newYear = parseInt(e.target.value, 10);
-                const newSelected = new Date(newYear, month - 1, day, hour, minute);
-                if (dateAllowed(newSelected, limitStart, limitEnd)) {
-                  this.setState({
-                    year: newYear,
-                    selected: newSelected,
-                  }, () => {
-                    onSelected(newSelected);
-                  });
-                } else {
-                  this.setState({
-                    year: newYear,
-                  });
-                }
-              }}
-            >
-              {renderYears}
-            </select>
-          </div>
-          {
-            closeable && (
-              <button
-                className="button button--icon--hide-label button--small button--icon"
-                type="button"
-                data-icon=""
-                onClick={onClose}
-              >
-                {lang === 'da' ? 'Luk' : 'Close'}
-              </button>
-            )
-          }
-        </div>
-        <div className="calendar__days">
-          {renderWeekDays}
-          {renderEmptyDaysBefore}
-          {renderDays}
-          {renderEmptyDaysAfter}
-        </div>
-        {
-          showTime && (
-            <div className="calendar__time">
-              <div className="form__field">
-                <select
-                  value={hour}
-                  title={lang === 'da' ? 'Vælg time' : 'Select hour'}
-                  onChange={(e) => {
-                    const newHour = parseInt(e.target.value, 10);
-                    const newSelected = new Date(year, month - 1, day, newHour, minute);
-                    if (dateAllowed(newSelected, limitStart, limitEnd)) {
-                      this.setState({
-                        hour: newHour,
-                        selected: newSelected,
-                      }, () => {
-                        onSelected(newSelected);
-                      });
-                    } else {
-                      this.setState({
-                        hour: newHour,
-                      });
-                    }
-                  }}
-                >
-                  {renderHours}
-                </select>
-              </div>
-              <div className="form__field">
-                <select
-                  value={minute}
-                  title={lang === 'da' ? 'Vælg minut' : 'Select minute'}
-                  onChange={(e) => {
-                    const newMinute = parseInt(e.target.value, 10);
-                    const newSelected = new Date(year, month - 1, day, hour, newMinute);
-                    if (dateAllowed(newSelected, limitStart, limitEnd)) {
-                      this.setState({
-                        minute: newMinute,
-                        selected: newSelected,
-                      }, () => {
-                        onSelected(newSelected);
-                      });
-                    } else {
-                      this.setState({
-                        minut: newMinute,
-                      });
-                    }
-                  }}
-                >
-                  {renderMinutes}
-                </select>
-              </div>
-            </div>
-          )
-        }
-      </div>
-    );
-  }
-}
-
-AUCalendarComponent.defaultProps = {
-  lang: 'da',
-  selected: new Date(),
-  onSelected: () => { },
-  highlightWeekend: true,
-  highlightHolidays: true,
-  yearSpanMinus: 5,
-  yearSpanPlus: 5,
-  minuteInterval: 5,
-  showTime: true,
-  closeable: false,
-  onClose: () => { },
-  limitStart: null,
-  limitEnd: null,
-};
-
-AUCalendarComponent.propTypes = {
-  lang: PropTypes.string,
-  selected: PropTypes.instanceOf(Date),
-  day: PropTypes.number.isRequired,
-  month: PropTypes.number.isRequired,
-  year: PropTypes.number.isRequired,
-  hour: PropTypes.number.isRequired,
-  minute: PropTypes.number.isRequired,
-  highlightWeekend: PropTypes.bool,
-  highlightHolidays: PropTypes.bool,
-  onSelected: PropTypes.func,
-  yearSpanMinus: PropTypes.number,
-  yearSpanPlus: PropTypes.number,
-  minuteInterval: PropTypes.number,
-  showTime: PropTypes.bool,
-  closeable: PropTypes.bool,
-  onClose: PropTypes.func,
-  controls: PropTypes.string.isRequired,
-  limitStart: PropTypes.instanceOf(Date),
-  limitEnd: PropTypes.instanceOf(Date),
-};
-
-AUCalendarComponent.displayName = 'AUCalendarComponent';
-export default AUCalendarComponent;
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+
+const months = {
+  da: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'December'],
+  en: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+};
+const dayTitles = {
+  da: ['Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør', 'Søn'],
+  en: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+};
+
+const daysInMonth = (year, month) => new Date(year, month, 0).getDate();
+
+const addDays = (days, date) => new Date(date.getTime() + days * 60 * 24 * 60000);
+
+const calcEaster = (year) => {
+  const a = year % 19;
+  const b = Math.floor(year / 100);
+  const c = year % 100;
+  const d = Math.floor(b / 4);
+  const e = b % 4;
+  const f = Math.floor((b + 8) / 25);
+  const g = Math.floor((b - f + 1) / 3);
+  const h = (19 * a + b - d - g + 15) % 30;
+  const i = Math.floor(c / 4);
+  const k = c % 4;
+  const l = (32 + 2 * e + 2 * i - h - k) % 7;
+  const m = Math.floor((a + 11 * h + 22 * l) / 451);
+  const n0 = (h + l + 7 * m + 114);
+  const n = Math.floor(n0 / 31) - 1;
+  const p = (n0 % 31) + 1;
+  const date = new Date(year, n, p);
+  return date;
+};
+
+const isHoliday = (date) => {
+  const year = date.getFullYear();
+  const holidays = [];
+  const newYear = new Date(year, 0, 1);
+  holidays.push(newYear);
+  const easter = calcEaster(year);
+  holidays.push(easter);
+  const easterThu = addDays(-3, easter);
+  holidays.push(easterThu);
+  const easterFri = addDays(-2, easter);
+  holidays.push(easterFri);
+  const easter2 = addDays(1, easter);
+  holidays.push(easter2);
+  const stBededag = addDays(26, easter);
+  holidays.push(stBededag);
+  const kristiHf = addDays(39, easter);
+  holidays.push(kristiHf);
+  const whitsun = addDays(49, easter);
+  holidays.push(whitsun);
+  const whitsun2 = addDays(1, whitsun);
+  holidays.push(whitsun2);
+  const grundlov = new Date(year, 5, 5);
+  holidays.push(grundlov);
+  const christmas = new Date(year, 11, 25);
+  holidays.push(christmas);
+  const christmas2 = addDays(1, christmas);
+  holidays.push(christmas2);
+
+  return holidays.map((h) => h.toString()).find((x) => x === date.toString());
+};
+
+const dateAllowed = (date, limitStart, limitEnd) => {
+  if (limitStart && !limitEnd) {
+    return date >= limitStart;
+  }
+
+  if (!limitStart && limitEnd) {
+    return date <= limitEnd;
+  }
+
+  if (limitStart && limitEnd) {
+    return date >= limitStart && date <= limitEnd;
+  }
+
+  return true;
+}
+
+class AUCalendarComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      day: props.day,
+      month: props.month,
+      year: props.year,
+      hour: props.hour,
+      minute: props.minute,
+      selected: props.selected,
+    };
+
+    this.skipDays = [6, 0, 1, 2, 3, 4, 5];
+    this.goBack = this.goBack.bind(this);
+    this.goForward = this.goForward.bind(this);
+
+    moment.locale(props.lang);
+  }
+
+  goBack() {
+    const { month, year } = this.state;
+    const newMonth = month - 1 < 1 ? 12 : (month - 1);
+    const newYear = newMonth === 12 ? (year - 1) : year;
+    this.setState({
+      month: newMonth,
+      year: newYear,
+    });
+  }
+
+  goForward() {
+    const { month, year } = this.state;
+    const newMonth = month + 1 > 12 ? 1 : (month + 1);
+    const newYear = newMonth === 1 ? (year + 1) : year;
+    this.setState({
+      month: newMonth,
+      year: newYear,
+    });
+  }
+
+  render() {
+    const {
+      day,
+      month,
+      year,
+      hour,
+      minute,
+      selected,
+    } = this.state;
+    const {
+      lang,
+      onSelected,
+      highlightWeekend,
+      highlightHolidays,
+      yearSpanMinus,
+      yearSpanPlus,
+      minuteInterval,
+      showTime,
+      closeable,
+      onClose,
+      controls,
+      limitStart,
+      limitEnd,
+    } = this.props;
+
+    const renderMonths = months[lang].map(
+      (m, i) => (
+        <option key={m} value={i + 1}>
+          {m}
+        </option>
+      ),
+    );
+
+    let yearStart = yearSpanMinus;
+    if (limitStart && limitStart.getFullYear() > (selected.getFullYear() - yearSpanMinus)) {
+      yearStart = selected.getFullYear() - limitStart.getFullYear();
+    }
+
+    let yearEnd = yearSpanPlus;
+    if (limitEnd && limitEnd.getFullYear() < (selected.getFullYear() + yearSpanPlus)) {
+      yearEnd = limitEnd.getFullYear() + selected.getFullYear();
+    }
+
+    const yearArr = [];
+    for (let y = year - yearStart; y <= year + yearEnd; y += 1) {
+      yearArr.push(y);
+    }
+
+    const renderYears = yearArr.map(
+      (y) => (
+        <option key={y}>
+          {y}
+        </option>
+      ),
+    );
+
+    const renderWeekDays = dayTitles[lang].map(
+      (w) => (
+        <span key={w} className="calendar__days__day">
+          {w}
+        </span>
+      ),
+    );
+
+    const firstDayInMonth = new Date(year, month - 1, 1);
+    const emptyDays = this.skipDays[firstDayInMonth.getDay()];
+    const prevYear = month === 1 ? year - 1 : year;
+    const prevMonth = month === 1 ? 12 : month - 1;
+    const numberOfDaysInPrevMonth = daysInMonth(
+      prevYear, prevMonth,
+    );
+
+    let rowCount = -1;
+    const renderEmptyDaysBefore = Array(emptyDays).fill().map((e, i) => {
+      rowCount = i;
+      const beforeDay = numberOfDaysInPrevMonth - emptyDays + i + 1;
+      const date = new Date(prevYear, prevMonth - 1, beforeDay);
+      const isWeekend = (highlightWeekend && rowCount > 4)
+        || (highlightHolidays
+          && isHoliday(date));
+      return (
+        <button
+          type="button"
+          key={rowCount}
+          disabled={limitStart && date < limitStart}
+          className={`calendar__days__date ${isWeekend ? 'calendar__days__date--weekend calendar__days__date--empty' : 'calendar__days__date--empty'}`}
+          onClick={() => {
+            this.goBack();
+          }}
+          aria-label={moment(date).format('LL')}
+        >
+          {beforeDay}
+        </button>
+      );
+    });
+
+    const renderDays = Array(daysInMonth(year, month)).fill().map((d, i) => {
+      const key = i; // suck it
+      if (rowCount === 6) {
+        rowCount = 0;
+      } else {
+        rowCount += 1;
+      }
+      const newDay = i + 1;
+      const isSelected = (
+        newDay === selected.getDate()
+        && year === selected.getFullYear()
+        && month === selected.getMonth() + 1
+      );
+      const isWeekend = (highlightWeekend && rowCount > 4)
+        || (highlightHolidays && isHoliday(new Date(year, month - 1, newDay)));
+      let className = 'calendar__days__date';
+      if (isSelected) {
+        className = `${className} calendar__days__date--selected`;
+      }
+      if (isWeekend) {
+        className = `${className} calendar__days__date--weekend`;
+      }
+      const date = new Date(year, month - 1, newDay, hour, minute);
+      return (
+        <button
+          key={key}
+          disabled={(limitStart && date < limitStart) || (limitEnd && date > limitEnd)}
+          type="button"
+          className={className}
+          onClick={() => {
+            const newSelected = date;
+            this.setState({
+              day: newDay,
+              selected: newSelected,
+            }, () => {
+              onSelected(newSelected);
+            });
+          }}
+          aria-label={moment(date).format('LL')}
+        >
+          {i + 1}
+        </button>
+      );
+    });
+
+    const nextYear = month === 12 ? (year + 1) : year;
+    const nextMonth = month === 12 ? 1 : (month + 1);
+    const renderEmptyDaysAfter = Array(6 - rowCount).fill().map((e, i) => {
+      const key = i;
+      const afterDay = i + 1;
+      if (rowCount === 6) {
+        rowCount = 0;
+      } else {
+        rowCount += 1;
+      }
+      const date = new Date(nextYear, nextMonth - 1, afterDay);
+      const isWeekend = (highlightWeekend && rowCount > 4)
+        || (highlightHolidays
+          && isHoliday(date));
+      return (
+        <button
+          type="button"
+          key={key}
+          disabled={limitEnd && date > limitEnd}
+          className={`calendar__days__date ${isWeekend ? 'calendar__days__date--weekend calendar__days__date--empty' : 'calendar__days__date--empty'}`}
+          onClick={() => {
+            this.goForward();
+          }}
+          aria-label={moment(date).format('LL')}
+        >
+          {afterDay}
+        </button>
+      );
+    });
+
+    const renderHours = Array(24).fill().map((h, i) => {
+      const key = i;
+      const optHour = i < 10 ? `0${i}` : i;
+      return (
+        <option key={key} value={i}>
+          {optHour}
+        </option>
+      );
+    });
+
+    const renderMinutes = Array(60).fill().map((h, i) => {
+      const key = i;
+      if (i % minuteInterval === 0) {
+        const optMinute = i < 10 ? `0${i}` : i;
+        return (
+          <option key={key} value={i}>
+            {optMinute}
+          </option>
+        );
+      }
+      return null;
+    });
+
+    return (
+      <div id={`${controls}-calendar`} className="calendar" aria-controls={controls}>
+        <div className="calendar__year-month">
+          <div className="form__field">
+            <select
+              value={month}
+              title={lang === 'da' ? 'Vælg måned' : 'Select month'}
+              onChange={(e) => {
+                const newMonth = parseInt(e.target.value, 10);
+                const newSelected = new Date(year, newMonth - 1, day, hour, minute);
+                if (dateAllowed(newSelected, limitStart, limitEnd)) {
+                  this.setState({
+                    month: newMonth,
+                    selected: newSelected,
+                  }, () => {
+                    onSelected(newSelected);
+                  });
+                } else {
+                  this.setState({
+                    month: newMonth,
+                  });
+                }
+              }}
+            >
+              {renderMonths}
+            </select>
+          </div>
+          <div className="form__field">
+            <select
+              value={year}
+              title={lang === 'da' ? 'Vælg år' : 'Select year'}
+              onChange={(e) => {
+                const newYear = parseInt(e.target.value, 10);
+                const newSelected = new Date(newYear, month - 1, day, hour, minute);
+                if (dateAllowed(newSelected, limitStart, limitEnd)) {
+                  this.setState({
+                    year: newYear,
+                    selected: newSelected,
+                  }, () => {
+                    onSelected(newSelected);
+                  });
+                } else {
+                  this.setState({
+                    year: newYear,
+                  });
+                }
+              }}
+            >
+              {renderYears}
+            </select>
+          </div>
+          {
+            closeable && (
+              <button
+                className="button button--icon--hide-label button--small button--icon"
+                type="button"
+                data-icon=""
+                onClick={onClose}
+              >
+                {lang === 'da' ? 'Luk' : 'Close'}
+              </button>
+            )
+          }
+        </div>
+        <div className="calendar__days">
+          {renderWeekDays}
+          {renderEmptyDaysBefore}
+          {renderDays}
+          {renderEmptyDaysAfter}
+        </div>
+        {
+          showTime && (
+            <div className="calendar__time">
+              <div className="form__field">
+                <select
+                  value={hour}
+                  title={lang === 'da' ? 'Vælg time' : 'Select hour'}
+                  onChange={(e) => {
+                    const newHour = parseInt(e.target.value, 10);
+                    const newSelected = new Date(year, month - 1, day, newHour, minute);
+                    if (dateAllowed(newSelected, limitStart, limitEnd)) {
+                      this.setState({
+                        hour: newHour,
+                        selected: newSelected,
+                      }, () => {
+                        onSelected(newSelected);
+                      });
+                    } else {
+                      this.setState({
+                        hour: newHour,
+                      });
+                    }
+                  }}
+                >
+                  {renderHours}
+                </select>
+              </div>
+              <div className="form__field">
+                <select
+                  value={minute}
+                  title={lang === 'da' ? 'Vælg minut' : 'Select minute'}
+                  onChange={(e) => {
+                    const newMinute = parseInt(e.target.value, 10);
+                    const newSelected = new Date(year, month - 1, day, hour, newMinute);
+                    if (dateAllowed(newSelected, limitStart, limitEnd)) {
+                      this.setState({
+                        minute: newMinute,
+                        selected: newSelected,
+                      }, () => {
+                        onSelected(newSelected);
+                      });
+                    } else {
+                      this.setState({
+                        minut: newMinute,
+                      });
+                    }
+                  }}
+                >
+                  {renderMinutes}
+                </select>
+              </div>
+            </div>
+          )
+        }
+      </div>
+    );
+  }
+}
+
+AUCalendarComponent.defaultProps = {
+  lang: 'da',
+  selected: new Date(),
+  onSelected: () => { },
+  highlightWeekend: true,
+  highlightHolidays: true,
+  yearSpanMinus: 5,
+  yearSpanPlus: 5,
+  minuteInterval: 5,
+  showTime: true,
+  closeable: false,
+  onClose: () => { },
+  limitStart: null,
+  limitEnd: null,
+};
+
+AUCalendarComponent.propTypes = {
+  lang: PropTypes.string,
+  selected: PropTypes.instanceOf(Date),
+  day: PropTypes.number.isRequired,
+  month: PropTypes.number.isRequired,
+  year: PropTypes.number.isRequired,
+  hour: PropTypes.number.isRequired,
+  minute: PropTypes.number.isRequired,
+  highlightWeekend: PropTypes.bool,
+  highlightHolidays: PropTypes.bool,
+  onSelected: PropTypes.func,
+  yearSpanMinus: PropTypes.number,
+  yearSpanPlus: PropTypes.number,
+  minuteInterval: PropTypes.number,
+  showTime: PropTypes.bool,
+  closeable: PropTypes.bool,
+  onClose: PropTypes.func,
+  controls: PropTypes.string.isRequired,
+  limitStart: PropTypes.instanceOf(Date),
+  limitEnd: PropTypes.instanceOf(Date),
+};
+
+AUCalendarComponent.displayName = 'AUCalendarComponent';
+export default AUCalendarComponent;