Updated April 6, 2023
Introduction to React-Native Calendar
React-Native is a most efficient JavaScript framework which helps in elevating one’s programming skills and also helps in developing one’s experience to the whole new world. Calendar helps one to keep track of days, months, and years both of the past as well as of the future. A Calendar application not only helps one to plan better schedules but also makes one aware of all the due dates during the month as well as of the upcoming events. Calendars help in setting a specific date and time which is helpful for doctor’s appointments and for important meetings. It is very easy to develop a calendar with React-Native because it provides the best platform for dynamic product development and successful project execution.
Syntax of importing React-Native Calendars
npm install --save react-native-calendarsSyntax of importing Calendar Components
import {Calendar
, CalendarList
, Agenda} from 'react-native-calendars';Syntax of importing Calendar Objects in React-Native
{
day:1,
// day of the month (i.e. 1-31)
month:1,
// month of the year (i.e. 1-12)
year:2017 , //year
timestamp, // UTC timestamp representing 00:00 AM of the date dateString: '2016-05-13' // date formatted as 'YYYY-MM-DD' string
}Creating a Calendar in React-Native with Examples
Simple Horizontal Calendar Stripe with the ability to select a particular date is created below:
1. Horizontal Calendar Stripe with Date Selection
import React, { Component } from 'react';
import {
View, Text,
StyleSheet
} from 'react-native';
import CalendarStrip from 'react-native-slideable-calendar-strip';
export default class App extends Component
constructor(props) {
super(props);
this.state = {
selectedStartDate: null,
};
this.onDateChange = this.onDateChange.bind(this);
}
onDateChange(date) {
this.setState({
selectedStartDate: date,
});
}
render() {
const { selectedStartDate } = this.state;
const startDate = selectedStartDate ? selectedStartDate.toString() :
'';
return (
<View style={styles.container}>
<CalendarStrip isEnglish showWeekNumber showEnglishLunar
selectedDate={this.state.selectedDate} onPressDate={(date) => { this.setState({ selectedDate: date });
}}
onPressGoToday={(today) => { this.setState({ selectedDate: today });
}}
onSwipeDown={() => { alert('onSwipeDown');
}}
markedDate={['2020-03-04', '2020-03-15', '2020-03-04', '2020-03-01']}
weekStartsOn={1}
/>
<View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({ container: {
flex: 1,
backgroundColor: '#b3fff3', marginTop: 100,
,
});Output:
2. Event Calendar
Simple Event Calendar with different predefined events is created below:
import React from 'react'; import { Dimensions,
View,
StyleSheet }
from 'react-native';
import EventCalendar from 'react-native-events-calendar'; let { width } = Dimensions.get('window');
export default class App extends React.Component { constructor(props) {
super(props); this.state = {
events:
{
start: '2020-01-01 00:00:00',
end: '2020-01-01 02:00:00',
title: 'New Year Celebration Party', summary: 'Hotel Radision',
},{
start: '2020-01-01 01:00:00',
end: '2020-01-01 02:00:00',
title: 'New Year Wishes', summary: 'Call & Text Everyone',
},
{
start: '2020-01-02 00:30:00',
end: '2020-01-02 01:30:00',
title: 'Rahul Birthday Party', summary: 'Call him',
},
{
start: '2020-01-03 01:30:00',
end: '2020-01-03 02:20:00',
title: 'My Birthday Party', summary: 'Lets Have Fun',
},
{
start: '2020-02-04 04:10:00',
end: '2020-02-04 04:40:00',
title: 'Auto Expo 2020',
summary: 'Expoo Venue to be decided',
},
],
};
}
eventClicked(event) { alert(JSON.stringify(event));
}
render() { return (
<View style={styles.container}>
<EventCalendar eventTapped={this.eventClicked.bind(this)} events={this.state.events}
width={width} size={60}
initDate={'2020-01-01'} scrollToFirst
/>
</View>
);
}
}
const styles = StyleSheet.create({ container: {
flex: 1,
backgroundColor: '#ffb3bb', marginTop: 100,
},
});Output:
3. Calendar with Range Selection
Simple Calendar with the ability to select particular range of dates:
import React, { Component } from 'react'; import {
StyleSheet, Text,
View
} from 'react-native';
import CalendarPicker from 'react-native-calendar-picker';
export default class App extends Component { constructor(props) {
super(props); this.state = {
selectedStartDate: null, selectedEndDate: null,
};
this.onDateChange = this.onDateChange.bind(this);
}
onDateChange(date, type) { if (type === 'END_DATE') {
this.setState({
;
selectedEndDate: date,
});
} else { this.setState({
selectedStartDate: date, selectedEndDate: null,
});
}
}
render() {
const { selectedStartDate, selectedEndDate } = this.state;
const minDate = new Date();
const maxDate = new Date(2020, 6, 3);
const startDate = selectedStartDate ? selectedStartDate.toString() :
'';
const endDate = selectedEndDate ? selectedEndDate.toString() : '';
return (
<View style={styles.container}>
<CalendarPicker startFromMonday={true} allowRangeSelection={true} minDate={minDate} maxDate={maxDate} todayBackgroundColor="#f22465" selectedDayColor="#8df252" selectedDayTextColor="#0f0f0f" onDateChange={this.onDateChange}
/>
<View>
<Text>SELECTED START DATE:{ startDate }</Text>
<Text>SELECTED END DATE:{ endDate }</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({ container: {
flex: 1,
backgroundColor: '#fbfcac', marginTop: 100,
},
});Output:
4. Vertical Calendar with Selection Range
import React, { Component } from 'react'; import {
StyleSheet, Text,
View
} from 'react-native';
import { Calendar } from 'react-native-calendario';
export default class App extends Component { constructor(props) {
super(props); this.state = {
selectedStartDate: null, selectedEndDate: null,
};
this.onDateChange = this.onDateChange.bind(this);
}
onDateChange(date, type) {
if (type === 'END_DATE') { this.setState({
selectedEndDate: date,
});
} else { this.setState({
selectedStartDate: date, selectedEndDate: null,
});
}
}
render() {
const { selectedStartDate, selectedEndDate } = this.state;
const minDate = new Date();
const maxDate = new Date(2020, 6, 3);
const startDate = selectedStartDate ? selectedStartDate.toString() :
'';
const endDate = selectedEndDate ? selectedEndDate.toString() : '';
return (
<View style={styles.container}>
<Calendar
onChange={(range) => console.log(range)} minDate={new Date(2020, 2, 28)}
startDate={new Date(2020, 2, 27)}
endDate={new Date(2020, 3, 2)} theme={{
activeDayColor: {}, monthTitleTextStyle: {
color: '#a722e0', fontWeight: '300',
fontSize: 16,
},
emptyMonthContainerStyle: {}, emptyMonthTextStyle: {
fontWeight: '200',
},
weekColumnsContainerStyle: {}, weekColumnStyle: {
paddingVertical: 10,
},
weekColumnTextStyle: { color: '#000305',
fontSize: 13,
},
nonTouchableDayContainerStyle: {},
nonTouchableDayTextStyle: {}, startDateContainerStyle: {}, endDateContainerStyle: {}, dayContainerStyle: {}, dayTextStyle: {
color: '#613a6b', fontWeight: '200',
fontSize: 15,
},
dayOutOfRangeContainerStyle: {}, dayOutOfRangeTextStyle: {}, todayContainerStyle: {}, todayTextStyle: {
color: '#fc051e',
},
activeDayContainerStyle: { backgroundColor: '#d472f7',
},
activeDayTextStyle: { color: 'black',
},
nonTouchableLastMonthDayTextStyle: {},
}}
/>
<View>
<Text>SELECTED START DATE:{ startDate }</Text>
<Text>SELECTED END DATE:{ endDate }</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({ container: {
flex: 1,
backgroundColor: '#fbfcac', marginTop: 100,
},
});Output:
Conclusion
Calendars are a crucial part of one’s life as they help in keeping track of important dates, events, meetings, etc. On the basis of the above discussion, we have created different types of calendars. The types of calendars created above are:
- Simple Horizontal Calendar Stripe with Date Selection
- Event Calendar
- Calendar with Range selection
- Vertical calendar with Selection Range
Many more calendars like Agenda, customizable-calendar, date marking, etc. can also be created which helps in providing the best user-experience in React-Native based calendar application.
Recommended Articles
This is a guide to React-Native Calendar. Here we discuss the Introduction, syntax, and steps to create a React-Native Calendar along with examples and code. You may also have a look at the following articles to learn more –
