"I want to make a booking calendar using React, but it seems like it will be difficult to process dates and times..."
"Isn't it difficult to select and manage dates?"
I think many people feel this way.
But don't worry. If you understand the basics of React and date and time processing,Anyone can create a simple booking calendar.
In this article,Date selection, calendar display, reservation registration, validationI'll explain all the steps in an easy to understand manner.
The completed code is also includedThe explanations are written in language that even elementary school students can understand.
Even if you are not good at using calendar functions, you will be able to implement them with confidence by the end of reading this book.
Why build a booking calendar with React?
When is date and time processing important?
Conclusion: Reservation management and schedule adjustment systems are required in a variety of industries.
For example, date and time management is required in the following situations:
- Making appointments for hospitals and dental clinics
- Hair salon and massage reservations
- Registration for meeting rooms and co-working spaces
- Advance registration for lessons and events
These services include:"How to choose a date and time on a calendar"is essential.
The Ministry of Economy, Trade and Industry's materials (https://www.meti.go.jp/policy/it_policy/digital_transformation/index.html) also state,
Demand for reservation management is increasing as small and medium-sized enterprises automate and digitalize their operationsIt has been reported that:
Using React, you can create an app that intuitively manipulates date and time data.Anyone can implement it.
Basic knowledge of React and date management
How to handle dates in JavaScript?
Bottom line: it's easy if you combine the Date object with an external library.
In JavaScriptnew Date()We use it to handle dates, but it is often inconvenient to use it alone.
This is where the following libraries come in:
date-fns(Lightweight and easy to operate)dayjs(Simple and faster than moment.js)
This timedate-fnsWe will implement it using.
1 | |
Let's create a calendar screen
Displaying a list of dates and clicking on them
Conclusion: A calendar is a way to organize dates by listing them like a table.
First, let's display a calendar for one month.
1 2 3 4 5 6 7 8 9 10 11 12 13 | }}> '14.2%'}}> ))} );} |
In this wayThe calendar is organized into 7 days per columncan.
How to register and manage reservations
Click on the date to schedule an event
Conclusion: Manage selection and reservation data when you click on a date.
To add an event to the calendar, we will introduce the following mechanism.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | }}> }}> ); })} );} |
If you do this,Add and view reservations by datecan.
Validating and deleting reservations
How to avoid duplicate registrations at the same time
Bottom line: Don't allow people to register if they already have a reservation.
1 | ); ); ); |
It would also be more practical if it included a function to delete reservations.
1 | |
Summary: Complete code list
App.js (simple configuration)
1 2 3 4 5 6 | );} |
CalendarWithBooking.js (all in one)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | }}> }}> ); })} );} |
summary
In this article, we will use React anddate-fnsWe explained how to create a booking calendar using this.
Key points to note are:
- Date data can be easily handled with date-fns
- Even elementary school students can understand how to display the calendar and register reservations
- Context allows for even more functionality
With React,Quickly build a calendar with appointment schedulingis.
If you want to create a booking app or learn how to handle dates, be sure to check out this code.
Related links:
English 
Japanese