Skip to content

Commit 4f5dde4

Browse files
peacechenpeacechen
committed
Add prop onHeaderSelected (#182).
1 parent c6c7026 commit 4f5dde4

File tree

4 files changed

+40
-20
lines changed

4 files changed

+40
-20
lines changed

‎README.md

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -188,20 +188,21 @@ AppRegistry.registerComponent('Example', () => Example);
188188

189189
### Initial data and onDateSelected handler
190190

191-
| Prop | Description | Type | Default |
192-
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ---------- |
193-
| **`scrollable`** | Dates are scrollable if true. | Bool | **`False`**|
194-
| **`startingDate`** | Date to be used for centering the calendar/showing the week based on that date. It is internally wrapped by `moment` so it accepts both `Date` and `moment Date`. | Any |
195-
| **`selectedDate`** | Date to be used as pre selected Date. It is internally wrapped by `moment` so it accepts both `Date` and `moment Date`. | Any |
196-
| **`onDateSelected`** | Function to be used as a callback when a date is selected. It returns `moment Date` | Function |
197-
| **`onWeekChanged`** | Function to be used as a callback when a week is changed. It returns `moment Date` | Number |
198-
| **`updateWeek`** | Update the week view if other props change. If `false`, the week view won't change when other props change, but will still respond to left/right selectors. | Bool | **`True`** |
199-
| **`useIsoWeekday`** | start week on ISO day of week (default true). If false, starts week on _startingDate_ parameter. | Bool | **`True`** |
200-
| **`minDate`** | minimum date that the calendar may navigate to. A week is allowed if minDate falls within the current week. | Any |
201-
| **`maxDate`** | maximum date that the calendar may navigate to. A week is allowed if maxDate falls within the current week. | Any |
191+
| Prop | Description | Type | Default |
192+
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ---------- |
193+
| **`scrollable`** | Dates are scrollable if true. | Bool | **`False`**|
194+
| **`startingDate`** | Date to be used for centering the calendar/showing the week based on that date. It is internally wrapped by `moment` so it accepts both `Date` and `moment Date`. | Any |
195+
| **`selectedDate`** | Date to be used as pre selected Date. It is internally wrapped by `moment` so it accepts both `Date` and `moment Date`. | Any |
196+
| **`onDateSelected`** | Function to be used as a callback when a date is selected. It returns `moment Date` | Function |
197+
| **`onWeekChanged`** | Function to be used as a callback when a week is changed. It returns `moment Date` | Function |
198+
| **`onHeaderSelected`**| Function to be used as a callback when the header is selected. It returns `{weekStartDate, weekEndDate}` as `moment Dates` | Function |
199+
| **`updateWeek`** | Update the week view if other props change. If `false`, the week view won't change when other props change, but will still respond to left/right selectors. | Bool | **`True`** |
200+
| **`useIsoWeekday`** | start week on ISO day of week (default true). If false, starts week on _startingDate_ parameter. | Bool | **`True`** |
201+
| **`minDate`** | minimum date that the calendar may navigate to. A week is allowed if minDate falls within the current week. | Any |
202+
| **`maxDate`** | maximum date that the calendar may navigate to. A week is allowed if maxDate falls within the current week. | Any |
202203
| **`datesWhitelist`** | Array of dates that are enabled, or a function callback which receives a date param and returns true if enabled. Array supports ranges specified with an object entry in the array. Check example <a href="#dateswhitelist-array-example">Below</a> | Array or Func |
203-
| **`datesBlacklist`** | Array of dates that are disabled, or a function callback. Same format as _datesWhitelist_. This overrides dates in _datesWhitelist_. | Array or Func |
204-
| **`markedDates`** | Dates that are marked. Format as <a href="#markedDatesFormat-array-example">markedDatesFormat</a>. | Array or Func | **[]**
204+
| **`datesBlacklist`** | Array of dates that are disabled, or a function callback. Same format as _datesWhitelist_. This overrides dates in _datesWhitelist_. | Array or Func |
205+
| **`markedDates`** | Dates that are marked. Format as <a href="#markedDatesFormat-array-example">markedDatesFormat</a>. | Array or Func | **[]**
205206

206207

207208
##### datesWhitelist Array Example

‎index.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ declare module "react-native-calendar-strip" {
7575
selectedDate?: Date;
7676
onDateSelected?: (date: Date) => void;
7777
onWeekChanged?: (date: Date) => void;
78+
onHeaderSelected?: ({weekStartDate: Date, weekEndDate: Date}) => void;
7879
updateWeek?: boolean;
7980
useIsoWeekday?: boolean;
8081
minDate?: Date;

‎src/CalendarHeader.js

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { Component } from "react";
22
import PropTypes from "prop-types";
3-
import { Text, View } from "react-native";
3+
import { Text, TouchableOpacity } from "react-native";
44

55
import styles from "./Calendar.style.js";
66

@@ -19,6 +19,7 @@ class CalendarHeader extends Component {
1919
weekEndDate: PropTypes.object,
2020
allowHeaderTextScaling: PropTypes.bool,
2121
fontSize: PropTypes.number,
22+
onHeaderSelected: PropTypes.func,
2223
};
2324

2425
shouldComponentUpdate(nextProps) {
@@ -66,20 +67,35 @@ class CalendarHeader extends Component {
6667
}
6768

6869
render() {
69-
const headerText = this.formatCalendarHeader(this.props.calendarHeaderFormat);
70+
const {
71+
calendarHeaderFormat,
72+
onHeaderSelected,
73+
calendarHeaderContainerStyle,
74+
calendarHeaderStyle,
75+
fontSize,
76+
allowHeaderTextScaling,
77+
weekStartDate,
78+
weekEndDate,
79+
} = this.props;
80+
const headerText = this.formatCalendarHeader(calendarHeaderFormat);
81+
7082
return (
71-
<View style={this.props.calendarHeaderContainerStyle}>
83+
<TouchableOpacity
84+
onPress={onHeaderSelected && onHeaderSelected.bind(this, {weekStartDate, weekEndDate})}
85+
disabled={!onHeaderSelected}
86+
style={calendarHeaderContainerStyle}
87+
>
7288
<Text
7389
style={[
7490
styles.calendarHeader,
75-
{ fontSize: this.props.fontSize },
76-
this.props.calendarHeaderStyle
91+
{ fontSize: fontSize },
92+
calendarHeaderStyle
7793
]}
78-
allowFontScaling={this.props.allowHeaderTextScaling}
94+
allowFontScaling={allowHeaderTextScaling}
7995
>
8096
{headerText}
8197
</Text>
82-
</View>
98+
</TouchableOpacity>
8399
);
84100
}
85101
}

‎src/CalendarStrip.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ class CalendarStrip extends Component {
2929
selectedDate: PropTypes.any,
3030
onDateSelected: PropTypes.func,
3131
onWeekChanged: PropTypes.func,
32+
onHeaderSelected: PropTypes.func,
3233
updateWeek: PropTypes.bool,
3334
useIsoWeekday: PropTypes.bool,
3435
minDate: PropTypes.any,
@@ -494,6 +495,7 @@ class CalendarStrip extends Component {
494495
calendarHeaderFormat={this.props.calendarHeaderFormat}
495496
calendarHeaderContainerStyle={this.props.calendarHeaderContainerStyle}
496497
calendarHeaderStyle={this.props.calendarHeaderStyle}
498+
onHeaderSelected={this.props.onHeaderSelected}
497499
weekStartDate={this.state.weekStartDate}
498500
weekEndDate={this.state.weekEndDate}
499501
fontSize={this.state.monthFontSize}

0 commit comments

Comments
 (0)