This project is a calendar application built using TypeScript,Next,React, and Tailwind CSS. It provides day, week, and month views, along with a calendar for selecting day and month-year on the left side. The application is designed with a non-scrollable header and week name section in the week view, and it uses a table layout for time and event slots.
- Day, Week, and Month Views: Switch between different views on the same page.
- Calendar Navigation: Navigate through months and years.
- Reset to Today: Option to reset the calendar view to the current day.
- Dynamic Date Handling: Uses
moment.jsto handle date manipulation and formatting instead of a datepicker library.
- TypeScript: For type safety and better development experience.
- React: For building the user interface components.
- Tailwind CSS: For utility-first CSS styling.
- Moment.js: For date manipulation and formatting.
To get started with the project, follow these steps:
git clone https://github.com/your-username/calendar-app.git
cd calendar-appMake sure you have Node.js and npm installed. Then run:
npm installnpm run devNavigate to http://localhost:3000 to see the application in action.
The DatePicker component is used for displaying and interacting with the calendar. Key features include:
- Navigation Buttons: Move to previous/next month and year.
- Reset Button: Resets the calendar to the current month.
- Date Selection: Click on a date to select it.
The DatePicker component is implemented using moment.js to handle all date-related functionalities. This approach eliminates the need for an external datepicker library, providing a streamlined and efficient solution.
Feel free to submit issues, feature requests, or pull requests. Please follow the standard Git workflow for contributing.
This project is licensed under the MIT License - see the LICENSE file for details.