@aarhus-university/au-lib-react-components 12.5.1 → 12.6.1

package/src/components/AUCalendarComponent.tsx

@@ -1,497 +1,497 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import React, { useState, FC } from 'react';
-import dayjs from 'dayjs';
-import 'dayjs/locale/da';
-import advancedFormat from 'dayjs/plugin/advancedFormat';
-
-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: number, month: number): number => new Date(year, month, 0).getDate();
-
-// eslint-disable-next-line max-len
-const addDays = (days: number, date: Date): Date => new Date(date.getTime() + days * 60 * 24 * 60000);
-
-const calcEaster = (year: number): Date => {
-  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: Date): boolean => {
-  const year = date.getFullYear();
-  const holidays: Date[] = [];
-  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()).filter((x) => x === date.toString()).length > 0;
-};
-
-const dateAllowed = (date: Date, limitStart: Date, limitEnd: Date): boolean => {
-  if (limitStart && !limitEnd) {
-    return date >= limitStart;
-  }
-
-  if (!limitStart && limitEnd) {
-    return date <= limitEnd;
-  }
-
-  if (limitStart && limitEnd) {
-    return date >= limitStart && date <= limitEnd;
-  }
-
-  return true;
-};
-
-const skipDays = [6, 0, 1, 2, 3, 4, 5];
-
-type Props = {
-  lang?: string;
-  day: number;
-  month: number;
-  year: number;
-  hour: number;
-  minute: number;
-  selected?: Date;
-  onSelected: (selected: Date) => void;
-  highlightWeekend?: boolean;
-  highlightHolidays?: boolean;
-  yearSpanMinus?: number;
-  yearSpanPlus?: number;
-  minuteInterval?: number;
-  showTime?: boolean;
-  closeable?: boolean;
-  onClose?: () => void;
-  limitStart?: Date | null;
-  limitEnd?: Date | null;
-  controls: string;
-};
-
-const AUCalendarComponent: FC<Props> = ({
-  lang = 'da',
-  day,
-  month,
-  year,
-  hour,
-  minute,
-  selected = new Date(),
-  onSelected,
-  highlightWeekend = true,
-  highlightHolidays = true,
-  yearSpanMinus = 5,
-  yearSpanPlus = 5,
-  minuteInterval = 5,
-  showTime = true,
-  closeable = false,
-  onClose = () => { },
-  limitStart = null,
-  limitEnd = null,
-  controls,
-}) => {
-  dayjs.locale(lang);
-  dayjs.extend(advancedFormat);
-
-  const [calendarState, setCalendarState] = useState<ICalendarState>({
-    day,
-    month,
-    year,
-    hour,
-    minute,
-    selected: selected as Date,
-  });
-
-  const {
-    day: sDay,
-    month: sMonth,
-    year: sYear,
-    hour: sHour,
-    minute: sMinute,
-    selected: sSelected,
-  } = calendarState;
-
-  const goBack = () => {
-    const newMonth = sMonth - 1 < 1 ? 12 : (sMonth - 1);
-    const newYear = newMonth === 12 ? (sYear - 1) : sYear;
-    setCalendarState({
-      ...calendarState,
-      ...{
-        month: newMonth,
-        year: newYear,
-      },
-    });
-  };
-
-  const goForward = () => {
-    const newMonth = sMonth + 1 > 12 ? 1 : (sMonth + 1);
-    const newYear = newMonth === 1 ? (sYear + 1) : sYear;
-    setCalendarState({
-      ...calendarState,
-      ...{
-        month: newMonth,
-        year: newYear,
-      },
-    });
-  };
-
-  const renderMonths = months[lang as string].map(
-    (m: string, i: number) => (
-      <option key={m} value={i + 1}>
-        {m}
-      </option>
-    ),
-  );
-
-  let yearStart = yearSpanMinus;
-  // eslint-disable-next-line max-len
-  if (limitStart && limitStart.getFullYear() > (sSelected.getFullYear() - (yearSpanMinus as number))) {
-    yearStart = sSelected.getFullYear() - limitStart.getFullYear();
-  }
-
-  let yearEnd = yearSpanPlus;
-  if (limitEnd && limitEnd.getFullYear() < (sSelected.getFullYear() + (yearSpanPlus as number))) {
-    yearEnd = limitEnd.getFullYear() + sSelected.getFullYear();
-  }
-
-  const yearArr: number[] = [];
-  for (let y = sYear - (yearStart as number); y <= sYear + (yearEnd as number); y += 1) {
-    yearArr.push(y);
-  }
-
-  const renderYears = yearArr.map(
-    (y) => (
-      <option key={y}>
-        {y}
-      </option>
-    ),
-  );
-
-  const renderWeekDays = dayTitles[lang as string].map(
-    (w: string) => (
-      <span key={w} className="calendar__days__day">
-        {w}
-      </span>
-    ),
-  );
-
-  const firstDayInMonth = new Date(sYear, sMonth - 1, 1);
-  const emptyDays = skipDays[firstDayInMonth.getDay()];
-  const prevYear = sMonth === 1 ? sYear - 1 : sYear;
-  const prevMonth = sMonth === 1 ? 12 : sMonth - 1;
-  const numberOfDaysInPrevMonth = daysInMonth(prevYear, prevMonth);
-
-  let rowCount = -1;
-  const renderEmptyDaysBefore = Array(emptyDays).fill(null).map((_, 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) as boolean}
-        className={`calendar__days__date ${isWeekend ? 'calendar__days__date--weekend calendar__days__date--empty' : 'calendar__days__date--empty'}`}
-        onClick={() => {
-          goBack();
-        }}
-        aria-label={dayjs(date).format('LL')}
-      >
-        {beforeDay}
-      </button>
-    );
-  });
-
-  const renderDays = Array(daysInMonth(sYear, sMonth)).fill(null).map((_, i) => {
-    const key = i; // suck it
-    if (rowCount === 6) {
-      rowCount = 0;
-    } else {
-      rowCount += 1;
-    }
-    const newDay = i + 1;
-    const isSelected = (
-      newDay === sSelected.getDate()
-      && sYear === sSelected.getFullYear()
-      && sMonth === sSelected.getMonth() + 1
-    );
-    const isWeekend = (highlightWeekend && rowCount > 4)
-      || (highlightHolidays && isHoliday(new Date(sYear, sMonth - 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(sYear, sMonth - 1, newDay, sHour, sMinute);
-    return (
-      <button
-        key={key}
-        disabled={((limitStart && date < limitStart) || (limitEnd && date > limitEnd) as boolean)}
-        type="button"
-        className={className}
-        onClick={() => {
-          const newSelected = date;
-          setCalendarState({
-            ...calendarState,
-            ...{
-              day: newDay,
-              selected: newSelected,
-            },
-          });
-          onSelected(newSelected);
-        }}
-        aria-label={dayjs(date).format('LL')}
-      >
-        {i + 1}
-      </button>
-    );
-  });
-
-  const nextYear = sMonth === 12 ? (sYear + 1) : sYear;
-  const nextMonth = sMonth === 12 ? 1 : (sMonth + 1);
-  const renderEmptyDaysAfter = Array(6 - rowCount).fill(null).map((_, 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) as boolean}
-        className={`calendar__days__date ${isWeekend ? 'calendar__days__date--weekend calendar__days__date--empty' : 'calendar__days__date--empty'}`}
-        onClick={() => {
-          goForward();
-        }}
-        aria-label={dayjs(date).format('LL')}
-      >
-        {afterDay}
-      </button>
-    );
-  });
-
-  const renderHours = Array(24).fill(null).map((_, i) => {
-    const key = i;
-    const optHour = i < 10 ? `0${i}` : i;
-    return (
-      <option key={key} value={i}>
-        {optHour}
-      </option>
-    );
-  });
-
-  const renderMinutes = Array(60).fill(null).map((_, i) => {
-    const key = i;
-    if (i % (minuteInterval as number) === 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={sMonth}
-            title={lang === 'da' ? 'Vælg måned' : 'Select month'}
-            onChange={(e) => {
-              const newMonth = parseInt(e.target.value, 10);
-              const newSelected = new Date(sYear, newMonth - 1, sDay, sHour, sMinute);
-              if (dateAllowed(newSelected, limitStart as Date, limitEnd as Date)) {
-                setCalendarState({
-                  ...calendarState,
-                  ...{
-                    month: newMonth,
-                    selected: newSelected,
-                  },
-                });
-                onSelected(newSelected);
-              } else {
-                setCalendarState({
-                  ...calendarState,
-                  ...{
-                    month: newMonth,
-                  },
-                });
-              }
-            }}
-          >
-            {renderMonths}
-          </select>
-        </div>
-        <div className="form__field">
-          <select
-            value={sYear}
-            title={lang === 'da' ? 'Vælg år' : 'Select year'}
-            onChange={(e) => {
-              const newYear = parseInt(e.target.value, 10);
-              const newSelected = new Date(newYear, sMonth - 1, sDay, sHour, sMinute);
-              if (dateAllowed(newSelected, limitStart as Date, limitEnd as Date)) {
-                setCalendarState({
-                  ...calendarState,
-                  ...{
-                    year: newYear,
-                    selected: newSelected,
-                  },
-                });
-                onSelected(newSelected);
-              } else {
-                setCalendarState({
-                  ...calendarState,
-                  ...{
-                    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={sHour}
-                title={lang === 'da' ? 'Vælg time' : 'Select hour'}
-                onChange={(e) => {
-                  const newHour = parseInt(e.target.value, 10);
-                  const newSelected = new Date(sYear, sMonth - 1, sDay, newHour, sMinute);
-                  if (dateAllowed(newSelected, limitStart as Date, limitEnd as Date)) {
-                    setCalendarState({
-                      ...calendarState,
-                      ...{
-                        hour: newHour,
-                        selected: newSelected,
-                      },
-                    });
-                    onSelected(newSelected);
-                  } else {
-                    setCalendarState({
-                      ...calendarState,
-                      ...{
-                        hour: newHour,
-                      },
-                    });
-                  }
-                }}
-              >
-                {renderHours}
-              </select>
-            </div>
-            <div className="form__field">
-              <select
-                value={sMinute}
-                title={lang === 'da' ? 'Vælg minut' : 'Select minute'}
-                onChange={(e) => {
-                  const newMinute = parseInt(e.target.value, 10);
-                  const newSelected = new Date(sYear, sMonth - 1, sDay, sHour, newMinute);
-                  if (dateAllowed(newSelected, limitStart as Date, limitEnd as Date)) {
-                    setCalendarState({
-                      ...calendarState,
-                      ...{
-                        minute: newMinute,
-                        selected: newSelected,
-                      },
-                    });
-                    onSelected(newSelected);
-                  } else {
-                    setCalendarState({
-                      ...calendarState,
-                      ...{
-                        minute: newMinute,
-                      },
-                    });
-                  }
-                }}
-              >
-                {renderMinutes}
-              </select>
-            </div>
-          </div>
-        )
-      }
-    </div>
-  );
-};
-
-AUCalendarComponent.displayName = 'AUCalendarComponent';
-export default AUCalendarComponent;
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React, { useState, FC } from 'react';
+import dayjs from 'dayjs';
+import 'dayjs/locale/da';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
+
+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: number, month: number): number => new Date(year, month, 0).getDate();
+
+// eslint-disable-next-line max-len
+const addDays = (days: number, date: Date): Date => new Date(date.getTime() + days * 60 * 24 * 60000);
+
+const calcEaster = (year: number): Date => {
+  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: Date): boolean => {
+  const year = date.getFullYear();
+  const holidays: Date[] = [];
+  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()).filter((x) => x === date.toString()).length > 0;
+};
+
+const dateAllowed = (date: Date, limitStart: Date, limitEnd: Date): boolean => {
+  if (limitStart && !limitEnd) {
+    return date >= limitStart;
+  }
+
+  if (!limitStart && limitEnd) {
+    return date <= limitEnd;
+  }
+
+  if (limitStart && limitEnd) {
+    return date >= limitStart && date <= limitEnd;
+  }
+
+  return true;
+};
+
+const skipDays = [6, 0, 1, 2, 3, 4, 5];
+
+type Props = {
+  lang?: string;
+  day: number;
+  month: number;
+  year: number;
+  hour: number;
+  minute: number;
+  selected?: Date;
+  onSelected: (selected: Date) => void;
+  highlightWeekend?: boolean;
+  highlightHolidays?: boolean;
+  yearSpanMinus?: number;
+  yearSpanPlus?: number;
+  minuteInterval?: number;
+  showTime?: boolean;
+  closeable?: boolean;
+  onClose?: () => void;
+  limitStart?: Date | null;
+  limitEnd?: Date | null;
+  controls: string;
+};
+
+const AUCalendarComponent: FC<Props> = ({
+  lang = 'da',
+  day,
+  month,
+  year,
+  hour,
+  minute,
+  selected = new Date(),
+  onSelected,
+  highlightWeekend = true,
+  highlightHolidays = true,
+  yearSpanMinus = 5,
+  yearSpanPlus = 5,
+  minuteInterval = 5,
+  showTime = true,
+  closeable = false,
+  onClose = () => { },
+  limitStart = null,
+  limitEnd = null,
+  controls,
+}) => {
+  dayjs.locale(lang);
+  dayjs.extend(advancedFormat);
+
+  const [calendarState, setCalendarState] = useState<ICalendarState>({
+    day,
+    month,
+    year,
+    hour,
+    minute,
+    selected: selected as Date,
+  });
+
+  const {
+    day: sDay,
+    month: sMonth,
+    year: sYear,
+    hour: sHour,
+    minute: sMinute,
+    selected: sSelected,
+  } = calendarState;
+
+  const goBack = () => {
+    const newMonth = sMonth - 1 < 1 ? 12 : (sMonth - 1);
+    const newYear = newMonth === 12 ? (sYear - 1) : sYear;
+    setCalendarState({
+      ...calendarState,
+      ...{
+        month: newMonth,
+        year: newYear,
+      },
+    });
+  };
+
+  const goForward = () => {
+    const newMonth = sMonth + 1 > 12 ? 1 : (sMonth + 1);
+    const newYear = newMonth === 1 ? (sYear + 1) : sYear;
+    setCalendarState({
+      ...calendarState,
+      ...{
+        month: newMonth,
+        year: newYear,
+      },
+    });
+  };
+
+  const renderMonths = months[lang as string].map(
+    (m: string, i: number) => (
+      <option key={m} value={i + 1}>
+        {m}
+      </option>
+    ),
+  );
+
+  let yearStart = yearSpanMinus;
+  // eslint-disable-next-line max-len
+  if (limitStart && limitStart.getFullYear() > (sSelected.getFullYear() - (yearSpanMinus as number))) {
+    yearStart = sSelected.getFullYear() - limitStart.getFullYear();
+  }
+
+  let yearEnd = yearSpanPlus;
+  if (limitEnd && limitEnd.getFullYear() < (sSelected.getFullYear() + (yearSpanPlus as number))) {
+    yearEnd = limitEnd.getFullYear() + sSelected.getFullYear();
+  }
+
+  const yearArr: number[] = [];
+  for (let y = sYear - (yearStart as number); y <= sYear + (yearEnd as number); y += 1) {
+    yearArr.push(y);
+  }
+
+  const renderYears = yearArr.map(
+    (y) => (
+      <option key={y}>
+        {y}
+      </option>
+    ),
+  );
+
+  const renderWeekDays = dayTitles[lang as string].map(
+    (w: string) => (
+      <span key={w} className="calendar__days__day">
+        {w}
+      </span>
+    ),
+  );
+
+  const firstDayInMonth = new Date(sYear, sMonth - 1, 1);
+  const emptyDays = skipDays[firstDayInMonth.getDay()];
+  const prevYear = sMonth === 1 ? sYear - 1 : sYear;
+  const prevMonth = sMonth === 1 ? 12 : sMonth - 1;
+  const numberOfDaysInPrevMonth = daysInMonth(prevYear, prevMonth);
+
+  let rowCount = -1;
+  const renderEmptyDaysBefore = Array(emptyDays).fill(null).map((_, 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) as boolean}
+        className={`calendar__days__date ${isWeekend ? 'calendar__days__date--weekend calendar__days__date--empty' : 'calendar__days__date--empty'}`}
+        onClick={() => {
+          goBack();
+        }}
+        aria-label={dayjs(date).format('LL')}
+      >
+        {beforeDay}
+      </button>
+    );
+  });
+
+  const renderDays = Array(daysInMonth(sYear, sMonth)).fill(null).map((_, i) => {
+    const key = i; // suck it
+    if (rowCount === 6) {
+      rowCount = 0;
+    } else {
+      rowCount += 1;
+    }
+    const newDay = i + 1;
+    const isSelected = (
+      newDay === sSelected.getDate()
+      && sYear === sSelected.getFullYear()
+      && sMonth === sSelected.getMonth() + 1
+    );
+    const isWeekend = (highlightWeekend && rowCount > 4)
+      || (highlightHolidays && isHoliday(new Date(sYear, sMonth - 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(sYear, sMonth - 1, newDay, sHour, sMinute);
+    return (
+      <button
+        key={key}
+        disabled={((limitStart && date < limitStart) || (limitEnd && date > limitEnd) as boolean)}
+        type="button"
+        className={className}
+        onClick={() => {
+          const newSelected = date;
+          setCalendarState({
+            ...calendarState,
+            ...{
+              day: newDay,
+              selected: newSelected,
+            },
+          });
+          onSelected(newSelected);
+        }}
+        aria-label={dayjs(date).format('LL')}
+      >
+        {i + 1}
+      </button>
+    );
+  });
+
+  const nextYear = sMonth === 12 ? (sYear + 1) : sYear;
+  const nextMonth = sMonth === 12 ? 1 : (sMonth + 1);
+  const renderEmptyDaysAfter = Array(6 - rowCount).fill(null).map((_, 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) as boolean}
+        className={`calendar__days__date ${isWeekend ? 'calendar__days__date--weekend calendar__days__date--empty' : 'calendar__days__date--empty'}`}
+        onClick={() => {
+          goForward();
+        }}
+        aria-label={dayjs(date).format('LL')}
+      >
+        {afterDay}
+      </button>
+    );
+  });
+
+  const renderHours = Array(24).fill(null).map((_, i) => {
+    const key = i;
+    const optHour = i < 10 ? `0${i}` : i;
+    return (
+      <option key={key} value={i}>
+        {optHour}
+      </option>
+    );
+  });
+
+  const renderMinutes = Array(60).fill(null).map((_, i) => {
+    const key = i;
+    if (i % (minuteInterval as number) === 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={sMonth}
+            title={lang === 'da' ? 'Vælg måned' : 'Select month'}
+            onChange={(e) => {
+              const newMonth = parseInt(e.target.value, 10);
+              const newSelected = new Date(sYear, newMonth - 1, sDay, sHour, sMinute);
+              if (dateAllowed(newSelected, limitStart as Date, limitEnd as Date)) {
+                setCalendarState({
+                  ...calendarState,
+                  ...{
+                    month: newMonth,
+                    selected: newSelected,
+                  },
+                });
+                onSelected(newSelected);
+              } else {
+                setCalendarState({
+                  ...calendarState,
+                  ...{
+                    month: newMonth,
+                  },
+                });
+              }
+            }}
+          >
+            {renderMonths}
+          </select>
+        </div>
+        <div className="form__field">
+          <select
+            value={sYear}
+            title={lang === 'da' ? 'Vælg år' : 'Select year'}
+            onChange={(e) => {
+              const newYear = parseInt(e.target.value, 10);
+              const newSelected = new Date(newYear, sMonth - 1, sDay, sHour, sMinute);
+              if (dateAllowed(newSelected, limitStart as Date, limitEnd as Date)) {
+                setCalendarState({
+                  ...calendarState,
+                  ...{
+                    year: newYear,
+                    selected: newSelected,
+                  },
+                });
+                onSelected(newSelected);
+              } else {
+                setCalendarState({
+                  ...calendarState,
+                  ...{
+                    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={sHour}
+                title={lang === 'da' ? 'Vælg time' : 'Select hour'}
+                onChange={(e) => {
+                  const newHour = parseInt(e.target.value, 10);
+                  const newSelected = new Date(sYear, sMonth - 1, sDay, newHour, sMinute);
+                  if (dateAllowed(newSelected, limitStart as Date, limitEnd as Date)) {
+                    setCalendarState({
+                      ...calendarState,
+                      ...{
+                        hour: newHour,
+                        selected: newSelected,
+                      },
+                    });
+                    onSelected(newSelected);
+                  } else {
+                    setCalendarState({
+                      ...calendarState,
+                      ...{
+                        hour: newHour,
+                      },
+                    });
+                  }
+                }}
+              >
+                {renderHours}
+              </select>
+            </div>
+            <div className="form__field">
+              <select
+                value={sMinute}
+                title={lang === 'da' ? 'Vælg minut' : 'Select minute'}
+                onChange={(e) => {
+                  const newMinute = parseInt(e.target.value, 10);
+                  const newSelected = new Date(sYear, sMonth - 1, sDay, sHour, newMinute);
+                  if (dateAllowed(newSelected, limitStart as Date, limitEnd as Date)) {
+                    setCalendarState({
+                      ...calendarState,
+                      ...{
+                        minute: newMinute,
+                        selected: newSelected,
+                      },
+                    });
+                    onSelected(newSelected);
+                  } else {
+                    setCalendarState({
+                      ...calendarState,
+                      ...{
+                        minute: newMinute,
+                      },
+                    });
+                  }
+                }}
+              >
+                {renderMinutes}
+              </select>
+            </div>
+          </div>
+        )
+      }
+    </div>
+  );
+};
+
+AUCalendarComponent.displayName = 'AUCalendarComponent';
+export default AUCalendarComponent;