feat: replace xdate and momentjs

docsRNC/docs/Components/AgendaList.md

@@ -1,4 +1,4 @@
-Agenda list component for the `ExpandableCalendar` component.  
+Agenda list component for the `ExpandableCalendar` component.
 [(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/expandableCalendarScreen.tsx)
 :::info
 This component extends **[FlatList](https://reactnative.dev/docs/flatlist)** props.
@@ -13,45 +13,40 @@ This component extends **[FlatList](https://reactnative.dev/docs/flatlist)** pro
 
 ### theme
 
-Specify theme properties to override specific styles for calendar parts  
+Specify theme properties to override specific styles for calendar parts
 <span style={{color: 'grey'}}>Theme</span>
 
 ### dayFormat
 
-Day format in section title. Formatting values: http://arshaw.com/xdate/#Formatting  
+Day format in section title. Formatting values: <https://day.js.org/docs/en/display/format>
 <span style={{color: 'grey'}}>string</span>
 
 ### dayFormatter
 
-A function to custom format the section header's title  
+A function to custom format the section header's title
 <span style={{color: 'grey'}}>(arg0: string) => string</span>
 
-### useMoment
-
-Whether to use moment.js for date string formatting  
-<span style={{color: 'grey'}}>boolean</span>
-
 ### markToday
 
-Whether to mark today's title with the 'Today, ...' string  
+Whether to mark today's title with the 'Today, ...' string
 <span style={{color: 'grey'}}>boolean</span>
 
 ### avoidDateUpdates
 
-Whether to block the date change in calendar (and calendar context provider) when agenda scrolls  
+Whether to block the date change in calendar (and calendar context provider) when agenda scrolls
 <span style={{color: 'grey'}}>boolean</span>
 
 ### scrollToNextEvent
 
-Whether to enable scrolling the agenda list to the next date with content when pressing a day without content  
+Whether to enable scrolling the agenda list to the next date with content when pressing a day without content
 <span style={{color: 'grey'}}>boolean</span>
 
 ### viewOffset
 
-Offset scroll to the section  
+Offset scroll to the section
 <span style={{color: 'grey'}}>number</span>
 
 ### sectionStyle
 
-The style passed to the section view  
+The style passed to the section view
 <span style={{color: 'grey'}}>ViewStyle</span>

docsRNC/docs/Components/Calendar.md

@@ -1,4 +1,4 @@
-Calendar component  
+Calendar component
 [(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendarScreen.tsx)
 :::info
 This component extends **[CalendarHeader](https://github.com/wix/react-native-calendars/blob/master/src/calendar/header/index.tsx), [BasicDay](https://github.com/wix/react-native-calendars/blob/master/src/calendar/day/basic/index.tsx)** props.
@@ -12,122 +12,122 @@ This component extends **[CalendarHeader](https://github.com/wix/react-native-ca
 
 ### theme
 
-Specify theme properties to override specific styles for calendar parts  
+Specify theme properties to override specific styles for calendar parts
 <span style={{color: 'grey'}}>Theme</span>
 
 ### style
 
-Specify style for calendar container element  
+Specify style for calendar container element
 <span style={{color: 'grey'}}>ViewStyle</span>
 
 ### headerStyle
 
-Specify style for calendar header  
+Specify style for calendar header
 <span style={{color: 'grey'}}>ViewStyle</span>
 
 ### customHeader
 
-Allow rendering a totally custom header  
+Allow rendering a totally custom header
 <span style={{color: 'grey'}}>any</span>
 
 ### initialDate
 
-Initially visible month  
+Initially visible month
 <span style={{color: 'grey'}}>string</span>
 
 ### minDate
 
-Minimum date that can be selected, dates before minDate will be grayed out  
+Minimum date that can be selected, dates before minDate will be grayed out
 <span style={{color: 'grey'}}>string</span>
 
 ### maxDate
 
-Maximum date that can be selected, dates after maxDate will be grayed out  
+Maximum date that can be selected, dates after maxDate will be grayed out
 <span style={{color: 'grey'}}>string</span>
 
 ### firstDay
 
-If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday  
+If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday
 <span style={{color: 'grey'}}>number</span>
 
 ### markedDates
 
-Collection of dates that have to be marked  
+Collection of dates that have to be marked
 <span style={{color: 'grey'}}>MarkedDatesType</span>
 
 ### displayLoadingIndicator
 
-Whether to display loading indicator  
+Whether to display loading indicator
 <span style={{color: 'grey'}}>boolean</span>
 
 ### showWeekNumbers
 
-Whether to show weeks numbers  
+Whether to show weeks numbers
 <span style={{color: 'grey'}}>boolean</span>
 
 ### hideExtraDays
 
-Whether to hide days of other months in the month page  
+Whether to hide days of other months in the month page
 <span style={{color: 'grey'}}>boolean</span>
 
 ### showSixWeeks
 
-Whether to always show six weeks on each month (when hideExtraDays = false)  
+Whether to always show six weeks on each month (when hideExtraDays = false)
 <span style={{color: 'grey'}}>boolean</span>
 
 ### disableMonthChange
 
-Whether to disable changing month when click on days of other months (when hideExtraDays is false)  
+Whether to disable changing month when click on days of other months (when hideExtraDays is false)
 <span style={{color: 'grey'}}>boolean</span>
 
 ### enableSwipeMonths
 
-Whether to enable the option to swipe between months  
+Whether to enable the option to swipe between months
 <span style={{color: 'grey'}}>boolean</span>
 
 ### disabledByDefault
 
-Whether to disable days by default  
+Whether to disable days by default
 <span style={{color: 'grey'}}>boolean</span>
 
 ### allowSelectionOutOfRange
 
-Whether to allow selection of dates before minDate or after maxDate  
+Whether to allow selection of dates before minDate or after maxDate
 <span style={{color: 'grey'}}>boolean</span>
 
 ### onDayPress
 
-Handler which gets executed on day press  
+Handler which gets executed on day press
 <span style={{color: 'grey'}}>(date: DateData) => void</span>
 
 ### onDayLongPress
 
-Handler which gets executed on day long press  
+Handler which gets executed on day long press
 <span style={{color: 'grey'}}>(date: DateData) => void</span>
 
 ### onMonthChange
 
-Handler which gets executed when month changes in calendar  
+Handler which gets executed when month changes in calendar
 <span style={{color: 'grey'}}>(date: DateData) => void</span>
 
 ### onVisibleMonthsChange
 
-Handler which gets executed when visible month changes in calendar  
+Handler which gets executed when visible month changes in calendar
 <span style={{color: 'grey'}}>(months: DateData[]) => void</span>
 
 ### monthFormat
 
-Month format for the header's title. Formatting values: http://arshaw.com/xdate/#Formatting  
+Month format for the header's title. Formatting values: <https://day.js.org/docs/en/display/format>
 <span style={{color: 'grey'}}>string</span>
 
 ### hideDayNames
 
-Whether to hide the days names  
+Whether to hide the days names
 <span style={{color: 'grey'}}>boolean</span>
 
 ### hideArrows
 
-Whether to hide the arrows  
+Whether to hide the arrows
 <span style={{color: 'grey'}}>boolean</span>
 
 ### arrowsHitSlop
@@ -137,57 +137,57 @@ Left & Right arrows. Additional distance outside of the buttons in which a press
 
 ### disableArrowLeft
 
-Whether to disable the left arrow  
+Whether to disable the left arrow
 <span style={{color: 'grey'}}>boolean</span>
 
 ### disableArrowRight
 
-Whether to disable the right arrow  
+Whether to disable the right arrow
 <span style={{color: 'grey'}}>boolean</span>
 
 ### renderArrow
 
-Replace default arrows with custom ones (direction: 'left' | 'right')  
+Replace default arrows with custom ones (direction: 'left' | 'right')
 <span style={{color: 'grey'}}>(direction: Direction) => ReactNode</span>
 
 ### onPressArrowLeft
 
-Handler which gets executed when press left arrow. It receive a callback to go to the previous month  
+Handler which gets executed when press left arrow. It receive a callback to go to the previous month
 <span style={{color: 'grey'}}>(method: () => void, month?: string) => void</span>
 
 ### onPressArrowRight
 
-Handler which gets executed when press right arrow. It receive a callback to go to the next month  
+Handler which gets executed when press right arrow. It receive a callback to go to the next month
 <span style={{color: 'grey'}}>(method: () => void, month?: string) => void</span>
 
 ### disabledDaysIndexes
 
-Whether to apply custom disable color to selected day names indexes  
+Whether to apply custom disable color to selected day names indexes
 <span style={{color: 'grey'}}>number[]</span>
 
 ### renderHeader
 
-Replace default title with custom one  
+Replace default title with custom one
 <span style={{color: 'grey'}}>(date?: string) => ReactNode</span>
 
 ### customHeaderTitle
 
-Replace default title with custom element  
+Replace default title with custom element
 <span style={{color: 'grey'}}>JSX.Element</span>
 
 ### dayComponent
 
-Replace default day with custom day rendering component  
+Replace default day with custom day rendering component
 <span style={{color: 'grey'}}>JSX.Element</span>
 
 ### disableAllTouchEventsForDisabledDays
 
-Whether to disable all touch events for disabled days (can be override with 'disableTouchEvent' in 'markedDates')  
+Whether to disable all touch events for disabled days (can be override with 'disableTouchEvent' in 'markedDates')
 <span style={{color: 'grey'}}>boolean</span>
 
 ### disableAllTouchEventsForInactiveDays
 
-Whether to disable all touch events for inactive days (can be override with 'disableTouchEvent' in 'markedDates')  
+Whether to disable all touch events for inactive days (can be override with 'disableTouchEvent' in 'markedDates')
 <span style={{color: 'grey'}}>boolean</span>
 
 <br/>
@@ -214,8 +214,8 @@ Whether to disable all touch events for inactive days (can be override with 'dis
   onDayLongPress={day => {
     console.log('selected day', day);
   }}
-  // Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting
-  monthFormat={'yyyy MM'}
+  // Month format in calendar title. Formatting values: https://day.js.org/docs/en/display/format
+  monthFormat={'YYYY MM'}
   // Handler which gets executed when visible month changes in calendar. Default = undefined
   onMonthChange={month => {
     console.log('month changed', month);
@@ -462,11 +462,11 @@ The loading indicator next to the month name will be displayed if `<Calendar/>`
 
 If you want to have complete control over the calendar styles you can do it by overriding default `style.ts` files. For example, if you want to override `<CalendarHeader/>` style first you have to find stylesheet id for this file:
 
-https://github.com/wix/react-native-calendars/blob/master/src/calendar/header/style.ts#L60
+<https://github.com/wix/react-native-calendars/blob/master/src/calendar/header/style.ts#L60>
 
 In this case it is `stylesheet.calendar.header`. Next you can add overriding stylesheet to your theme with this id.
 
-https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendars.tsx#L142
+<https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendars.tsx#L142>
 
 ```javascript
 theme={{

docsRNC/docs/Components/CalendarProvider.md

@@ -1,4 +1,4 @@
-Calendar context provider component  
+Calendar context provider component
 [(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/expandableCalendarScreen.tsx)
 :::info
 This component extends **[Context](https://reactjs.org/docs/context.html)** props.
@@ -10,45 +10,45 @@ This component extends **[Context](https://reactjs.org/docs/context.html)** prop
 
 ### theme
 
-Specify theme properties to override specific styles for calendar parts  
+Specify theme properties to override specific styles for calendar parts
 <span style={{color: 'grey'}}>Theme</span>
 
 ### style
 
-Specify style for calendar container element  
+Specify style for calendar container element
 <span style={{color: 'grey'}}>ViewStyle</span>
 
 ### date
 
-Initial date in 'yyyy-MM-dd' format  
+Initial date in 'YYYY-MM-DD' format
 <span style={{color: 'grey'}}>string</span>
 
 ### onDateChanged
 
-Handler which gets executed when the date changes  
+Handler which gets executed when the date changes
 <span style={{color: 'grey'}}>(date: string, updateSource: UpdateSource) => void</span>
 
 ### onMonthChange
 
-Handler which gets executed when the month changes  
+Handler which gets executed when the month changes
 <span style={{color: 'grey'}}>(date: DateData, updateSource: UpdateSource) => void</span>
 
 ### showTodayButton
 
-Whether to show the today button  
+Whether to show the today button
 <span style={{color: 'grey'}}>boolean</span>
 
 ### todayButtonStyle
 
-Today button's style  
+Today button's style
 <span style={{color: 'grey'}}>ViewStyle</span>
 
 ### todayBottomMargin
 
-Today button's top position  
+Today button's top position
 <span style={{color: 'grey'}}>number</span>
 
 ### disabledOpacity
 
-The opacity for the disabled today button (0-1)  
+The opacity for the disabled today button (0-1)
 <span style={{color: 'grey'}}>number</span>

e2e/agenda.spec.js

@@ -1,6 +1,6 @@
 import testIDs from '../example/src/testIDs';
 
-const {SELECT_DATE_SLOT, RESERVATION_DATE} = require('../src/testIDs');
+import { RESERVATION_DATE, SELECT_DATE_SLOT } from '../src/testIDs';
 
 describe('Agenda', () => {
   beforeEach(async () => {

e2e/calendars.spec.js

@@ -1,6 +1,6 @@
 import testIDs from '../example/src/testIDs';
 
-const {HEADER_MONTH_NAME, CHANGE_MONTH_LEFT_ARROW, CHANGE_MONTH_RIGHT_ARROW} = require('../src/testIDs');
+import { CHANGE_MONTH_LEFT_ARROW, CHANGE_MONTH_RIGHT_ARROW, HEADER_MONTH_NAME } from '../src/testIDs';
 
 describe('Calendars', () => {
   const FIRST_CALENDAR = testIDs.calendars.FIRST;

e2e/expandableCalendar.spec.js

@@ -1,6 +1,6 @@
 import testIDs from '../example/src/testIDs';
 
-const {CHANGE_MONTH_RIGHT_ARROW, CHANGE_MONTH_LEFT_ARROW, STATIC_HEADER} = require('../src/testIDs');
+import { CHANGE_MONTH_LEFT_ARROW, CHANGE_MONTH_RIGHT_ARROW, STATIC_HEADER } from '../src/testIDs';
 
 describe('Expandable Calendar', () => {
   beforeEach(async () => {

e2e/horizontalList.spec.js

@@ -1,6 +1,6 @@
 import testIDs from '../example/src/testIDs';
 
-const {HEADER_MONTH_NAME} = require('../src/testIDs');
+import { HEADER_MONTH_NAME } from '../src/testIDs';
 
 describe('Horizontal Calendar List', () => {
   const FIRST_CALENDAR = `${testIDs.horizontalList.CONTAINER}_1526428800000`;