splitted function into separate file / commented usage

packages/components/calendar/utils/compareMonths.js

@@ -0,0 +1,10 @@
+import moment from "moment";
+
+// takes 2 Date objects as input 
+// => returns difference in months
+
+export const compareMonths = (date1, date2) => {
+  return moment(date1)
+    .startOf("months")
+    .diff(moment(date2).startOf("months"), "months");
+};

packages/components/calendar/utils/getArrayYears.js

@@ -0,0 +1,21 @@
+import moment from "moment";
+
+// takes 2 Date objects: min and max dates
+// => returns array of years covered between min and max dates
+// returned object is {key: year number, label: year string}
+
+export const getArrayYears = (minDate, maxDate) => {
+  const minYear = minDate.getFullYear();
+  const maxYear = maxDate.getFullYear();
+  const yearList = [];
+
+  let i = minYear;
+  while (i <= maxYear) {
+    let newDate = new Date(i, 0, 1);
+    const label = moment(newDate).format("YYYY");
+    const key = i;
+    yearList.push({ key, label: label });
+    i++;
+  }
+  return yearList.reverse();
+};

packages/components/calendar/utils/getCurrentMonth.js

@@ -0,0 +1,12 @@
+// takes array of months, openToDate Date obj
+// returns current month
+
+export const getCurrentMonth = (months, openToDate) => {
+  const openToDateMonth = openToDate.getMonth();
+  let selectedMonth = months.find((x) => x.key == openToDateMonth);
+
+  if (selectedMonth.disabled === true) {
+    selectedMonth = months.find((x) => x.disabled === false);
+  }
+  return selectedMonth;
+};

packages/components/calendar/utils/getCurrentYear.js

@@ -0,0 +1,12 @@
+// takes array of years ['2012', '2013' ...], openToDate Date obj
+// returns current year
+
+export const getCurrentYear = (arrayYears, openToDate) => {
+  const openToDateYear = openToDate.getFullYear();
+  let currentYear = arrayYears.find((x) => x.key == openToDateYear);
+  if (!currentYear) {
+    const newDate = this.props.minDate.getFullYear();
+    currentYear = { key: newDate, label: `${newDate}` };
+  }
+  return currentYear;
+};

packages/components/calendar/utils/getDays.js

@@ -0,0 +1,176 @@
+import { getFirstMonthDay } from "./getFirstMonthDay";
+import { compareMonths } from "./compareMonths";
+
+// returns [{className: "calendar-month_neighboringMonth", dayState: "prev", disableClass: null, value: 26} ...]
+
+export const getDays = (minDate, maxDate, openToDate, selectedDate) => {
+  const currentYear = openToDate.getFullYear();
+  const currentMonth = openToDate.getMonth() + 1;
+  const countDaysInMonth = new Date(currentYear, currentMonth, 0).getDate();
+  let countDaysInPrevMonth = new Date(
+    currentYear,
+    currentMonth - 1,
+    0
+  ).getDate();
+  const arrayDays = [];
+  let className = "calendar-month_neighboringMonth";
+
+  const openToDateMonth = openToDate.getMonth();
+  const openToDateYear = openToDate.getFullYear();
+
+  const maxDateMonth = maxDate.getMonth();
+  const maxDateYear = maxDate.getFullYear();
+  const maxDateDay = maxDate.getDate();
+
+  const minDateMonth = minDate.getMonth();
+  const minDateYear = minDate.getFullYear();
+  const minDateDay = minDate.getDate();
+
+  //Disable preview month
+  let disableClass = null;
+  if (openToDateYear === minDateYear && openToDateMonth === minDateMonth) {
+    disableClass = "calendar-month_disabled";
+  }
+
+  //Prev month
+  let prevMonthDay = null;
+  if (openToDateYear === minDateYear && openToDateMonth - 1 === minDateMonth) {
+    prevMonthDay = minDateDay;
+  }
+
+  //prev month + year
+  let prevYearDay = null;
+  if (
+    openToDateYear === minDateYear + 1 &&
+    openToDateMonth === 0 &&
+    minDateMonth === 11
+  ) {
+    prevYearDay = minDateDay;
+  }
+
+  // Show neighboring days in prev month
+  const firstDayOfMonth = getFirstMonthDay(openToDate);
+
+  for (let i = firstDayOfMonth; i != 0; i--) {
+    if (countDaysInPrevMonth + 1 === prevMonthDay) {
+      disableClass = "calendar-month_disabled";
+    }
+    if (countDaysInPrevMonth + 1 === prevYearDay) {
+      disableClass = "calendar-month_disabled";
+    }
+    arrayDays.unshift({
+      value: countDaysInPrevMonth--,
+      disableClass,
+      className,
+      dayState: "prev",
+    });
+  }
+
+  //Disable max days in month
+  let maxDay, minDay;
+  disableClass = null;
+  if (openToDateYear === maxDateYear && openToDateMonth >= maxDateMonth) {
+    if (openToDateMonth === maxDateMonth) {
+      maxDay = maxDateDay;
+    } else {
+      maxDay = null;
+    }
+  }
+
+  //Disable min days in month
+  if (openToDateYear === minDateYear && openToDateMonth >= minDateMonth) {
+    if (openToDateMonth === minDateMonth) {
+      minDay = minDateDay;
+    } else {
+      minDay = null;
+    }
+  }
+
+  // Show days in month and weekend days
+  let seven = 7;
+  const dateNow = selectedDate.getDate();
+
+  for (let i = 1; i <= countDaysInMonth; i++) {
+    if (i === seven - firstDayOfMonth - 1) {
+      className = "calendar-month_weekend";
+    } else if (i === seven - firstDayOfMonth) {
+      seven += 7;
+      className = "calendar-month_weekend";
+    } else {
+      className = "calendar-month";
+    }
+    if (i === dateNow && compareMonths(openToDate, selectedDate) === 0) {
+      className = "calendar-month_selected-day";
+    }
+    if (i > maxDay || i < minDay) {
+      disableClass = "calendar-month_disabled";
+      className = "calendar-month_disabled";
+    } else {
+      disableClass = null;
+    }
+
+    arrayDays.push({
+      value: i,
+      disableClass,
+      className,
+      dayState: "now",
+    });
+  }
+
+  //Calculating neighboring days in next month
+  let maxDaysInMonthTable = 42;
+  const maxDaysInMonth = 42;
+  if (firstDayOfMonth > 5 && countDaysInMonth >= 30) {
+    maxDaysInMonthTable += 7;
+  } else if (firstDayOfMonth >= 5 && countDaysInMonth > 30) {
+    maxDaysInMonthTable += 7;
+  }
+  if (maxDaysInMonthTable > maxDaysInMonth) {
+    maxDaysInMonthTable -= 7;
+  }
+
+  //Disable next month days
+  disableClass = null;
+  if (openToDateYear === maxDateYear && openToDateMonth >= maxDateMonth) {
+    disableClass = "calendar-month_disabled";
+  }
+
+  //next month + year
+  let nextYearDay = null;
+  if (
+    openToDateYear === maxDateYear - 1 &&
+    openToDateMonth === 11 &&
+    maxDateMonth === 0
+  ) {
+    nextYearDay = maxDateDay;
+  }
+
+  //next month
+  let nextMonthDay = null;
+  if (openToDateYear === maxDateYear && openToDateMonth === maxDateMonth - 1) {
+    nextMonthDay = maxDateDay;
+  }
+
+  //Show neighboring days in next month
+  let dayInNextMonth = 1;
+  className = "calendar-month_neighboringMonth";
+  for (
+    let i = countDaysInMonth;
+    i < maxDaysInMonthTable - firstDayOfMonth;
+    i++
+  ) {
+    if (i - countDaysInMonth === nextYearDay) {
+      disableClass = "calendar-month_disabled";
+    }
+    if (i - countDaysInMonth === nextMonthDay) {
+      disableClass = "calendar-month_disabled";
+    }
+    arrayDays.push({
+      value: dayInNextMonth++,
+      disableClass,
+      className,
+      dayState: "next",
+    });
+  }
+  return arrayDays;
+};

packages/components/calendar/utils/getFirstMonthDay.js

@@ -0,0 +1,13 @@
+import moment from "moment";
+
+// takes Date object
+// return first day in terms of weekday
+
+export const getFirstMonthDay = (openToDate) => {
+  const firstDay = moment(openToDate).locale("en").startOf("month").format("d");
+  let day = firstDay - 1;
+  if (day < 0) {
+    day = 6;
+  }
+  return day;
+};

packages/components/calendar/utils/getListMonth.js

@@ -0,0 +1,50 @@
+//return list of months with disabled flag
+// ex: [{key: '1', label: 'February', disabled: true}, ...]
+
+export const getListMonth = (minDate, maxDate, openToDate, months) => {
+  const minDateYear = minDate.getFullYear();
+  const minDateMonth = minDate.getMonth();
+
+  const maxDateYear = maxDate.getFullYear();
+  const maxDateMonth = maxDate.getMonth();
+
+  const openToDateYear = openToDate.getFullYear();
+
+  const listMonths = [];
+
+  let i = 0;
+  while (i <= 11) {
+    listMonths.push({
+      key: `${i}`,
+      label: `${months[i]}`,
+      disabled: false,
+    });
+    i++;
+  }
+
+  if (openToDateYear < minDateYear) {
+    i = 0;
+    while (i != 12) {
+      if (i != minDateMonth) listMonths[i].disabled = true;
+      i++;
+    }
+  }
+
+  if (openToDateYear === minDateYear) {
+    i = 0;
+    while (i != minDateMonth) {
+      listMonths[i].disabled = true;
+      i++;
+    }
+  }
+
+  if (openToDateYear === maxDateYear) {
+    i = 11;
+    while (i != maxDateMonth) {
+      listMonths[i].disabled = true;
+      i--;
+    }
+  }
+
+  return listMonths;
+};

packages/components/calendar/utils/getWeekDays.js

@@ -0,0 +1,16 @@
+// weekdays = ['Su', 'Mo', 'Tu' ...etc]
+// props = calendar component's props
+// return [{key: 'en', value: 'Mo', disabled: false} ...]
+
+export const getWeekDays = (weekdays, props) => {
+  let arrayWeekDays = [];
+  weekdays.push(weekdays.shift());
+  for (let i = 0; i < weekdays.length; i++) {
+    arrayWeekDays.push({
+      key: `${props.locale}_${i}`,
+      value: weekdays[i],
+      disabled: i >= 5 ? true : false,
+    });
+  }
+  return arrayWeekDays;
+};