Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ local.properties
.cxx/
*.keystore
!debug.keystore

.history/
# node.js
#
node_modules/
Expand Down
87 changes: 56 additions & 31 deletions example/src/screens/calendarPlaygroundScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
Expand All @@ -50,28 +53,40 @@ 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]);
const toggleRenderArrow = useCallback(() => setRenderArrow(!renderArrow), [renderArrow]);
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}`);
}, []);

Expand Down Expand Up @@ -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'},
Expand Down Expand Up @@ -370,7 +392,7 @@ const NewCalendarScreen = () => {

const CustomHeader = React.forwardRef((props, ref) => {
customHeaderProps.current = props;

return (
// @ts-expect-error
<View ref={ref} {...props} style={styles.customHeader}>
Expand Down Expand Up @@ -420,27 +442,23 @@ const NewCalendarScreen = () => {

const CustomHeaderTitle = (
<TouchableOpacity style={styles.customTitleContainer} onPress={() => console.warn('Tapped!')}>
<Text style={styles.customTitle}>{selectedValue.getMonth() + 1}-{selectedValue.getFullYear()}</Text>
<Text style={styles.customTitle}>
{selectedValue.getMonth() + 1}-{selectedValue.getFullYear()}
</Text>
</TouchableOpacity>
);

/** Custom Arrow */
const _renderArrow = useCallback((direction) => {
const _renderArrow = useCallback(direction => {
const text = direction === 'left' ? '<<' : '>>';
return (
<Text>{text}</Text>
);
return <Text>{text}</Text>;
}, []);

/** Props Switches */
const renderSwitch = (label: string, state: any, toggleSwitch: any) => {
return (
<View style={styles.switchContainer}>
<Switch
value={state}
onValueChange={toggleSwitch}
trackColor={{true: GREEN}}
/>
<Switch value={state} onValueChange={toggleSwitch} trackColor={{true: GREEN}}/>
<Text style={[styles.switchText, styles.text]}>{label}</Text>
</View>
);
Expand All @@ -451,7 +469,8 @@ const NewCalendarScreen = () => {
<View>
{renderSwitch('Min and Max Dates', minAndMax, toggleMinAndMax)}
<View style={styles.subSwitchContainer}>
{minAndMax && renderSwitch('Allow Selection Out Of Range', allowSelectionOutOfRange, toggleAllowSelectionOutOfRange)}
{minAndMax &&
renderSwitch('Allow Selection Out Of Range', allowSelectionOutOfRange, toggleAllowSelectionOutOfRange)}
</View>
{renderSwitch('Enable Swipe Months', enableSwipeMonths, toggleEnableSwipeMonths)}
{renderSwitch('Disable Month Change', disableMonthChange, toggleDisableMonthChange)}
Expand All @@ -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)}
Expand Down Expand Up @@ -492,11 +519,9 @@ const NewCalendarScreen = () => {
return (
<TouchableOpacity onPress={() => setType(index)} key={index} style={styles.radioButtonContainer}>
<View style={styles.radioButton}>
{selectedButtonIndex === index &&
<View style={styles.selectedRadioButton}/>
}
{selectedButtonIndex === index && <View style={styles.selectedRadioButton}/>}
</View>
<Text>{value}</Text>
<Text>{value}</Text>
</TouchableOpacity>
);
};
Expand Down Expand Up @@ -563,8 +588,8 @@ const styles = StyleSheet.create({
alignItems: 'center'
},
text: {
fontSize: 14,
fontWeight: 'bold'
fontSize: 14,
fontWeight: 'bold'
},
buttonText: {
color: GREEN,
Expand Down Expand Up @@ -628,8 +653,8 @@ const styles = StyleSheet.create({
padding: 8
},
customTitleContainer: {
flexDirection: 'row',
alignItems: 'center',
flexDirection: 'row',
alignItems: 'center',
padding: 10
},
customTitle: {
Expand Down
10 changes: 8 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-native-calendars",
"version": "1.22.0",
"name": "@unifyapps/react-native-calendars",
"version": "1.22.0-ua.3",
"main": "src/index.ts",
"types": "src/index.d.ts",
"description": "React Native Calendar Components",
Expand Down Expand Up @@ -30,6 +30,10 @@
"publishConfig": {
"registry": "https://registry.npmjs.org/"
},
"files": [
"src",
"index.d.ts"
],
"author": "Wix.com",
"license": "MIT",
"dependencies": {
Expand Down Expand Up @@ -79,6 +83,8 @@
"lint-staged": "^10.2.11",
"metro-react-native-babel-preset": "0.73.7",
"mocha": "^7.1.0",
"patch-package": "^8.0.0",
"postinstall-postinstall": "^2.1.0",
"prettier": "2.8.8",
"prettier-eslint": "^16.3.0",
"react": "18.2.0",
Expand Down
Loading