Horizontal scroll behavior added

src/Calendar.js

@@ -1,11 +1,11 @@
-import React from 'react'
-import { func, instanceOf, object, objectOf, string } from 'prop-types'
-import { startOfMonth } from 'date-fns'
-import { isSelectable, mergeModifiers } from './utils'
-import useControllableState from './useControllableState'
-import CalendarNavigation from './CalendarNavigation'
-import CalendarWeekHeader from './CalendarWeekHeader'
-import CalendarGrid from './CalendarGrid'
+import React from "react";
+import { func, instanceOf, object, objectOf, string } from "prop-types";
+import { startOfMonth } from "date-fns";
+import { isSelectable, mergeModifiers } from "./utils";
+import useControllableState from "./useControllableState";
+import CalendarNavigation from "./CalendarNavigation";
+import CalendarWeekHeader from "./CalendarWeekHeader";
+import CalendarGrid from "./CalendarGrid";
 
 export default function Calendar({
   locale,
@@ -17,14 +17,19 @@ export default function Calendar({
   onMonthChange,
   onDayHover,
   onDayClick,
-  weekdayFormat
+  weekdayFormat,
+  direction,
 }) {
-  const [month, setMonth] = useControllableState(receivedMonth, onMonthChange, startOfMonth(new Date()))
+  const [month, setMonth] = useControllableState(
+    receivedMonth,
+    onMonthChange,
+    startOfMonth(new Date())
+  );
 
   const modifiers = mergeModifiers(
-    { disabled: date => !isSelectable(date, { minimumDate, maximumDate }) },
+    { disabled: (date) => !isSelectable(date, { minimumDate, maximumDate }) },
     receivedModifiers
-  )
+  );
 
   return (
     <div>
@@ -36,7 +41,7 @@ export default function Calendar({
         onMonthChange={setMonth}
       />
 
-      <CalendarWeekHeader locale={locale} weekdayFormat={weekdayFormat}/>
+      <CalendarWeekHeader locale={locale} weekdayFormat={weekdayFormat} />
 
       <CalendarGrid
         locale={locale}
@@ -46,9 +51,10 @@ export default function Calendar({
         onMonthChange={setMonth}
         onDayHover={onDayHover}
         onDayClick={onDayClick}
+        direction={direction}
       />
     </div>
-  )
+  );
 }
 
 Calendar.propTypes = {
@@ -61,5 +67,6 @@ Calendar.propTypes = {
   onMonthChange: func,
   onDayHover: func,
   onDayClick: func,
-  weekdayFormat: string
-}
+  weekdayFormat: string,
+  direction: string,
+};

src/CalendarGrid.js

@@ -1,20 +1,25 @@
-import React from 'react'
-import { instanceOf, func, number, object, objectOf, string } from 'prop-types'
-import { eachDayOfInterval, isSameMonth, lightFormat, startOfMonth } from 'date-fns'
-import classNames from 'classnames'
-import useGrid from './useGrid'
-import { ORIGIN_BOTTOM, ORIGIN_TOP } from './constants'
-import CalendarDay from './CalendarDay'
+import React from "react";
+import { instanceOf, func, number, object, objectOf, string } from "prop-types";
+import {
+  eachDayOfInterval,
+  isSameMonth,
+  lightFormat,
+  startOfMonth,
+} from "date-fns";
+import classNames from "classnames";
+import useGrid from "./useGrid";
+import { ORIGIN_BOTTOM, ORIGIN_TOP } from "./constants";
+import CalendarDay from "./CalendarDay";
 
 const computeModifiers = (modifiers, date) => {
-  const computedModifiers = {}
+  const computedModifiers = {};
 
-  Object.keys(modifiers).map(key => {
-    computedModifiers[key] = modifiers[key](date)
-  })
+  Object.keys(modifiers).map((key) => {
+    computedModifiers[key] = modifiers[key](date);
+  });
 
-  return computedModifiers
-}
+  return computedModifiers;
+};
 
 export default function CalendarGrid({
   locale,
@@ -24,52 +29,71 @@ export default function CalendarGrid({
   onMonthChange,
   onDayHover,
   onDayClick,
-  transitionDuration
+  transitionDuration,
+  direction,
 }) {
-  const grid = useGrid({ locale, month: startOfMonth(month), onMonthChange, transitionDuration })
-  const { startDate, endDate, cellHeight, containerElementRef, isWide, offset, origin, transition } = grid
+  const grid = useGrid({
+    locale,
+    month: startOfMonth(month),
+    onMonthChange,
+    transitionDuration,
+    direction,
+  });
+  const {
+    startDate,
+    endDate,
+    cellHeight,
+    containerElementRef,
+    isWide,
+    offset,
+    origin,
+    transition,
+  } = grid;
 
   const days = eachDayOfInterval({
     start: startDate,
-    end: endDate
-  }).map(date => {
+    end: endDate,
+  }).map((date) => {
     return (
       <CalendarDay
         date={date}
         height={cellHeight}
-        key={lightFormat(date, 'yyyy-MM-dd')}
+        key={lightFormat(date, "yyyy-MM-dd")}
         locale={locale}
         modifiers={{
           ...computeModifiers(modifiers, date),
           outside: !isSameMonth(date, month),
-          wide: isWide
+          wide: isWide,
         }}
         modifiersClassNames={modifiersClassNames}
         onHover={onDayHover}
         onClick={onDayClick}
       />
-    )
-  })
+    );
+  });
 
   return (
-    <div className='nice-dates-grid' style={{ height: cellHeight * 6 }}>
+    <div className="nice-dates-grid" style={{ height: cellHeight * 6 }}>
       <div
-        className={classNames('nice-dates-grid_container', {
-          '-moving': offset,
-          '-origin-bottom': origin === ORIGIN_BOTTOM,
-          '-origin-top': origin === ORIGIN_TOP,
-          '-transition': transition
+        className={classNames("nice-dates-grid_container", {
+          "-moving": offset,
+          "-origin-bottom": origin === ORIGIN_BOTTOM,
+          "-origin-top": origin === ORIGIN_TOP,
+          "-transition": transition,
         })}
         ref={containerElementRef}
         style={{
-          transform: `translate3d(0, ${offset}px, 0)`,
-          transitionDuration: `${transitionDuration}ms`
+          transform:
+            direction === "ltr"
+              ? `translate3d( ${offset}px,0, 0)`
+              : `translate3d( 0,${offset}px, 0)`,
+          transitionDuration: `${transitionDuration}ms`,
         }}
       >
         {days}
       </div>
     </div>
-  )
+  );
 }
 
 CalendarGrid.propTypes = {
@@ -80,10 +104,11 @@ CalendarGrid.propTypes = {
   onMonthChange: func.isRequired,
   onDayHover: func,
   onDayClick: func,
-  transitionDuration: number.isRequired
-}
+  transitionDuration: number.isRequired,
+  direction: string,
+};
 
 CalendarGrid.defaultProps = {
   modifiers: {},
-  transitionDuration: 500
-}
+  transitionDuration: 500,
+};

src/DatePickerCalendar.js

@@ -1,9 +1,9 @@
-import React from 'react'
-import { instanceOf, func, object, objectOf, string } from 'prop-types'
-import { isSameDay, startOfMonth } from 'date-fns'
-import { isSelectable, mergeModifiers, setTime } from './utils'
-import useControllableState from './useControllableState'
-import Calendar from './Calendar'
+import React from "react";
+import { instanceOf, func, object, objectOf, string } from "prop-types";
+import { isSameDay, startOfMonth } from "date-fns";
+import { isSelectable, mergeModifiers, setTime } from "./utils";
+import useControllableState from "./useControllableState";
+import Calendar from "./Calendar";
 
 export default function DatePickerCalendar({
   locale,
@@ -15,15 +15,25 @@ export default function DatePickerCalendar({
   maximumDate,
   modifiers: receivedModifiers,
   modifiersClassNames,
-  weekdayFormat
+  weekdayFormat,
+  direction,
 }) {
-  const isSelected = date => isSameDay(date, selectedDate) && isSelectable(date, { minimumDate, maximumDate })
-  const modifiers = mergeModifiers({ selected: isSelected, disabled: isSelected }, receivedModifiers)
-  const [month, setMonth] = useControllableState(receivedMonth, onMonthChange, startOfMonth(selectedDate || new Date()))
+  const isSelected = (date) =>
+    isSameDay(date, selectedDate) &&
+    isSelectable(date, { minimumDate, maximumDate });
+  const modifiers = mergeModifiers(
+    { selected: isSelected, disabled: isSelected },
+    receivedModifiers
+  );
+  const [month, setMonth] = useControllableState(
+    receivedMonth,
+    onMonthChange,
+    startOfMonth(selectedDate || new Date())
+  );
 
-  const handleDateChange = date => {
-    onDateChange(selectedDate ? setTime(date, selectedDate) : date)
-  }
+  const handleDateChange = (date) => {
+    onDateChange(selectedDate ? setTime(date, selectedDate) : date);
+  };
 
   return (
     <Calendar
@@ -36,8 +46,9 @@ export default function DatePickerCalendar({
       modifiers={modifiers}
       modifiersClassNames={modifiersClassNames}
       weekdayFormat={weekdayFormat}
+      direction={direction}
     />
-  )
+  );
 }
 
 DatePickerCalendar.propTypes = {
@@ -50,5 +61,6 @@ DatePickerCalendar.propTypes = {
   maximumDate: instanceOf(Date),
   modifiers: objectOf(func),
   modifiersClassNames: objectOf(string),
-  weekdayFormat: string
-}
+  weekdayFormat: string,
+  direction: string,
+};

src/constants.js

@@ -1,4 +1,6 @@
-export const START_DATE = 'startDate'
-export const END_DATE = 'endDate'
-export const ORIGIN_BOTTOM = 'bottom'
-export const ORIGIN_TOP = 'top'
+export const START_DATE = "startDate";
+export const END_DATE = "endDate";
+export const ORIGIN_BOTTOM = "bottom";
+export const ORIGIN_TOP = "top";
+export const ORIGIN_LEFT = "right";
+export const ORIGIN_RIGHT = "left";