A production-ready, responsive UI for a calendar application similar to Google Calendar. This application utilizes React framework.
- Events that the user has selected going are colored for easy identification.
- The calendar handles all-day events and distinguishes between private and public events. Private event titles are hidden, and a static title "Busy" is displayed.
- Different color coding is applied for different types of events, such as normal events, stretching events, and all-day events.
- Drag and drop functionality allows users to move events within a day across different time slots in the calendar.
- Thorough testing ensures reliability and handles edge cases.
- Red line indicating the current time.
- Clicking on an event opens a modal showing the event details.
- React - A JavaScript library for building user interfaces.
- React DOM - React package for working with the DOM.
- Ant Design - A UI design language and React UI library.
- React Icons - Popular icon library for React.
- React Modal - Accessible modal dialog component for React.
- Vite - A next-generation frontend tooling for React development.
- ESLint - A pluggable linting utility for JavaScript and JSX.
- ESLint React Plugin - React specific linting rules for ESLint.
- ESLint React Hooks Plugin - ESLint rules for React hooks.
- Vite React Plugin - Vite plugin for React support.
- @types/react - TypeScript type definitions for React.
- @types/react-dom - TypeScript type definitions for React DOM.
- Clone the repository.
- Install dependencies using
npm install. - Start the development server using
npm run dev. - Open your browser and navigate to the provided URL to view the application.
- Select events by clicking on them to mark them as going.
- Drag and drop events within the calendar to reschedule them.
- Click on an event to view its details in a modal.
This project is developed using Vite and can be previewed using the vite preview command. Make sure to have Vite installed globally or use npx vite preview to run the project.