Merge pull request #28065 from DavidNorena/fixreact-native-calendars

react-native-calendars fix wrong type and missing properties in the 3 components, add localeconfig

types/react-native-calendars/index.d.ts

@@ -1,170 +1,92 @@
 // Type definitions for react-native-calendars 1.20
 // Project: https://github.com/wix/react-native-calendars#readme
 // Definitions by: Tyler Zhang <https://github.com/Tyler-Zhang>
+//                 David Noreña <https://github.com/DavidNorena>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
 import * as React from 'react';
-import { ViewProps, StyleProp } from 'react-native';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+export import LocaleConfig = require('xdate');
 
 export interface DateObject {
-    year: number;
-    month: number;
     day: number;
-    timestamp: number;
     dateString: string;
+    month: number;
+    timestamp: number;
+    year: number;
 }
 
-export interface CalendarTheme {
-    backgroundColor?: string;
-    calendarBackground?: string;
-    textSectionTitleColor?: string;
-    selectedDayBackgroundColor?: string;
-    selectedDayTextColor?: string;
-    todayTextColor?: string;
-    dayTextColor?: string;
-    textDisabledColor?: string;
-    dotColor?: string;
-    selectedDotColor?: string;
-    arrowColor?: string;
-    monthTextColor?: string;
-    textDayFontFamily?: string;
-    textMonthFontFamily?: string;
-    textDayHeaderFontFamily?: string;
-    textMonthFontWeight?: string;
-    textDayFontSize?: number;
-    textMonthFontSize?: number;
-    textDayHeaderFontSize?: number;
-}
-
-export interface DayComponentProps {
-    state: '' | 'selected' | 'disabled' | 'today';
-    theme: CalendarTheme;
-    onPress: () => any;
-    onLongPress: () => any;
-    date: DateObject;
-    marking: false | Marking[];
-}
-
-export interface CalendarBaseProps {
-    /**
-     * Styles for the view
-     */
-    style?: StyleProp<ViewProps>;
-
-    /**
-     *  Specify theme properties to override specific styles for calendar parts. Default = {}
-     */
-    theme?: CalendarTheme;
-
-    /**
-     *  Initially visible month. Default = Date()
-     */
-    current?: Date | string;
-
-    /**
-     *  Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
-     */
-    minDate?: Date | string;
-
-    /**
-     *  Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
-     */
-    maxDate?: Date | string;
-
-    /**
-     *  Handler which gets executed on day press. Default = undefined
-     */
-    onDayPress?: (day: number) => void;
-
-    /**
-     *  Handler which gets executed on day long press. Default = undefined
-     */
-    onDayLongPress?: (day: number) => void;
-
-    /**
-     *  Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting
-     */
-    monthFormat?: string;
-
-    /**
-     *  Handler which gets executed when visible month changes in calendar. Default = undefined
-     */
-    onMonthChange?: (month: number) => void;
-
-    /**
-     *  Hide month navigation arrows. Default = false
-     */
-    hideArrows?: boolean;
-
-    /**
-     *  Replace default arrows with custom ones (direction can be 'left' or 'right')
-     */
-    renderArrow?: (direction: 'left' | 'right') => React.ReactNode;
-
-    /**
-     *  Do not show days of other months in month page. Default = false
-     */
-    hideExtraDays?: boolean;
-
-    /**
-     *  If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out
-     *  day from another month that is visible in calendar page. Default = false
-     */
-    disableMonthChange?: boolean;
-
-    /**
-     *  If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
-     */
-    firstDay?: number;
-
-    /**
-     *  Hide day names. Default = false
-     */
-    hideDayNames?: boolean;
-
-    /**
-     *  Show week numbers to the left. Default = false
-     */
-    showWeekNumbers?: boolean;
-
-    /**
-     *  Handler which gets executed when press arrow icon left. It receive a callback can go back month
-     */
-    onPressArrowLeft?: (month: number) => void;
-
-    /**
-     *  Handler which gets executed when press arrow icon left. It receive a callback can go next month
-     */
-    onPressArrowRight?: (month: number) => void;
-
-    /**
-     * Custom day renderer
-     */
-    dayComponent?: React.Component<DayComponentProps> | React.SFC<DayComponentProps>;
-}
-
-export interface DotForMultiDot {
+export interface CalendarDot {
     key: string;
     color: string;
     selectedDotColor?: string;
 }
 
-export interface MultiDotMarking {
-    dots: DotForMultiDot[];
-    selected?: boolean;
-    selectedColor?: string;
-    disabled?: boolean;
+export interface CalendarTheme {
+    arrowColor?: string;
+    backgroundColor?: string;
+    calendarBackground?: string;
+    dayTextColor?: string;
+    dotColor?: string;
+    monthTextColor?: string;
+    selectedDayBackgroundColor?: string;
+    selectedDayTextColor?: string;
+    selectedDotColor?: string;
+    textDayFontFamily?: string;
+    textDayFontSize?: number;
+    textDayHeaderFontFamily?: string;
+    textDayHeaderFontSize?: number;
+    textDisabledColor?: string;
+    textMonthFontFamily?: string;
+    textMonthFontWeight?: string;
+    textMonthFontSize?: number;
+    textSectionTitleColor?: string;
+    todayTextColor?: string;
+}
+
+export type DateCallbackHandler = (date: DateObject) => void;
+
+export type TCalendarDate = Date | DateObject | number | string | XDate;
+
+export interface MarkedDateCustomStyles {
+    container: StyleProp<ViewStyle>;
+    text: StyleProp<TextStyle>;
+}
+
+export interface CalendarDot {
+    key: string;
+    color: string;
+    selectedDotColor?: string;
+}
+
+export interface CustomMarking {
+    customStyles: MarkedDateCustomStyles;
 }
 
 export interface DotMarking {
-    selected?: boolean;
-    marked?: boolean;
-    selectedColor?: string;
-    dotColor?: string;
     activeOpacity?: number;
     disabled?: boolean;
     disableTouchEvent?: boolean;
+    dotColor?: string;
+    marked?: boolean;
+    selected?: boolean;
+    selectedColor?: string;
+}
+
+export interface MultiDotMarking {
+    disabled?: boolean;
+    dots: CalendarDot[];
+    selected?: boolean;
+    selectedColor?: string;
+}
+
+export interface MultiPeriodMarking {
+    periods: Array<{
+        startingDay?: boolean;
+        endingDay?: boolean;
+        color?: string;
+    }>;
 }
 
 export interface PeriodMarking {
@@ -176,29 +98,15 @@ export interface PeriodMarking {
     disabled?: boolean;
 }
 
-export interface MultiPeriodMarking {
-    periods: Array<{
-        startingDay?: boolean;
-        endingDay?: boolean;
-        color?: string;
-    }>;
-}
-
-export interface CustomMarking {
-    customStyles: any;
-}
-
 export type Marking =
-    MultiDotMarking |
-    DotMarking |
-    PeriodMarking |
-    MultiPeriodMarking |
-    CustomMarking;
+    CustomMarking | DotMarking |
+    MultiDotMarking | MultiPeriodMarking |
+    PeriodMarking;
 
-export interface MultiDotMarkingProps {
-    markingType: 'multi-dot';
+export interface CustomMarkingProps {
+    markingType: 'custom';
     markedDates: {
-        [date: string]: MultiDotMarking;
+        [date: string]: CustomMarking;
     };
 }
 
@@ -209,17 +117,10 @@ export interface DotMarkingProps {
     };
 }
 
-export interface PeriodMarkingProps {
-    markingType: 'period';
+export interface MultiDotMarkingProps {
+    markingType: 'multi-dot';
     markedDates: {
-        [date: string]: PeriodMarking;
-    };
-}
-
-export interface CustomMarkingProps {
-    markingType: 'custom';
-    markedDates: {
-        [date: string]: CustomMarking;
+        [date: string]: MultiDotMarking;
     };
 }
 
@@ -234,6 +135,13 @@ export interface MultiPeriodMarkingProps {
     };
 }
 
+export interface PeriodMarkingProps {
+    markingType: 'period';
+    markedDates: {
+        [date: string]: PeriodMarking;
+    };
+}
+
 export type CalendarMarkingProps =
     MultiDotMarkingProps |
     DotMarkingProps |
@@ -242,61 +150,217 @@ export type CalendarMarkingProps =
     CustomMarkingProps |
     {};
 
-export class Calendar extends React.Component<CalendarMarkingProps & CalendarBaseProps> {}
+export interface DayComponentProps {
+    date: DateObject;
+    marking: false | Marking[];
+    onPress: () => any;
+    onLongPress: () => any;
+    state: '' | 'selected' | 'disabled' | 'today';
+    theme: CalendarTheme;
+}
+
+export interface CalendarBaseProps {
+    /**
+     *  Initially visible month. Default = Date()
+     */
+    current?: TCalendarDate;
+
+    /**
+     *  Provide custom day rendering component.
+     */
+    dayComponent?: React.Component<DayComponentProps> | React.SFC<DayComponentProps>;
+
+    /**
+     *  Disable days by default. Default = false
+     */
+    disabledByDefault?: boolean;
+
+    /**
+     *  If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out
+     *  day from another month that is visible in calendar page. Default = false
+     */
+    disableMonthChange?: boolean;
+
+    /**
+     *  Display loading indicator. Default = false
+     */
+    displayLoadingIndicator?: boolean;
+
+    /**
+     *  If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
+     */
+    firstDay?: number;
+
+    /**
+     *  Hide month navigation arrows. Default = false
+     */
+    hideArrows?: boolean;
+
+    /**
+     *  Hide day names. Default = false
+     */
+    hideDayNames?: boolean;
+
+    /**
+     *  Do not show days of other months in month page. Default = false
+     */
+    hideExtraDays?: boolean;
+
+    /**
+     *  Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
+     */
+    maxDate?: TCalendarDate;
+
+    /**
+     *  Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
+     */
+    minDate?: TCalendarDate;
+
+    /**
+     *  Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting
+     */
+    monthFormat?: string;
+
+    /**
+     *  Handler which gets executed on day press. Default = undefined
+     */
+    onDayPress?: DateCallbackHandler;
+
+    /**
+     *  Handler which gets executed on day long press. Default = undefined
+     */
+    onDayLongPress?: DateCallbackHandler;
+
+    /**
+     *  Handler which gets executed when press arrow icon left. It receive a callback can go back month
+     */
+    onPressArrowLeft?: (substractMonth: () => void) => void;
+
+    /**
+     *  Handler which gets executed when press arrow icon left. It receive a callback can go next month
+     */
+    onPressArrowRight?: (addMonth: () => void) => void;
+
+    /**
+     *  Handler which gets executed when visible month changes in calendar. Default = undefined
+     */
+    onMonthChange?: DateCallbackHandler;
 
-export interface CalendarListBaseProps extends CalendarBaseProps {
     /**
      *  Callback which gets executed when visible months change in scroll view. Default = undefined
      */
-    onVisibleMonthsChange?: (months: number) => void;
+    onVisibleMonthsChange?: (months: DateObject[]) => void;
 
     /**
-     *  Max amount of months allowed to scroll to the past. Default = 50
+     *  Replace default arrows with custom ones (direction can be 'left' or 'right')
      */
-    pastScrollRange?: number;
+    renderArrow?: (direction: 'left' | 'right') => React.ReactNode;
+
+    /**
+     *  Show week numbers to the left. Default = false
+     */
+    showWeekNumbers?: boolean;
+
+    /**
+     *  Calendar container style.
+     */
+    style?: StyleProp<ViewStyle>;
+
+    /**
+     *  Specify theme properties to override specific styles for calendar parts. Default = {}
+     */
+    theme?: CalendarTheme;
+}
+
+export class Calendar extends React.Component<CalendarMarkingProps & CalendarBaseProps> { }
+
+export interface CalendarListBaseProps extends CalendarBaseProps {
+    /**
+     *  Set custom calendar heigth.
+     */
+    calendarHeight?: number;
+
+    /**
+     *  Set custom calendar width.
+     */
+    calendarWidth?: number;
 
     /**
      *  Max amount of months allowed to scroll to the future. Default = 50
      */
     futureScrollRange?: number;
 
+    /**
+     *  Enable horizontal scrolling, default = false
+     */
+    horizontal?: boolean;
+
+    /**
+     *  Enable paging on horizontal, default = false
+     */
+    pagingEnabled?: boolean;
+
+    /**
+     *  Max amount of months allowed to scroll to the past. Default = 50
+     */
+    pastScrollRange?: number;
+
     /**
      *  Enable or disable scrolling of calendar list
      */
     scrollEnabled?: boolean;
 
+    /**
+     *  When true, the calendar list scrolls to top when the status bar is tapped. Default = true
+     */
+    scrollsToTop?: boolean;
+
     /**
      *  Enable or disable vertical scroll indicator. Default = false
      */
     showScrollIndicator?: boolean;
-
-    /**
-     * Enable horizontal scrolling, default = false
-     */
-    horizontal?: boolean;
-
-    /**
-     * Enable paging on horizontal, default = false
-     */
-    pagingEnabled?: boolean;
-
-    /**
-     * Set custom calendarWidth.
-     */
-    calendarWidth?: boolean;
 }
 
-export class CalendarList extends React.Component<CalendarListBaseProps & CalendarMarkingProps> {}
+export class CalendarList extends React.Component<CalendarListBaseProps> { }
 
-export interface AgendaProps<T> {
+export interface AgendaThemeStyle extends CalendarTheme {
+    agendaDayNumColor?: string;
+    agendaDayTextColor?: string;
+    agendaKnobColor?: string;
+    agendaTodayColor?: string;
+}
+
+export interface AgendaItemsMap<TItem> {
+    [date: string]: TItem[];
+}
+
+export interface AgendaProps<TItem> {
     /**
-     * the list of items that have to be displayed in agenda. If you want to render item as empty date
-     * the value of date key kas to be an empty array []. If there exists no value for date key it is
-     * considered that the date in question is not yet loaded
+     *  Display loading indicator. Default = false
      */
-    items: {
-        [key: string]: T[];
-    };
+    displayLoadingIndicator?: boolean;
+
+    /**
+     *  If firstDay = 1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
+     */
+    firstDay?: number;
+
+    /**
+     *  Max amount of months allowed to scroll to the future. Default = 50
+     */
+    futureScrollRange?: number;
+
+    /**
+     *  Hide knob button. Default = false
+     */
+    hideKnob?: boolean;
+
+    /**
+     *  The list of items that have to be displayed in agenda. If you want to render item as empty date
+     *  the value of date key kas to be an empty array []. If there exists no value for date key it is
+     *  considered that the date in question is not yet loaded
+     */
+    items?: AgendaItemsMap<TItem>;
 
     /**
      * callback that gets called when items for a certain month should be loaded (month became visible)
@@ -304,115 +368,100 @@ export interface AgendaProps<T> {
     loadItemsForMonth?: (date: DateObject) => void;
 
     /**
-     * callback that fires when the calendar is opened or closed
+     * Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
      */
-    onCalendarToggled?: (calendarOpened: boolean) => void;
-
-    /**
-     * callback that gets called on day press
-     */
-    onDayPress?: (day: number) => void;
-
-    /**
-     * callback that gets called when day changes while scrolling agenda list
-     */
-    onDayChange?: (day: number) => void;
-
-    /**
-     * initially selected day
-     */
-    selected?: Date | string;
+    maxDate?: TCalendarDate;
 
     /**
      * Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
      */
-    minDate?: Date | string;
+    minDate?: TCalendarDate;
 
     /**
-     * Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
+     *  Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting
      */
-    maxDate?: Date | string;
+    monthFormat?: string;
 
     /**
-     * Max amount of months allowed to scroll to the past. Default = 50
+     *  Handler which gets executed on day press. Default = undefined
+     */
+    onDayPress?: DateCallbackHandler;
+
+    /**
+     *  Handler which gets executed when the calendar is opened or closed. Default = undefined
+     */
+    onCalendarToggled?: (calendarOpened: boolean) => void;
+
+    /**
+     *  Handler that gets called when day changes while scrolling agenda list. Default = undefined
+     */
+    onDayChange?: DateCallbackHandler;
+
+    /**
+     *  If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality.
+     *  Make sure to also set the refreshing prop correctly. Default = undefined
+     */
+    onRefresh?: () => void;
+
+    /**
+     *  Max amount of months allowed to scroll to the past. Default = 50
      */
     pastScrollRange?: number;
 
     /**
-     * Max amount of months allowed to scroll to the future. Default = 50
-     */
-    futureScrollRange?: number;
-
-    /**
-     * specify how each item should be rendered in agenda
-     */
-    renderItem: (item: T, firstItemInDay?: T) => React.ReactNode;
-
-    /**
-     * specify how each date should be rendered. day can be undefined if the item is not first in that day.
-     */
-    renderDay?: (day: DateObject | undefined, item: T) => React.ReactNode;
-
-    /**
-     * specify how empty date content with no items should be rendered
-     */
-    renderEmptyDate?: () => React.ReactNode;
-
-    /**
-     * specify how agenda knob should look like
-     */
-    renderKnob?: () => React.ReactNode;
-
-    /**
-     * specify what should be rendered instead of ActivityIndicator
-     */
-    renderEmptyData?: () => React.ReactNode;
-
-    /**
-     * specify your item comparison function for increased performance
-     */
-    rowHasChanged?: (r1: any, r2: any) => boolean;
-
-    /**
-     * Hide knob button. Default = false
-     */
-    hideKnob?: boolean;
-
-    /**
-     * A RefreshControl component, used to provide pull-to-refresh funtionality for the ScrollView
+     *  A RefreshControl component, used to provide pull-to-refresh funtionality for the ScrollView.
      */
     refreshControl?: React.ReactNode;
 
     /**
-     * If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality.
-     * Make sure to also set the refreshing prop correctly.
-     */
-    onRefresh?: () => any;
-
-    /**
-     * Set this true while waiting for new data from a refresh
+     *  Set this true while waiting for new data from a refresh.
      */
     refreshing?: boolean;
 
     /**
-     * Display loading indicator. Default = false
+     *  Specify how each day should be rendered.
+     *  Date can be undefined if the item has not property date.
      */
-    displayLoadingIndicator?: boolean;
+    renderDay?: (date: DateObject | undefined, item: TItem) => React.ReactNode;
 
     /**
-     * agenda theme
+     *  Specify what should be rendered instead of ActivityIndicator
      */
-    theme?: {
-        agendaDayTextColor?: string;
-        agendaDayNumColor?: string;
-        agendaTodayColor?: string;
-        agendaKnobColor?: string;
-    } & CalendarTheme;
+    renderEmptyData?: () => React.ReactNode;
 
     /**
-     * agenda container style
+     *  Specify how empty date content with no items should be rendered.
      */
-    style?: StyleProp<ViewProps>;
+    renderEmptyDate: () => React.ReactNode;
+
+    /**
+     *  Specify how each item should be rendered in agenda.
+     */
+    renderItem: (item: TItem, firstDayInDay: boolean) => React.ReactNode;
+
+    /**
+     *  Specify how agenda knob should look like.
+     */
+    renderKnob?: () => React.ReactNode;
+
+    /**
+     * specify your item comparison function for increased performance
+     */
+    rowHasChanged: (r1: TItem, r2: TItem) => boolean;
+
+    /**
+     *  Initially visible month. Default = Date()
+     */
+    selected?: TCalendarDate;
+
+    /**
+     *  Agenda container style.
+     */
+    style?: StyleProp<ViewStyle>;
+
+    /**
+     *  Specify theme properties to override specific styles for agenda parts. Default = {}
+     */
+    theme?: AgendaThemeStyle;
 }
-
-export class Agenda<T> extends React.Component<AgendaProps<T> & CalendarMarkingProps> {}
+export class Agenda<TItem> extends React.Component<AgendaProps<TItem> & CalendarMarkingProps> { }

types/react-native-calendars/react-native-calendars-tests.tsx

@@ -10,23 +10,23 @@ import { Calendar, CalendarList, Agenda } from "react-native-calendars";
     // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
     maxDate={"2012-05-30"}
     // Handler which gets executed on day press. Default = undefined
-    onDayPress={day => {
-        console.log("selected day", day);
+    onDayPress={date => {
+        console.log("selected day", date.day);
     }}
     // Handler which gets executed on day long press. Default = undefined
-    onDayLongPress={day => {
-        console.log("selected day", day);
+    onDayLongPress={date => {
+        console.log("selected day", date.day);
     }}
     // Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting
     monthFormat={"yyyy MM"}
     // Handler which gets executed when visible month changes in calendar. Default = undefined
-    onMonthChange={month => {
-        console.log("month changed", month);
+    onMonthChange={date => {
+        console.log("month changed", date.month);
     }}
     // Hide month navigation arrows. Default = false
     hideArrows={true}
     // Replace default arrows with custom ones (direction can be 'left' or 'right')
-    renderArrow={direction => <div />}
+    renderArrow={direction => <View />}
     // Do not show days of other months in month page. Default = false
     hideExtraDays={true}
     // If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out
@@ -42,6 +42,7 @@ import { Calendar, CalendarList, Agenda } from "react-native-calendars";
     onPressArrowLeft={substractMonth => console.log(substractMonth)}
     // Handler which gets executed when press arrow icon left. It receive a callback can go next month
     onPressArrowRight={addMonth => console.log(addMonth)}
+    disabledByDefault={true}
 />;
 
 <Calendar
@@ -52,23 +53,23 @@ import { Calendar, CalendarList, Agenda } from "react-native-calendars";
     // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
     maxDate={"2012-05-30"}
     // Handler which gets executed on day press. Default = undefined
-    onDayPress={day => {
-        console.log("selected day", day);
+    onDayPress={date => {
+        console.log("selected day", date.day);
     }}
     // Handler which gets executed on day long press. Default = undefined
-    onDayLongPress={day => {
-        console.log("selected day", day);
+    onDayLongPress={date => {
+        console.log("selected day", date.day);
     }}
     // Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting
     monthFormat={"yyyy MM"}
     // Handler which gets executed when visible month changes in calendar. Default = undefined
-    onMonthChange={month => {
-        console.log("month changed", month);
+    onMonthChange={date => {
+        console.log("month changed", date.month);
     }}
     // Hide month navigation arrows. Default = false
     hideArrows={true}
     // Replace default arrows with custom ones (direction can be 'left' or 'right')
-    renderArrow={direction => <div />}
+    renderArrow={direction => <View />}
     // Do not show days of other months in month page. Default = false
     hideExtraDays={true}
     // If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out
@@ -267,7 +268,7 @@ const workout = { key: "workout", color: "green" };
     // Hide month navigation arrows. Default = false
     hideArrows={true}
     // Replace default arrows with custom ones (direction can be 'left' or 'right')
-    renderArrow={direction => <div />}
+    renderArrow={direction => <View />}
     // Do not show days of other months in month page. Default = false
     hideExtraDays={true}
     // If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out
@@ -283,6 +284,29 @@ const workout = { key: "workout", color: "green" };
     onPressArrowLeft={substractMonth => console.log(substractMonth)}
     // Handler which gets executed when press arrow icon left. It receive a callback can go next month
     onPressArrowRight={addMonth => console.log(addMonth)}
+    // Disable days by default. Default = false
+    disabledByDefault={true}
+    // Display loading indicator. Default = false
+    displayLoadingIndicator={true}
+    // When true, the calendar list scrolls to top when the status bar is tapped. Default = true
+    scrollsToTop={true}
+    // Enable paging on horizontal, default = false
+    pagingEnabled={true}
+    // Provide custom day rendering component.
+    dayComponent={({ date, state }) => {
+        return (
+            <View style={{ flex: 1 }}>
+                <Text
+                    style={{
+                        textAlign: "center",
+                        color: state === "disabled" ? "gray" : "black"
+                    }}
+                >
+                    {date.day}
+                </Text>
+            </View>
+        );
+    }}
 />;
 
 <Agenda
@@ -326,7 +350,7 @@ const workout = { key: "workout", color: "green" };
     futureScrollRange={50}
     // specify how each item should be rendered in agenda
     renderItem={(item, firstItemInDay) => {
-        return <View />;
+        return firstItemInDay ? <View /> : <View />;
     }}
     // specify how each date should be rendered. day can be undefined if the item is not first in that day.
     renderDay={(day, item) => {
@@ -371,4 +395,10 @@ const workout = { key: "workout", color: "green" };
     }}
     // agenda container style
     style={{}}
+    // Display loading indicator. Default = false
+    displayLoadingIndicator={true}
+    // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
+    firstDay={1}
+    // Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting
+    monthFormat={"yyyy MM"}
 />;

types/react-native-calendars/tslint.json

@@ -1 +1,6 @@
-{ "extends": "dtslint/dt.json" }
+{
+    "extends": "dtslint/dt.json",
+    "rules": {
+        "file-name-casing": [true, "kebab-case"]
+    }
+}