Merge pull request #3 from simpletut/supportBookingsDateFormat

add support for 'to' & 'from' dates to be in Date format

Author: simpletut

README.md

@@ -35,8 +35,8 @@ import Calendar from 'reactjs-availability-calendar'
 export default function App() {
   const bookings = [
     {
-      from: '01-08-2022',
-      to: '01-16-2022',
+      from: new Date('01-16-2022'),
+      to: new Date('01-27-2022'),
       middayCheckout: true,
     },
     {
@@ -74,14 +74,14 @@ Please copy and self host the default CSS linked below.
 **Example:**
 ```
 {
-  from: '01-08-2022',
-  to: '01-16-2022',
+  from: new Date('01-16-2022'),
+  to: new Date('01-27-2022'),
   middayCheckout: true,
 }
 ```
 **Type:** Array of Bookings\
 **Default:** []\
-**Description:** Dates should be in US format (MM-DD-YYYY).
+**Description:** Dates to be shown as unavailable on the calendar
 
 
 ### showNumberOfMonths

example/src/index.tsx

@@ -4,8 +4,8 @@ import Calendar from 'reactjs-availability-calendar'
 
 const bookings = [
   {
-    from: '01-08-2022',
-    to: '01-16-2022',
+    from: new Date('01-16-2022'),
+    to: new Date('01-27-2022'),
     middayCheckout: true,
   },
   {

package.json

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

src/components/Calendar/Utils/index.tsx

@@ -29,8 +29,8 @@ export const formatBookingsData = ({ bookings, year }: IFormatBookingsData): Boo
     if (!validStartDate && !validEndDate) return null
 
     const nxtBooking: BookingType = {
-      from,
-      to,
+      from: dayjs(from).format('MM-DD-YYYY'),
+      to: dayjs(to).format('MM-DD-YYYY'),
       middayCheckout,
     }
 
@@ -77,7 +77,7 @@ export const getAllHalfDays = ({ dates }: IGetAllHalfDays): blockedDaysType => {
   const arr: blockedDaysType = []
 
   dates.forEach(({ to, middayCheckout }) => {
-    if (middayCheckout) {
+    if (middayCheckout && typeof to === 'string') {
       arr.push(to)
     }
   })

src/components/Calendar/types.ts

@@ -1,6 +1,6 @@
 export type BookingType = {
-  from: string
-  to: string
+  from: string | Date
+  to: string | Date
   middayCheckout?: boolean
 }
 
@@ -35,8 +35,8 @@ export interface IGetAllHalfDays {
 }
 
 export interface IGetDatesInRange {
-  startDate: string
-  endDate: string
+  startDate: string | Date
+  endDate: string | Date
 }
 
 export interface IControls {

tests/common.test.tsx

@@ -7,8 +7,8 @@ import Calendar from '../src'
 
 const bookings = [
   {
-    from: '01-08-2022',
-    to: '01-16-2022',
+    from: new Date('01-16-2022'),
+    to: new Date('01-27-2022'),
     middayCheckout: true,
   },
   {
@@ -99,9 +99,9 @@ describe('Calendar', () => {
     expect(months).toHaveLength(6)
   })
 
-  it('Should Render 18 Booked Days', () => {
+  it('Should Render 21 Booked Days', () => {
     const { container } = render(<Calendar bookings={bookings} />)
-    expect(container.getElementsByClassName('booked').length).toBe(18)
+    expect(container.getElementsByClassName('booked').length).toBe(21)
   })
 
   it('Should Render 1 Late Checkout Day', () => {