diff --git a/docsRNC/docs/Components/AgendaList.md b/docsRNC/docs/Components/AgendaList.md index eff0ba5a46..0c4a9a85ea 100644 --- a/docsRNC/docs/Components/AgendaList.md +++ b/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 Theme ### dayFormat -Day format in section title. Formatting values: http://arshaw.com/xdate/#Formatting +Day format in section title. Formatting values: string ### dayFormatter -A function to custom format the section header's title +A function to custom format the section header's title (arg0: string) => string -### useMoment - -Whether to use moment.js for date string formatting -boolean - ### markToday -Whether to mark today's title with the 'Today, ...' string +Whether to mark today's title with the 'Today, ...' string boolean ### 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 boolean ### 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 boolean ### viewOffset -Offset scroll to the section +Offset scroll to the section number ### sectionStyle -The style passed to the section view +The style passed to the section view ViewStyle diff --git a/docsRNC/docs/Components/Calendar.md b/docsRNC/docs/Components/Calendar.md index 84e683331e..5698e1de46 100644 --- a/docsRNC/docs/Components/Calendar.md +++ b/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 Theme ### style -Specify style for calendar container element +Specify style for calendar container element ViewStyle ### headerStyle -Specify style for calendar header +Specify style for calendar header ViewStyle ### customHeader -Allow rendering a totally custom header +Allow rendering a totally custom header any ### initialDate -Initially visible month +Initially visible month string ### 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 string ### 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 string ### 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 number ### markedDates -Collection of dates that have to be marked +Collection of dates that have to be marked MarkedDatesType ### displayLoadingIndicator -Whether to display loading indicator +Whether to display loading indicator boolean ### showWeekNumbers -Whether to show weeks numbers +Whether to show weeks numbers boolean ### hideExtraDays -Whether to hide days of other months in the month page +Whether to hide days of other months in the month page boolean ### 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) boolean ### 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) boolean ### enableSwipeMonths -Whether to enable the option to swipe between months +Whether to enable the option to swipe between months boolean ### disabledByDefault -Whether to disable days by default +Whether to disable days by default boolean ### allowSelectionOutOfRange -Whether to allow selection of dates before minDate or after maxDate +Whether to allow selection of dates before minDate or after maxDate boolean ### onDayPress -Handler which gets executed on day press +Handler which gets executed on day press (date: DateData) => void ### onDayLongPress -Handler which gets executed on day long press +Handler which gets executed on day long press (date: DateData) => void ### onMonthChange -Handler which gets executed when month changes in calendar +Handler which gets executed when month changes in calendar (date: DateData) => void ### onVisibleMonthsChange -Handler which gets executed when visible month changes in calendar +Handler which gets executed when visible month changes in calendar (months: DateData[]) => void ### monthFormat -Month format for the header's title. Formatting values: http://arshaw.com/xdate/#Formatting +Month format for the header's title. Formatting values: string ### hideDayNames -Whether to hide the days names +Whether to hide the days names boolean ### hideArrows -Whether to hide the arrows +Whether to hide the arrows boolean ### 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 boolean ### disableArrowRight -Whether to disable the right arrow +Whether to disable the right arrow boolean ### renderArrow -Replace default arrows with custom ones (direction: 'left' | 'right') +Replace default arrows with custom ones (direction: 'left' | 'right') (direction: Direction) => ReactNode ### 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 (method: () => void, month?: string) => void ### 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 (method: () => void, month?: string) => void ### disabledDaysIndexes -Whether to apply custom disable color to selected day names indexes +Whether to apply custom disable color to selected day names indexes number[] ### renderHeader -Replace default title with custom one +Replace default title with custom one (date?: string) => ReactNode ### customHeaderTitle -Replace default title with custom element +Replace default title with custom element JSX.Element ### dayComponent -Replace default day with custom day rendering component +Replace default day with custom day rendering component JSX.Element ### 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') boolean ### 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') boolean
@@ -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 `` 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 `` 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 + 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 + ```javascript theme={{ diff --git a/docsRNC/docs/Components/CalendarProvider.md b/docsRNC/docs/Components/CalendarProvider.md index dab230c6cf..4f7784b960 100644 --- a/docsRNC/docs/Components/CalendarProvider.md +++ b/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 Theme ### style -Specify style for calendar container element +Specify style for calendar container element ViewStyle ### date -Initial date in 'yyyy-MM-dd' format +Initial date in 'YYYY-MM-DD' format string ### onDateChanged -Handler which gets executed when the date changes +Handler which gets executed when the date changes (date: string, updateSource: UpdateSource) => void ### onMonthChange -Handler which gets executed when the month changes +Handler which gets executed when the month changes (date: DateData, updateSource: UpdateSource) => void ### showTodayButton -Whether to show the today button +Whether to show the today button boolean ### todayButtonStyle -Today button's style +Today button's style ViewStyle ### todayBottomMargin -Today button's top position +Today button's top position number ### disabledOpacity -The opacity for the disabled today button (0-1) +The opacity for the disabled today button (0-1) number diff --git a/e2e/agenda.spec.js b/e2e/agenda.spec.js index b5bcc73f65..46bcd53115 100644 --- a/e2e/agenda.spec.js +++ b/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 () => { diff --git a/e2e/calendars.spec.js b/e2e/calendars.spec.js index df1f7917e9..77da499c70 100644 --- a/e2e/calendars.spec.js +++ b/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; diff --git a/e2e/expandableCalendar.spec.js b/e2e/expandableCalendar.spec.js index 4fade6da0b..743756f094 100644 --- a/e2e/expandableCalendar.spec.js +++ b/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 () => { diff --git a/e2e/horizontalList.spec.js b/e2e/horizontalList.spec.js index 9c977961a2..a277478fd8 100644 --- a/e2e/horizontalList.spec.js +++ b/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`; diff --git a/example/src/app.tsx b/example/src/app.tsx index a819597ae9..7e04a99dba 100644 --- a/example/src/app.tsx +++ b/example/src/app.tsx @@ -1,6 +1,5 @@ -import './wdyr'; // <--- must be first import -import React from 'react'; import {AppRegistry} from 'react-native'; +import './wdyr'; // <--- must be first import //@ts-expect-error import {LocaleConfig} from 'react-native-calendars'; import {name as appName} from '../app.json'; @@ -8,8 +7,8 @@ import MenuScreen from './screens/menuScreen'; /** Locale */ -LocaleConfig.locales['en'] = { - formatAccessibilityLabel: "dddd d 'of' MMMM 'of' yyyy", +LocaleConfig.locales.en = { + formatAccessibilityLabel: 'dddd D of MMMM of YYYY', monthNames: [ 'January', 'February', @@ -29,15 +28,28 @@ LocaleConfig.locales['en'] = { dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'] // numbers: ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'] // <--- number localization example }; -LocaleConfig.locales['fr'] = { - monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'], - monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin','Juil.','Août','Sept.','Oct.','Nov.','Déc.'], - dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'], - dayNamesShort: ['Dim.','Lun.','Mar.','Mer.','Jeu.','Ven.','Sam.'], - today: 'Aujourd\'hui' +LocaleConfig.locales.fr = { + monthNames: [ + 'Janvier', + 'Février', + 'Mars', + 'Avril', + 'Mai', + 'Juin', + 'Juillet', + 'Août', + 'Septembre', + 'Octobre', + 'Novembre', + 'Décembre' + ], + monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'], + dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'], + dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'], + today: "Aujourd'hui" }; -LocaleConfig.locales['he'] = { - formatAccessibilityLabel: "dddd d 'of' MMMM 'of' yyyy", +LocaleConfig.locales.he = { + formatAccessibilityLabel: 'dddd D of MMMM of YYYY', monthNames: [ 'ינואר', 'פברואר', @@ -59,6 +71,6 @@ LocaleConfig.locales['he'] = { LocaleConfig.defaultLocale = 'en'; export default function App() { - return ; + return ; } AppRegistry.registerComponent(appName, () => App); diff --git a/example/src/mocks/agendaItems.ts b/example/src/mocks/agendaItems.ts index 8c15f63253..95e8844bdd 100644 --- a/example/src/mocks/agendaItems.ts +++ b/example/src/mocks/agendaItems.ts @@ -28,7 +28,10 @@ function getPastDate(numberOfDays: number) { export const agendaItems = [ { title: dates[0], - data: [{hour: '12am', duration: '1h', title: 'First Yoga'}, {hour: '9am', duration: '1h', title: 'Long Yoga', itemCustomHeightType: 'LongEvent'}] + data: [ + {hour: '12am', duration: '1h', title: 'First Yoga'}, + {hour: '9am', duration: '1h', title: 'Long Yoga', itemCustomHeightType: 'LongEvent'} + ] }, { title: dates[1], @@ -64,9 +67,7 @@ export const agendaItems = [ }, { title: dates[6], - data: [ - {hour: '12am', duration: '1h', title: 'Ashtanga Yoga'} - ] + data: [{hour: '12am', duration: '1h', title: 'Ashtanga Yoga'}] }, { title: dates[7], @@ -91,9 +92,7 @@ export const agendaItems = [ }, { title: dates[10], - data: [ - {hour: '12am', duration: '1h', title: 'Last Yoga'} - ] + data: [{hour: '12am', duration: '1h', title: 'Last Yoga'}] }, { title: dates[11], @@ -105,15 +104,11 @@ export const agendaItems = [ }, { title: dates[12], - data: [ - {hour: '12am', duration: '1h', title: 'Last Yoga'} - ] + data: [{hour: '12am', duration: '1h', title: 'Last Yoga'}] }, { title: dates[13], - data: [ - {hour: '12am', duration: '1h', title: 'Last Yoga'} - ] + data: [{hour: '12am', duration: '1h', title: 'Last Yoga'}] } ]; diff --git a/example/src/mocks/timelineEvents.ts b/example/src/mocks/timelineEvents.ts index 84eaa5fa1b..80e0e01ae3 100644 --- a/example/src/mocks/timelineEvents.ts +++ b/example/src/mocks/timelineEvents.ts @@ -2,7 +2,8 @@ import {TimelineEventProps, CalendarUtils} from 'react-native-calendars'; const EVENT_COLOR = '#e6add8'; const today = new Date(); -export const getDate = (offset = 0) => CalendarUtils.getCalendarDateString(new Date().setDate(today.getDate() + offset)); +export const getDate = (offset = 0) => + CalendarUtils.getCalendarDateString(new Date().setDate(today.getDate() + offset)); export const timelineEvents: TimelineEventProps[] = [ { diff --git a/example/src/screens/agendaInfiniteListScreen.tsx b/example/src/screens/agendaInfiniteListScreen.tsx index 8992719bbd..97d66d3844 100644 --- a/example/src/screens/agendaInfiniteListScreen.tsx +++ b/example/src/screens/agendaInfiniteListScreen.tsx @@ -1,10 +1,10 @@ -import React, {useRef, useCallback} from 'react'; +import {useCallback, useRef} from 'react'; import {StyleSheet, View} from 'react-native'; -import {ExpandableCalendar, AgendaList, CalendarProvider, WeekCalendar} from 'react-native-calendars'; -import testIDs from '../testIDs'; -import {agendaItems, getMarkedDates} from '../mocks/agendaItems'; +import {AgendaList, CalendarProvider, ExpandableCalendar, WeekCalendar} from 'react-native-calendars'; import AgendaItem from '../mocks/AgendaItem'; -import {getTheme, themeColor, lightThemeColor} from '../mocks/theme'; +import {agendaItems, getMarkedDates} from '../mocks/agendaItems'; +import {getTheme, lightThemeColor, themeColor} from '../mocks/theme'; +import testIDs from '../testIDs'; const leftArrowIcon = require('../img/previous.png'); const rightArrowIcon = require('../img/next.png'); @@ -24,17 +24,17 @@ const AgendaInfiniteListScreen = (props: Props) => { const renderItem = useCallback(({item}: any) => { const isLongItem = item.itemCustomHeightType === 'LongEvent'; - return ; + return ( + + + + ); }, []); return ( - + {weekView ? ( - + ) : ( { sections={ITEMS} renderItem={renderItem} sectionStyle={styles.section} - infiniteListProps={ - { - itemHeight: 80, - titleHeight: 50, - itemHeightByType: { - LongEvent: 120 - } + infiniteListProps={{ + itemHeight: 80, + titleHeight: 50, + itemHeightByType: { + LongEvent: 120 } - } + }} /> ); diff --git a/example/src/screens/agendaScreen.tsx b/example/src/screens/agendaScreen.tsx index 1b9b07d2e9..52f3aaf211 100644 --- a/example/src/screens/agendaScreen.tsx +++ b/example/src/screens/agendaScreen.tsx @@ -1,6 +1,6 @@ import React, {Component} from 'react'; -import {Alert, StyleSheet, Text, View, TouchableOpacity} from 'react-native'; -import {Agenda, DateData, AgendaEntry, AgendaSchedule} from 'react-native-calendars'; +import {Alert, StyleSheet, Text, TouchableOpacity, View} from 'react-native'; +import {Agenda, type AgendaEntry, type AgendaSchedule, type DateData} from 'react-native-calendars'; import testIDs from '../testIDs'; interface State { @@ -37,7 +37,7 @@ export default class AgendaScreen extends Component { // '2017-05-24': {startingDay: true, color: 'gray'}, // '2017-05-25': {color: 'gray'}, // '2017-05-26': {endingDay: true, color: 'gray'}}} - // monthFormat={'yyyy'} + // monthFormat={'YYYY'} // theme={{calendarBackground: 'red', agendaKnobColor: 'green'}} // renderDay={this.renderDay} // hideExtraDays={false} @@ -57,7 +57,7 @@ export default class AgendaScreen extends Component { if (!items[strTime]) { items[strTime] = []; - + const numItems = Math.floor(Math.random() * 3 + 1); for (let j = 0; j < numItems; j++) { items[strTime].push({ @@ -68,7 +68,7 @@ export default class AgendaScreen extends Component { } } } - + const newItems: AgendaSchedule = {}; Object.keys(items).forEach(key => { newItems[key] = items[key]; @@ -79,11 +79,11 @@ export default class AgendaScreen extends Component { }, 1000); }; - renderDay = (day) => { + renderDay = day => { if (day) { return {day.getDay()}; } - return ; + return ; }; renderItem = (reservation: AgendaEntry, isFirst: boolean) => { diff --git a/example/src/screens/calendarListScreen.tsx b/example/src/screens/calendarListScreen.tsx index b9870cd01d..1f4d7a5b30 100644 --- a/example/src/screens/calendarListScreen.tsx +++ b/example/src/screens/calendarListScreen.tsx @@ -1,6 +1,6 @@ -import React, {useState, useMemo, useCallback} from 'react'; -import {StyleSheet, Text, View, TextStyle} from 'react-native'; -import {CalendarList, DateData} from 'react-native-calendars'; +import React, {useCallback, useMemo, useState} from 'react'; +import {StyleSheet, Text, type TextStyle, View} from 'react-native'; +import {CalendarList, type DateData} from 'react-native-calendars'; import testIDs from '../testIDs'; const RANGE = 24; diff --git a/example/src/screens/calendarPlaygroundScreen.tsx b/example/src/screens/calendarPlaygroundScreen.tsx index 4d03cfe853..d6ec25e2cf 100644 --- a/example/src/screens/calendarPlaygroundScreen.tsx +++ b/example/src/screens/calendarPlaygroundScreen.tsx @@ -41,7 +41,10 @@ const NewCalendarScreen = () => { const [disableArrowRight, setDisableArrowRight] = useState(false); const toggleMinAndMax = useCallback(() => setMinAndMax(!minAndMax), [minAndMax]); - const toggleAllowSelectionOutOfRange = useCallback(() => setAllowSelectionOutOfRange(!allowSelectionOutOfRange), [allowSelectionOutOfRange]); + const toggleAllowSelectionOutOfRange = useCallback( + () => setAllowSelectionOutOfRange(!allowSelectionOutOfRange), + [allowSelectionOutOfRange] + ); const toggleEnableSwipeMonths = useCallback(() => setEnableSwipeMonths(!enableSwipeMonths), [enableSwipeMonths]); const toggleDisableMonthChange = useCallback(() => setDisableMonthChange(!disableMonthChange), [disableMonthChange]); const toggleShowWeekNumbers = useCallback(() => setShowWeekNumbers(!showWeekNumbers), [showWeekNumbers]); @@ -50,10 +53,22 @@ const NewCalendarScreen = () => { const toggleHideDayNames = useCallback(() => setHideDayNames(!hideDayNames), [hideDayNames]); const toggleHideArrows = useCallback(() => setHideArrows(!hideArrows), [hideArrows]); const toggleDisabledByDefault = useCallback(() => setDisabledByDefault(!disabledByDefault), [disabledByDefault]); - const toggleDisableAllTouchEventsForDisabledDays = useCallback(() => setDisableAllTouchEventsForDisabledDays(!disableAllTouchEventsForDisabledDays), [disableAllTouchEventsForDisabledDays]); - const toggleDisableAllTouchEventsForInactiveDays = useCallback(() => setDisableAllTouchEventsForInactiveDays(!disableAllTouchEventsForInactiveDays), [disableAllTouchEventsForInactiveDays]); - const toggleDisplayLoadingIndicator = useCallback(() => setDisplayLoadingIndicator(!displayLoadingIndicator), [displayLoadingIndicator]); - const toggleDisabledDaysIndexes = useCallback(() => setDisabledDaysIndexes(!disabledDaysIndexes), [disabledDaysIndexes]); + const toggleDisableAllTouchEventsForDisabledDays = useCallback( + () => setDisableAllTouchEventsForDisabledDays(!disableAllTouchEventsForDisabledDays), + [disableAllTouchEventsForDisabledDays] + ); + const toggleDisableAllTouchEventsForInactiveDays = useCallback( + () => setDisableAllTouchEventsForInactiveDays(!disableAllTouchEventsForInactiveDays), + [disableAllTouchEventsForInactiveDays] + ); + const toggleDisplayLoadingIndicator = useCallback( + () => setDisplayLoadingIndicator(!displayLoadingIndicator), + [displayLoadingIndicator] + ); + const toggleDisabledDaysIndexes = useCallback( + () => setDisabledDaysIndexes(!disabledDaysIndexes), + [disabledDaysIndexes] + ); const toggleDayComponent = useCallback(() => setDayComponent(!dayComponent), [dayComponent]); const toggleCustomHeader = useCallback(() => setCustomHeader(!customHeader), [customHeader]); const toggleCustomHeaderTitle = useCallback(() => setCustomHeaderTitle(!customHeaderTitle), [customHeaderTitle]); @@ -61,17 +76,17 @@ const NewCalendarScreen = () => { const toggleDisableArrowLeft = useCallback(() => setDisableArrowLeft(!disableArrowLeft), [disableArrowLeft]); const toggleDisableArrowRight = useCallback(() => setDisableArrowRight(!disableArrowRight), [disableArrowRight]); - const getDate = (count) => { + const getDate = count => { const date = new Date(INITIAL_DATE); const newDate = date.setDate(date.getDate() + count); return CalendarUtils.getCalendarDateString(newDate); }; - const onDayPress = useCallback((day) => { + const onDayPress = useCallback(day => { setSelected(day.dateString); }, []); - const onDayLongPress = useCallback((day) => { + const onDayLongPress = useCallback(day => { Alert.alert(`Date: ${day.dateString}`); }, []); @@ -139,7 +154,14 @@ const NewCalendarScreen = () => { const periodWithDotsMarks = useMemo(() => { return { - [getDate(-3)]: {marked: true, dotColor: 'white', startingDay: true, endingDay: true, color: '#50cebb', textColor: 'white'}, + [getDate(-3)]: { + marked: true, + dotColor: 'white', + startingDay: true, + endingDay: true, + color: '#50cebb', + textColor: 'white' + }, [INITIAL_DATE]: {marked: true, dotColor: '#50cebb'}, [getDate(1)]: {disabled: true, marked: true, dotColor: '#50cebb'}, [getDate(2)]: {startingDay: true, color: '#50cebb', textColor: 'white'}, @@ -370,7 +392,7 @@ const NewCalendarScreen = () => { const CustomHeader = React.forwardRef((props, ref) => { customHeaderProps.current = props; - + return ( // @ts-expect-error @@ -420,27 +442,23 @@ const NewCalendarScreen = () => { const CustomHeaderTitle = ( console.warn('Tapped!')}> - {selectedValue.getMonth() + 1}-{selectedValue.getFullYear()} + + {selectedValue.getMonth() + 1}-{selectedValue.getFullYear()} + ); /** Custom Arrow */ - const _renderArrow = useCallback((direction) => { + const _renderArrow = useCallback(direction => { const text = direction === 'left' ? '<<' : '>>'; - return ( - {text} - ); + return {text}; }, []); /** Props Switches */ const renderSwitch = (label: string, state: any, toggleSwitch: any) => { return ( - + {label} ); @@ -451,7 +469,8 @@ const NewCalendarScreen = () => { {renderSwitch('Min and Max Dates', minAndMax, toggleMinAndMax)} - {minAndMax && renderSwitch('Allow Selection Out Of Range', allowSelectionOutOfRange, toggleAllowSelectionOutOfRange)} + {minAndMax && + renderSwitch('Allow Selection Out Of Range', allowSelectionOutOfRange, toggleAllowSelectionOutOfRange)} {renderSwitch('Enable Swipe Months', enableSwipeMonths, toggleEnableSwipeMonths)} {renderSwitch('Disable Month Change', disableMonthChange, toggleDisableMonthChange)} @@ -460,8 +479,16 @@ const NewCalendarScreen = () => { {renderSwitch('Hide Extra Days', hideExtraDays, toggleHideExtraDays)} {renderSwitch('Hide Day Names', hideDayNames, toggleHideDayNames)} {renderSwitch('Disabled By Default', disabledByDefault, toggleDisabledByDefault)} - {renderSwitch('Disable All Touch Events For Disabled Days', disableAllTouchEventsForDisabledDays, toggleDisableAllTouchEventsForDisabledDays)} - {renderSwitch('Disable All Touch Events For Inactive Days', disableAllTouchEventsForInactiveDays, toggleDisableAllTouchEventsForInactiveDays)} + {renderSwitch( + 'Disable All Touch Events For Disabled Days', + disableAllTouchEventsForDisabledDays, + toggleDisableAllTouchEventsForDisabledDays + )} + {renderSwitch( + 'Disable All Touch Events For Inactive Days', + disableAllTouchEventsForInactiveDays, + toggleDisableAllTouchEventsForInactiveDays + )} {renderSwitch('Display Loading Indicator', displayLoadingIndicator, toggleDisplayLoadingIndicator)} {renderSwitch('Disabled Days Indexes', disabledDaysIndexes, toggleDisabledDaysIndexes)} {renderSwitch('Hide Arrows', hideArrows, toggleHideArrows)} @@ -492,11 +519,9 @@ const NewCalendarScreen = () => { return ( setType(index)} key={index} style={styles.radioButtonContainer}> - {selectedButtonIndex === index && - - } + {selectedButtonIndex === index && } - {value} + {value} ); }; @@ -563,8 +588,8 @@ const styles = StyleSheet.create({ alignItems: 'center' }, text: { - fontSize: 14, - fontWeight: 'bold' + fontSize: 14, + fontWeight: 'bold' }, buttonText: { color: GREEN, @@ -628,8 +653,8 @@ const styles = StyleSheet.create({ padding: 8 }, customTitleContainer: { - flexDirection: 'row', - alignItems: 'center', + flexDirection: 'row', + alignItems: 'center', padding: 10 }, customTitle: { diff --git a/example/src/screens/calendarScreen.tsx b/example/src/screens/calendarScreen.tsx index 1d9fdf361e..c82e56d1e9 100644 --- a/example/src/screens/calendarScreen.tsx +++ b/example/src/screens/calendarScreen.tsx @@ -15,7 +15,7 @@ const CalendarScreen = () => { return CalendarUtils.getCalendarDateString(newDate); }; - const onDayPress = useCallback((day) => { + const onDayPress = useCallback(day => { setSelected(day.dateString); }, []); @@ -176,7 +176,7 @@ const CalendarScreen = () => { disabledDaysIndexes={[1]} disabledByWeekDays={[1]} disableAllTouchEventsForDisabledDays - onDayPress={(day) => console.warn(`${day.dateString} pressed`)} + onDayPress={day => console.warn(`${day.dateString} pressed`)} /> ); @@ -217,12 +217,12 @@ const CalendarScreen = () => { }} theme={{ textInactiveColor: '#a68a9f', - inactiveDotColor: '#a68a9f' -, textSectionTitleDisabledColor: 'grey', + inactiveDotColor: '#a68a9f', + textSectionTitleDisabledColor: 'grey', textSectionTitleColor: '#319e8e', arrowColor: '#319e8e' }} - onDayPress={(day) => console.warn(`${day.dateString} pressed`)} + onDayPress={day => console.warn(`${day.dateString} pressed`)} /> ); @@ -414,7 +414,9 @@ const CalendarScreen = () => { const renderCalendarWithCustomHeaderTitle = () => { const CustomHeaderTitle = ( console.warn('Tapped!')}> - {selectedValue.getMonth() + 1}-{selectedValue.getFullYear()} + + {selectedValue.getMonth() + 1}-{selectedValue.getFullYear()} + ); diff --git a/example/src/screens/expandableCalendarScreen.tsx b/example/src/screens/expandableCalendarScreen.tsx index 413a047e71..4dae1e46e8 100644 --- a/example/src/screens/expandableCalendarScreen.tsx +++ b/example/src/screens/expandableCalendarScreen.tsx @@ -1,11 +1,11 @@ -import React, {useRef, useCallback} from 'react'; +import React, {useCallback, useRef} from 'react'; import {Animated, Easing, StyleSheet, Text, TouchableOpacity} from 'react-native'; -import {ExpandableCalendar, AgendaList, CalendarProvider, WeekCalendar} from 'react-native-calendars'; -import testIDs from '../testIDs'; -import {agendaItems, getMarkedDates} from '../mocks/agendaItems'; +import {AgendaList, CalendarProvider, ExpandableCalendar, WeekCalendar} from 'react-native-calendars'; +import {type CalendarsDate} from '../../../src/dateutils'; import AgendaItem from '../mocks/AgendaItem'; -import {getTheme, themeColor, lightThemeColor} from '../mocks/theme'; -import type XDate from 'xdate'; +import {agendaItems, getMarkedDates} from '../mocks/agendaItems'; +import {getTheme, lightThemeColor, themeColor} from '../mocks/theme'; +import testIDs from '../testIDs'; const leftArrowIcon = require('../img/previous.png'); const rightArrowIcon = require('../img/next.png'); @@ -31,8 +31,8 @@ const ExpandableCalendarScreen = (props: Props) => { // console.log('ExpandableCalendarScreen onMonthChange: ', dateString); // }, []); - const renderItem = useCallback(({item}: any) => { - return ; + const renderItem = useCallback(({item}) => { + return ; }, []); const calendarRef = useRef<{toggleCalendarPosition: () => boolean}>(null); @@ -49,7 +49,7 @@ const ExpandableCalendarScreen = (props: Props) => { }, []); const renderHeader = useCallback( - (date?: XDate) => { + (date?: CalendarsDate) => { const rotationInDegrees = rotation.current.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '-180deg'] @@ -57,7 +57,12 @@ const ExpandableCalendarScreen = (props: Props) => { return ( {date?.toString('MMMM yyyy')} - + ); }, @@ -83,7 +88,7 @@ const ExpandableCalendarScreen = (props: Props) => { // disableAutoDaySelection={[ExpandableCalendar.navigationTypes.MONTH_SCROLL, ExpandableCalendar.navigationTypes.MONTH_ARROWS]} > {weekView ? ( - + ) : ( { renderItem={renderItem} // scrollToNextEvent sectionStyle={styles.section} - // dayFormat={'yyyy-MM-d'} + // dayFormat={DATE_FORMATS.YYYY_MM_D} /> ); diff --git a/example/src/screens/menuScreen.tsx b/example/src/screens/menuScreen.tsx index b67557ac5f..01332e3267 100644 --- a/example/src/screens/menuScreen.tsx +++ b/example/src/screens/menuScreen.tsx @@ -1,5 +1,16 @@ import React, {useState, useCallback} from 'react'; -import {I18nManager, StyleSheet, Modal, FlatList, SafeAreaView, View, TouchableOpacity, Text, Image, Switch} from 'react-native'; +import { + I18nManager, + StyleSheet, + Modal, + FlatList, + SafeAreaView, + View, + TouchableOpacity, + Text, + Image, + Switch +} from 'react-native'; import testIDs from '../testIDs'; import CalendarScreen from './calendarScreen'; import CalendarPlaygroundScreen from './calendarPlaygroundScreen'; @@ -19,13 +30,23 @@ const screens = [ {testID: testIDs.menu.CALENDARS, title: 'Calendar', screen: CalendarScreen}, {testID: testIDs.menu.CALENDARS, title: 'Calendar Playground', screen: CalendarPlaygroundScreen}, {testID: testIDs.menu.CALENDAR_LIST, title: 'Calendar List', screen: CalendarListScreen}, - {testID: testIDs.menu.HORIZONTAL_LIST, title: 'Horizontal Calendar List', screen: CalendarListScreen, props: {horizontalView: true}}, + { + testID: testIDs.menu.HORIZONTAL_LIST, + title: 'Horizontal Calendar List', + screen: CalendarListScreen, + props: {horizontalView: true} + }, {testID: testIDs.menu.HORIZONTAL_LIST, title: 'NEW Calendar List', screen: NewCalendarListScreen}, {testID: testIDs.menu.AGENDA, title: 'Agenda', screen: AgendaScreen}, {testID: testIDs.menu.AGENDA_INFINITE, title: 'Agenda Infinite List', screen: AgendaInfiniteListScreen}, {testID: testIDs.menu.EXPANDABLE_CALENDAR, title: 'Expandable Calendar', screen: ExpandableCalendarScreen}, {testID: testIDs.menu.TIMELINE_CALENDAR, title: 'Timeline Calendar', screen: TimelineCalendarScreen}, - {testID: testIDs.menu.WEEK_CALENDAR, title: 'Week Calendar', screen: ExpandableCalendarScreen, props: {weekView: true}}, + { + testID: testIDs.menu.WEEK_CALENDAR, + title: 'Week Calendar', + screen: ExpandableCalendarScreen, + props: {weekView: true} + }, {testID: testIDs.menu.PLAYGROUND, title: 'Playground', screen: PlaygroundScreen} ]; @@ -37,7 +58,7 @@ const MenuScreen = () => { const keyExtractor = (item: any) => `${item.title}-${item.testID}`; - const toggleRTL = useCallback((value) => { + const toggleRTL = useCallback(value => { I18nManager.forceRTL(value); setForceRTL(value); }, []); @@ -69,7 +90,9 @@ const MenuScreen = () => { - setShowModal(false)}> + setShowModal(false)}> + + {nextScreen.title} @@ -89,9 +112,13 @@ const MenuScreen = () => { const renderHeader = () => { return ( - + + + React Native Calendars - + + + ); }; diff --git a/example/src/screens/newCalendarListScreen.tsx b/example/src/screens/newCalendarListScreen.tsx index 00c64e089c..40df0ed677 100644 --- a/example/src/screens/newCalendarListScreen.tsx +++ b/example/src/screens/newCalendarListScreen.tsx @@ -8,10 +8,13 @@ const initialDate = '2020-05-16'; const NewCalendarListScreen = () => { const [selected, setSelected] = useState(initialDate); const [isHorizontal, setIsHorizontal] = useState(false); - - const onValueChange = useCallback((value) => { - setIsHorizontal(value); - }, [isHorizontal]); + + const onValueChange = useCallback( + value => { + setIsHorizontal(value); + }, + [isHorizontal] + ); const markedDates = useMemo(() => { return { @@ -22,10 +25,13 @@ const NewCalendarListScreen = () => { }; }, [selected]); - const onDayPress = useCallback(day => { - console.warn('dayPress: ', day); - setSelected(day.dateString); - }, [setSelected]); + const onDayPress = useCallback( + day => { + console.warn('dayPress: ', day); + setSelected(day.dateString); + }, + [setSelected] + ); const calendarProps = useMemo(() => { return { @@ -43,7 +49,7 @@ const NewCalendarListScreen = () => { { return { [selectedDate]: { @@ -25,19 +25,15 @@ export default function PlaygroundScreen() { }; }, [selectedDate]); - const onDayPress = useCallback((day) => { - setSelectedDate(day.dateString); - }, [selectedDate]); + const onDayPress = useCallback( + day => { + setSelectedDate(day.dateString); + }, + [selectedDate] + ); const renderCalendar = () => { - return ( - - ); + return ; }; const renderCalendarList = () => { @@ -58,12 +54,12 @@ export default function PlaygroundScreen() { return ( ); @@ -78,7 +74,7 @@ export default function PlaygroundScreen() { case elements.EXPANDABLE: return renderExpandableCalendar(); default: - return renderCalendar(); + return renderCalendar(); } }; @@ -90,9 +86,7 @@ export default function PlaygroundScreen() {