- React + Typescript
- CSS
This calendar interface provides a user-friendly way to view and navigate dates. Below are the key functionalities:
1. Month and Year Display:
- Displays the current month and year at the top left (e.g., "July 2024").
2. Date Navigation:
- Today Button: Quickly navigate back to the current date.
- Previous and Next Month Buttons: Navigate to the previous or next month using the "<" and ">" buttons.
3.Weekdays Header:
- Lists the days of the week from Sunday to Saturday at the top of the calendar grid.
4. Calendar Grid:
- Displays all the days of the current month in a grid format.
- Each cell represents a day, organized in weekly rows starting from Sunday and ending on Saturday.
- Days from the previous or next month are either left blank or grayed out to focus on the current month.
5. Current Date Highlight:
- Highlights the current date with a distinctive red circle for easy identification.
- Node.js (Ensure you have Node.js installed)
-
Clone the repository
git clone hhttps://github.com/Dharmik3/calendar.git
-
Navigate to the project directory
cd calendar
-
Install dependencies
npm install
-
Start the application
npm run dev
-
Open your browser and navigate to
http://localhost:5173/
Note: If already other app is running on this (5173) port then see the terminal, that will start the app in another port , so kindly navigate to that url and port