Merge pull request #5 from simpletut/handleMonthsBetter

Handle pagination for `showNumberOfMonths` option

Author: simpletut

.storybook/preview.js

@@ -1,4 +1,4 @@
-import './../styles/main.min.css';
+import './../styles/main.css';
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

README.md

@@ -88,6 +88,7 @@ Please copy and self host the default CSS linked below.
 
 **Type:** Number\
 **Default:** 12\
+**Options** 12 | 4 | 2 | 1
 **Description:** Number of Months to show
 
 ### showCurrentYear

example/src/styles.css

@@ -57,6 +57,8 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-start;
   margin: 0 -10px;
 }
 
@@ -69,6 +71,14 @@
   box-sizing: border-box;
 }
 
+.singleCol .month {
+  width: 100%;
+}
+
+.twoCol .month {
+  width: 50%;
+}
+
 .monthName {
   font-family: arial;
   font-size: 24px;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactjs-availability-calendar",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "React Availability Calendar",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",

src/components/Calendar/Controls/index.tsx

@@ -1,18 +1,18 @@
-import React, { FC } from 'react'
+import React from 'react'
 import { IControls } from './../types'
 
-const Controls: FC<IControls> = ({ prevYear, initCal, nextYear }): JSX.Element => {
+const Controls = ({ prev, initCal, next }: IControls): JSX.Element => {
   return (
     <div className='controls' data-testid='controls'>
-      <button className='btn back' onClick={() => prevYear()} data-testid='back'>
+      <button className='btn back' onClick={() => prev()} data-testid='back'>
         Back
       </button>
 
       <button className='btn now' onClick={() => initCal()} data-testid='now'>
-        Current Year
+        Reset
       </button>
 
-      <button className='btn next' onClick={() => nextYear()} data-testid='next'>
+      <button className='btn next' onClick={() => next()} data-testid='next'>
         Next
       </button>
     </div>

src/components/Calendar/Utils/index.tsx

@@ -7,12 +7,54 @@ import {
   IGetAllBookedDays,
   IGetAllHalfDays,
   IGetDatesInRange,
+  IGetMonthName,
   DaysOfWeekType,
   Days,
   DaysOfWeekOffsetType,
   DayOffset,
 } from './../types'
 
+const dateFormat = 'M-D-YYYY'
+
+export const daysOfTheWeek: DaysOfWeekType = [
+  Days.Monday,
+  Days.Tusday,
+  Days.Wednesday,
+  Days.Thursday,
+  Days.Friday,
+  Days.Saturday,
+  Days.Sunday,
+]
+
+export const daysOfTheWeekOffset: DaysOfWeekOffsetType = [
+  DayOffset.Monday,
+  DayOffset.Tusday,
+  DayOffset.Wednesday,
+  DayOffset.Thursday,
+  DayOffset.Friday,
+  DayOffset.Saturday,
+  DayOffset.Sunday,
+]
+
+export const getMonthName = (month: number): string => {
+  const months: IGetMonthName = {
+    1: 'January',
+    2: 'February',
+    3: 'March',
+    4: 'April',
+    5: 'May',
+    6: 'June',
+    7: 'July',
+    8: 'August',
+    9: 'September',
+    10: 'October',
+    11: 'November',
+    12: 'December',
+  }
+
+  return months[month]
+}
+
 export const formatBookingsData = ({ bookings, year }: IFormatBookingsData): BookingType[] => {
   if (!Array.isArray(bookings) || bookings.length < 1) return []
 
@@ -29,8 +71,8 @@ export const formatBookingsData = ({ bookings, year }: IFormatBookingsData): Boo
     if (!validStartDate && !validEndDate) return null
 
     const nxtBooking: BookingType = {
-      from: dayjs(from).format('MM-DD-YYYY'),
-      to: dayjs(to).format('MM-DD-YYYY'),
+      from: dayjs(from).format(dateFormat),
+      to: dayjs(to).format(dateFormat),
       middayCheckout,
     }
 
@@ -46,8 +88,8 @@ export const getDatesInRange = ({ startDate, endDate }: IGetDatesInRange): block
 
   const dates: blockedDaysType = []
 
-  while (!_startDate.isAfter(dayjs(_endDate))) {
-    dates.push(_startDate.format('YYYY-M-D'))
+  while (!_startDate.isAfter(_endDate)) {
+    dates.push(_startDate.format(dateFormat))
 
     _startDate = _startDate.add(1, 'day')
   }
@@ -95,23 +137,3 @@ export const handleBookings = ({
 
   return { halfDays, bookedDays }
 }
-
-export const daysOfTheWeek: DaysOfWeekType = [
-  Days.Monday,
-  Days.Tusday,
-  Days.Wednesday,
-  Days.Thursday,
-  Days.Friday,
-  Days.Saturday,
-  Days.Sunday,
-]
-
-export const daysOfTheWeekOffset: DaysOfWeekOffsetType = [
-  DayOffset.Monday,
-  DayOffset.Tusday,
-  DayOffset.Wednesday,
-  DayOffset.Thursday,
-  DayOffset.Friday,
-  DayOffset.Saturday,
-  DayOffset.Sunday,
-]

src/components/Calendar/Year/index.tsx

@@ -1,27 +1,30 @@
-import React, { FC } from 'react'
+import React from 'react'
 import dayjs from 'dayjs'
 import isBetween from 'dayjs/plugin/isBetween'
 import { IYear } from './../types'
-import { daysOfTheWeek, daysOfTheWeekOffset } from './../Utils'
+import { daysOfTheWeek, daysOfTheWeekOffset, getMonthName } from './../Utils'
 
 dayjs.extend(isBetween)
 
-const Year: FC<IYear> = ({
-  showNumberOfMonths,
-  bookedDates,
-  lateCheckouts,
-  currentYear = dayjs().year(),
-}): JSX.Element => {
+const Year = ({
+  activeYear,
+  showNumberOfMonths = 12,
+  bookedDates = [],
+  lateCheckouts = [],
+  monthsFrom = 1,
+}: IYear): JSX.Element => {
+  const _year = activeYear || dayjs().year()
+
   return (
     <div className='year' data-testid='year'>
       {new Array(showNumberOfMonths).fill('').map((_, pos) => {
         const arrOffset = 1
-        const month = pos + arrOffset
-        const date = `${currentYear}-${month}`
-        const monthName = dayjs(date).format('MMMM')
+        const month = monthsFrom + pos
+        const date = `${_year}-${month}`
+        const monthName = getMonthName(month)
         const totalDays = dayjs(date).daysInMonth()
-
         const firstDayOfWeek = dayjs(`${date}-01`).day()
+
         const offsetDays =
           firstDayOfWeek !== 0
             ? new Array(firstDayOfWeek - arrOffset).fill('')
@@ -50,10 +53,11 @@ const Year: FC<IYear> = ({
 
               {daysArr.map((_, pos) => {
                 const day = pos + arrOffset
-                const isBooked = Array.isArray(bookedDates) ? bookedDates.includes(`${date}-${day}`) : false
-                const isLateCheckout = Array.isArray(lateCheckouts)
-                  ? lateCheckouts.includes(`${dayjs(`${date}-${day}`).format('MM-DD-YYYY')}`)
-                  : false
+                const _date = `${month}-${day}-${_year}`
+
+                const isBooked = Array.isArray(bookedDates) ? bookedDates.includes(_date) : false
+
+                const isLateCheckout = Array.isArray(lateCheckouts) ? lateCheckouts.includes(_date) : false
 
                 return (
                   <div
@@ -72,10 +76,4 @@ const Year: FC<IYear> = ({
   )
 }
 
-Year.defaultProps = {
-  showNumberOfMonths: 12,
-  bookedDates: [],
-  lateCheckouts: [],
-}
-
 export default Year