This is a calendar app that allows you to view and manage events for the current month. The app is divided into two portions: a Calendar portion and an Event list portion.
The calendar portion displays the current month and dates of the month. The header displays app title, clock and the current year. The body of the calendar displays the current month, with arrows bordering the sides of the calendar. If the first day of the current month does not start on a Sunday, the last dates of the previous month are displayed as buffers.
The event portion displays the current day of the week and the current month and date (numerical). A list of events with corresponding dates of the month is displayed, divided by a vertical bar. At the bottom of the list, there is an "Add Event Icon" button. When the app loads, any appointments for the current date are displayed. If there are no appointments for the current date, the app displays "No Appointments".
The modal form is activated via the "Add Event Icon" button. The form floats above the content and allows users to add new events to the calendar. The form includes fields for the event name, datetime, description, location, and description. The user can close the form without submitting the information, and the form closes on submission of the event information.
Minimalistic design.
Upon load, the calendar displays the correct layout of the current month, with the weeks starting on Sunday. The app displays the last days of the previous month and/or the first days of the next month as buffers when needed. The current date is set apart from the others in the appointment panel. Scrolling is accurate, allowing users to navigate forward and backward in time.
The app displays a small dot under a day if there is one or more appointments for that day in the displayed month. When a user clicks on a day in the currently displayed month, the labels and appointments update in the appointment panel. When a user inputs a new appointment, the appointment dot under the correct day is shown immediately. The app implements the full CRUD (create, read, update, delete) lifecycle for appointments, using the modal for creating/update/delete and the panel for review.
For Edit and Delete, simply click the Kebab Menu located at each event.
Unfortunately datetime-local doesn't play well with certain browsers, you may need to enter time manually.
React is having issues with date-fns and is ignoring suppressHydrationWarning in production. Errors in console is related to this.
Related issue 1
Related issue 2
This application requires either yarn or npm to run therefore please ensure you have the latest version installed on your computer.
To get the app running locally, you can either:
1. git clone https://github.com/Pixelshot/ecalendar-vercel.git
- Download the zipfile from https://github.com/Pixelshot/ecalendar-vercel.git
Type in yarn/npm install in your terminal to install all dependencies for this project. Once completed, run yarn/npm start to start the server on port localhost:3000.
| Technology | Description |
|---|---|
| Remix.run | Framework |
| TailwindCSS | CSS |
| Prisma | ORM |
| Supabase | Database |
| Vercel | Deployment |