React-Native-Custom-Calendar

Tried of coding a separate custom calendar in react native, In This Article, you will explore Calendar for react-native

The 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. But In React Native there is no option for moving into a future year and past year. In this article, you will explore the calendar which we can go into past and future years also

From the above video, we can see that there is no option for moving into next year in the react-native-calendar package, to overcome this We have implemented react-native-custom-calendar, In this custom calendar we can go to next years and we can come to the previous year. Let’s explain this briefly in this article

Calendar Header

<CalendarHeader
title={this.state.currentDate}
onMovedDateYear={this.props.onMovedMonthYear}
onDoubleLeftIconPressed={() => {
this.showPreviousYear();
}}
onLeftIconPressed={() => {
this.showPreviousMonth();
}}
onRightIconPressed={() => {
this.showNextMonth();
}}
onDoubleRightIconPressed={() => {
this.showNextYear();
}}
style={{ backgroundColor: 'red' }}
/>

Code Explanation

In this Calendar header, There are various props are used like,

1. title -used to indicate the currentDate of the month, onMonthDateYear is used to indicate the current month, date, and year, the current date can be calculated by using moment
2. onDoubleLeftIconPressed -used to change the month from the selected current month to the previous month, this happens when this.showPreviousMonth() function is called
3. onRightIconPressed- used to change the month from the current month to next month, this happens when the this.showNextMonth() function is called
4. onDoubleRightIconPressed-used to change the year from the current year to next year, this happens when the this.showNextYear() function is called.
5. style- used to indicate the background Color, font size, and font family.

In the above scenario, the functionality cannot be provided dynamically for the particular screen. The render option for calendars is not dynamically provided by react-native-calendar

Get Digital Optisol’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

To achieve the above scenario, the solution for rendering calendar is provided by react-native-custom-calendar

React-Native-Custom-Calendar

import Calendar from '../calendar/Calendar';
// ...
const CalendarModal = ({ showModel, cancelModel, onDayClick, plannedDate, onViewChange, CalendarEventCount }) => {
var CurrentDate = new Date(plannedDate).getDate();
var CurrentMonth = new Date(plannedDate).getMonth();
var CurrentYear = new Date(plannedDate).getFullYear();
return (
<Modal
.....
>
<Calendar style={styles.calendarStyle}
onDateSet={{ setDate: CurrentDate, setMonth:    CurrentMonth, setyear: CurrentYear }}
onDatePressed={(date, month, year) => { onDayClick(date, month, year),            cancelModel(false) }}
onMovedMonthYear={(data) => onViewChange(data)}
CalendarCount={CalendarEventCount}
/>
</Modal>
)
}

Changing Months

Our calendar component will have onLeftIconPressed and onRightIconPressed images for changing months. When These arrow images are pressed, it should allow a user to move from one month to another. In the event handler we need to get the currentDate.getMonth() object and increment or decrement its value by 1

Show Next month code implementation

showNextMonth() {
let currentDate = new Date(
this.state.currentDate.setMonth(this.state.currentDate.getMonth() + 1),
);
this.setState({
currentMonth: currentDate.getMonth(),
currentYear: currentDate.getFullYear(),
currentDate,
},()=>{
this.onMonthValueChanged(currentDate.getMonth(),currentDate.getFullYear())
});
}

Code Explanation for showNextMonth() :

In this function, the state value of currentDate of setMonth is increment by 1, So that the value of currentDate of the month is increased and it moved to next month, In the setState the value of the currentMonth is incremented by 1

Show Previous month code implementation

showPreviousMonth() {
//show previous month
if (this.isDateIsLesser(this.state.currentDate, new Date())) {
return;
}
let currentDate = new Date(
this.state.currentDate.setMonth(this.state.currentDate.getMonth() - 1),
);
if (currentDate.getTime() < new Date().getTime) return;
this.setState({
currentMonth: currentDate.getMonth(),
currentYear: currentDate.getFullYear(),
currentDate,
},()=>{
this.onMonthValueChanged(currentDate.getMonth(),currentDate.getFullYear())
});
}

Code Explanation for showPreviousMonth() :

In this function, the state value of currentDate of setMonth is decrement by 1, So that the value of currentDate of the month is decreased and it moved to previous month, In the setState the value of the currentMonth is decrement by 1

Changing Years:

Our calendar component will have onDoubleLeftIconPressed on the last left side and onDoubleRightIconPressed on the last right side for changing Years. When These arrow images are pressed, it should allow the user to move from one year to another. In the event handler, we need to get the currentDate.getFullYear object and increment or decrement its value by 1

Show Next year code implementation

showNextYear() {
//show next year
let currentDate = new Date(
this.state.currentDate.setFullYear(
this.state.currentDate.getFullYear() + 1,
),
);
this.setState({
currentMonth: currentDate.getMonth(),
currentYear: currentDate.getFullYear(),
currentDate,
},()=>{
this.onMonthValueChanged(currentDate.getMonth(),currentDate.getFullYear())
});
}

Code Explanation for showNextYear :

In this function, the state value of currentDate of setFullYear is increment by 1, So that the value of currentDate of the current year is increased and it moved to next year, In the setState, the value of the currentYear is incremented by 1

Show Previous year code implementation

showPreviousYear() {
if (this.isDateIsLesser(this.state.currentDate, new Date())) {
return;
}
var given = this.state.currentDate; var current = new Date();
var givenYear = given.getFullYear(); var currentYear = current.getFullYear();
if (currentYear === givenYear - 1) {
this.setState({
currentMonth: new Date().getMonth(),
currentYear: new Date().getFullYear(),
currentDate: new Date()
},()=>{
this.onMonthValueChanged(this.state.currentMonth,this.state.currentYear)
});
return;
}

Code Explanation for showPreviousYear:

In this function, the state value of currentDate of setFullYear is decrement by 1, So that the value of currentDate of the current year is decreased and it moved to the previous year, In the setState, the value of the currentYear is decrement by 1

In this react-native-custom-calendar we cannot go back to the previous month and previous year from the current date and Current year, From the Current date we can go to next month by selecting a single right arrow image from the selected month we can come to the current month by selecting the single left arrow image but from the current month, we cannot go to previous month from the current month. Same for the year also, from the current year, we can go to next year’s by selecting double right arrow image from the right side from the selected year we can come to current year by selecting the double left arrow image, but from the current year we cannot go to previous year

From the Current date, the previous date is hidden and we cannot select that previous date, The previous date is hidden and it is indicated in Eunry color(#CDA3A8) and the selected date is indicating in Deep Cerulena Color(#006BB6)

Calendar Count

In this react-native-custom-calendar we will display the number of count’s for the day, If we have had more than one meeting or any other events it will show the number of counts on the particular date

Conclusion

Calendars are a crucial part of one’s life as they help in keeping track of important dates, events, meetings, etc. Based on the above discussion, we have created different types of calendars. The types of calendars created above are:

• Moving from one year to another year
• Event Calendar
• Calendar with Range selection

Thanks for reading this article. All the best..!

Author: Shyam Sundar S