{"id":29245793,"url":"https://github.com/arnobt78/calendar-to-do--react","last_synced_at":"2025-07-26T02:38:50.453Z","repository":{"id":302171498,"uuid":"864126435","full_name":"arnobt78/Calendar-To-Do--React","owner":"arnobt78","description":"Calendar App is a React-Vite Calendar To-Do List project, using Calendar, select any day of month of year, set the clock hour for the day to remind the plan, also plan can be changed and edited with delete options and deploy on Vercel.","archived":false,"fork":false,"pushed_at":"2025-06-30T23:30:39.000Z","size":50,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-01T00:34:26.573Z","etag":null,"topics":["calendar","calendar-events","calendar-service","calendar-view","clockwork","css","html5","javascript","react","react-vite","reactjs","todo-app","todo-list","vercel-deployment"],"latest_commit_sha":null,"homepage":"https://calendar-arnob.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnobt78.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-09-27T14:40:46.000Z","updated_at":"2025-06-30T23:30:42.000Z","dependencies_parsed_at":"2025-07-01T17:32:40.309Z","dependency_job_id":null,"html_url":"https://github.com/arnobt78/Calendar-To-Do--React","commit_stats":null,"previous_names":["arnobt78/calendar-to-do--react"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/arnobt78/Calendar-To-Do--React","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FCalendar-To-Do--React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FCalendar-To-Do--React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FCalendar-To-Do--React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FCalendar-To-Do--React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/Calendar-To-Do--React/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FCalendar-To-Do--React/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267108845,"owners_count":24037586,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["calendar","calendar-events","calendar-service","calendar-view","clockwork","css","html5","javascript","react","react-vite","reactjs","todo-app","todo-list","vercel-deployment"],"created_at":"2025-07-03T22:38:15.697Z","updated_at":"2025-07-26T02:38:50.404Z","avatar_url":"https://github.com/arnobt78.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Calendar-To-Do ReactVite Web Application\n\n![Screenshot 2024-09-27 at 16 33 26](https://github.com/user-attachments/assets/08b1e989-bdfb-40d1-9735-d02285edc3eb) ![Screenshot 2024-09-27 at 16 33 43](https://github.com/user-attachments/assets/8fce0427-d5dc-4169-b783-56cb3a967bd6)\n\n---\n\n## Project Summary\n\nCalendar-To-Do--ReactVite is a modern, responsive, and interactive web application built using **React** and **Vite**. It combines the power of a calendar with a to-do/events organizer, allowing users to select any day of the month, set reminders for specific times, and manage events (add/edit/delete) with an intuitive and visually appealing interface. The project is designed for both learning and practical usage—ideal for anyone interested in React, Vite, and modern front-end development.\n\n- **Live Demo:** [https://calendar-arnob.vercel.app/](https://calendar-arnob.vercel.app/)\n\n---\n\n## Table of Contents\n\n1. [Project Summary](#project-summary)\n2. [Features](#features)\n3. [Project Structure](#project-structure)\n4. [Technology Stack](#technology-stack)\n5. [Installation \u0026 Setup](#installation--setup)\n6. [How to Use](#how-to-use)\n7. [Application Walkthrough](#application-walkthrough)\n8. [Component Overview](#component-overview)\n9. [Styling \u0026 Responsiveness](#styling--responsiveness)\n10. [Code Examples](#code-examples)\n11. [Learning Points \u0026 Keywords](#learning-points--keywords)\n12. [Conclusion](#conclusion)\n\n---\n\n## Features\n\n- **Monthly Calendar View**: Navigate through months and years with ease.\n- **Event/To-Do Management**: Add, edit, and delete events for any date.\n- **Set Event Times**: Specify hours and minutes for each event.\n- **Live Event List**: View all events in a scrollable list.\n- **Intuitive UI**: Modern, clean, and responsive user interface.\n- **Persistent State**: (Option for future) Easily extendable for local storage or backend integration.\n- **Mobile Friendly**: Adaptive layout for various screen sizes.\n\n---\n\n## Project Structure\n\n```plaintext\nCalendar-To-Do--ReactVite/\n├── index.html\n├── package.json\n├── vite.config.js\n├── src/\n│   ├── App.jsx\n│   └── Components/\n│       ├── CalendarApp.jsx\n│       └── CalendarApp.css\n└── README.md\n```\n\n- **index.html**: Entry HTML file, loads the React app.\n- **vite.config.js**: Vite configuration using React plugin.\n- **src/App.jsx**: Root component, renders the main calendar app.\n- **src/Components/CalendarApp.jsx**: Core logic and UI for the calendar and event system.\n- **src/Components/CalendarApp.css**: All styling for the calendar app.\n\n---\n\n## Technology Stack\n\n- **React**: Declarative, component-based UI library.\n- **Vite**: Lightning-fast development server and build tool.\n- **JavaScript (ES6+)**: Application language.\n- **CSS3**: Custom styling for modern and responsive design.\n- **Boxicons**: Icon library for navigation and actions.\n\n---\n\n## Installation \u0026 Setup\n\n**1. Install Node.js**  \nMake sure you have [Node.js](https://nodejs.org/en/) installed on your machine.\n\n**2. Clone the Repository**\n```bash\ngit clone https://github.com/arnobt78/Calendar-To-Do--ReactVite.git\ncd Calendar-To-Do--ReactVite\n```\n\n**3. Install Dependencies**\n```bash\nnpm install\n```\n\n**4. Run the Development Server**\n```bash\nnpm run dev\n```\n\n**5. Open in Browser**  \nNavigate to [http://localhost:5173/](http://localhost:5173/) to view your app.\n\n---\n\n## How to Use\n\n1. **Navigate Months**: Use the left/right arrow icons to move between months.\n2. **Select a Day**: Click on any day to open the event popup.\n3. **Add Event**: Set the event time and description (max 60 characters) and click \"Add Event\".\n4. **Edit Event**: Click the pencil/edit icon next to any event to modify it.\n5. **Delete Event**: Click the trash/delete icon to remove an event.\n6. **View Events**: All events are listed beside the calendar for quick review.\n\n---\n\n## Application Walkthrough\n\n- **Calendar Display**: Shows current month and year, highlights today's date.\n- **Date Navigation**: Buttons allow moving to previous/next month, updating the calendar grid.\n- **Day Selection**: Clicking a valid day opens a popup to add/edit events.\n- **Event Popup**: Lets you specify the time and details for your event. Supports both creating and updating events.\n- **Event List**: Events are listed with date, time, description, and actionable icons (edit/delete).\n- **Responsive Styling**: Adjusts to screen size, providing a great UX on desktop and mobile.\n\n---\n\n## Component Overview\n\n### `App.jsx`\n```javascript\nimport CalendarApp from './Components/CalendarApp'\nimport './Components/CalendarApp.css'\n\nconst App = () =\u003e (\n  \u003cdiv className=\"container\"\u003e\n    \u003cCalendarApp /\u003e\n  \u003c/div\u003e\n)\n\nexport default App\n```\n\n---\n\n### `CalendarApp.jsx`\nHandles all state and logic for the calendar and event management system.\n\n**Key State Variables:**\n- `currentMonth`, `currentYear`: Calendar navigation.\n- `selectedDate`: Currently selected date.\n- `showEventPopup`: Popup visibility for event input.\n- `events`: Array of event objects `{ id, date, time, text }`.\n- `eventTime`, `eventText`: For popup input.\n- `editingEvent`: Stores the event being edited.\n\n**Core Functions:**\n- `prevMonth`/`nextMonth`: For navigating months.\n- `handleDayClick`: Shows event popup for selected day.\n- `handleEventSubmit`: Adds or updates events.\n- `handleEditEvent`: Loads event data into popup for editing.\n- `handleDeleteEvent`: Removes event from list.\n- `handleTimeChange`: Updates time input state.\n\n**Rendering:**\n- Calendar grid with days and highlights.\n- Event popup for input.\n- Scrollable event list with edit/delete actions.\n\n---\n\n### `CalendarApp.css`\nHandles all visual aspects, including:\n- Layout (flexbox, aspect ratios)\n- Calendar grid styling\n- Responsive design (media queries)\n- Popup and button styles\n- Event list formatting\n\n---\n\n## Styling \u0026 Responsiveness\n\nThe project uses **custom CSS** for all styling:\n- Modern dark theme with accent colors\n- Flexbox for layout management\n- Responsive grid and popup scaling\n- Media queries for device adaptation\n\n---\n\n## Code Examples\n\n### Adding an Event\n\n```javascript\nconst handleEventSubmit = () =\u003e {\n  const newEvent = {\n    id: editingEvent ? editingEvent.id : Date.now(),\n    date: selectedDate,\n    time: `${eventTime.hours.padStart(2, '0')}:${eventTime.minutes.padStart(2, '0')}`,\n    text: eventText,\n  }\n  let updatedEvents = [...events]\n  if (editingEvent) {\n    updatedEvents = updatedEvents.map((event) =\u003e\n      event.id === editingEvent.id ? newEvent : event,\n    )\n  } else {\n    updatedEvents.push(newEvent)\n  }\n  updatedEvents.sort((a, b) =\u003e new Date(a.date) - new Date(b.date))\n  setEvents(updatedEvents)\n  setEventTime({ hours: '00', minutes: '00' })\n  setEventText('')\n  setShowEventPopup(false)\n  setEditingEvent(null)\n}\n```\n\n---\n\n### Calendar Navigation\n\n```javascript\nconst prevMonth = () =\u003e {\n  setCurrentMonth((prevMonth) =\u003e (prevMonth === 0 ? 11 : prevMonth - 1))\n  setCurrentYear((prevYear) =\u003e (currentMonth === 0 ? prevYear - 1 : prevYear))\n}\n\nconst nextMonth = () =\u003e {\n  setCurrentMonth((prevMonth) =\u003e (prevMonth === 11 ? 0 : prevMonth + 1))\n  setCurrentYear((prevYear) =\u003e (currentMonth === 11 ? prevYear + 1 : prevYear))\n}\n```\n\n---\n\n## Learning Points \u0026 Keywords\n\n- **React Functional Components**\n- **React useState Hook**\n- **Vite Project Setup**\n- **Component-Based Architecture**\n- **Event Handling in React**\n- **Conditional Rendering**\n- **Array Manipulation**\n- **Responsive CSS Design**\n- **Flexbox \u0026 Grid Layouts**\n- **UI/UX for Calendars and To-Do Apps**\n- **Popup Modal Implementation**\n- **Boxicons Usage**\n- **Code Organization and Cleanliness**\n- **Extendable for LocalStorage or Backend**\n\n---\n\n## Conclusion\n\nCalendar-To-Do--ReactVite is a simple yet powerful project to help you learn and demonstrate modern React and Vite workflow, state management, event handling, and responsive design. It’s a great codebase to extend with more features (authentication, storage, notifications, etc.) as you grow your skills!\n\n---\n\n## Happy Coding! 🚀\n\nThank you for exploring and using this project.  \nFeel free to fork, modify, and share with your friends and community!\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fcalendar-to-do--react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Fcalendar-to-do--react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fcalendar-to-do--react/lists"}