A beautiful and functional calendar application built with Angular 17, featuring a modern UI and task management capabilities. This project demonstrates advanced Angular concepts and best practices in modern web development.
-
Interactive Calendar Interface
- Month navigation with smooth transitions
- Today's date highlighting
- Responsive grid layout
- Beautiful hover and active states
-
Task Management
- Add tasks with title, time, and description
- View tasks by date
- Delete tasks
- Clean and intuitive task display
-
Modern UI/UX
- Material Design inspired interface
- Responsive layout for all devices
- Smooth animations and transitions
- Beautiful color scheme and typography
-
Frontend Framework
- Angular 17 (Latest version)
- TypeScript
- Standalone Components
- Signals for state management
-
Styling & Design
- Modern CSS3 features
- Flexbox and CSS Grid
- Custom animations and transitions
- Google Fonts (Inter)
-
Development Tools
- Angular CLI
- Luxon for date manipulation
- VS Code
- Git for version control
-
Modern Angular Features
- Standalone components
- Signals for reactive state management
- Built-in control flow syntax
- Type-safe development
-
Clean Architecture
- Component-based architecture
- Interface-driven development
- Type safety with TypeScript
- Modular and maintainable code
-
Performance Optimizations
- Efficient date calculations
- Optimized rendering
- Responsive design patterns
- Minimal dependencies
- Node.js (v18 or higher)
- npm (v9 or higher)
- Angular CLI (v17)
- Clone the repository
git clone https://github.com/yourusername/task-calendar.git
cd task-calendar- Install dependencies
npm install- Start the development server
ng serve- Open your browser and navigate to
http://localhost:4200
-
Navigating the Calendar
- Use the arrow buttons to move between months
- Click "Today" to return to the current date
- Click any date to select it
-
Managing Tasks
- Select a date to add tasks
- Fill in the task details (title, time, description)
- Click "Add Task" to save
- Use the delete button (×) to remove tasks
- Local storage for task persistence
- Task categories and priority levels
- Task completion status
- Task editing functionality
- Dark mode support
- Calendar view options (week, day views)
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
Your Name
- GitHub: @Musaveershaik
- LinkedIn: LinkedIn
- Angular team for the amazing framework
- Luxon for the date manipulation library
- Google Fonts for the beautiful typography