Soccer Field Schedule - Copy this React, Tailwind Component to your project

Create a soccer field schedule with statuses such as: empty (blue or white), booked (yellow), in use (red). And there are additional hours for users to set according to the time the user desires. I want to add the function that when clicking on a certain box, that box will let the user enter their username and a conbobox to select the user who wants to rent the field to practice or organize an event. Added a function to change the set status to the status of being used and Events, if the calendar is in the status of being used, the message "There is someone using the yard at this time!" only when clicking on the box for that hour