{"id":27991918,"url":"https://github.com/dvhcoding/calendar-ui","last_synced_at":"2025-10-18T06:48:08.683Z","repository":{"id":282527281,"uuid":"948881070","full_name":"DVHcoding/Calendar-UI","owner":"DVHcoding","description":"Calendar-UI is a modern, feature-rich calendar application designed to streamline scheduling and task management for individuals and teams.","archived":false,"fork":false,"pushed_at":"2025-03-15T07:00:42.000Z","size":116,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-15T08:18:12.528Z","etag":null,"topics":["calendar","design","schedule"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DVHcoding.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2025-03-15T06:56:32.000Z","updated_at":"2025-03-15T07:00:46.000Z","dependencies_parsed_at":"2025-03-16T14:45:37.258Z","dependency_job_id":null,"html_url":"https://github.com/DVHcoding/Calendar-UI","commit_stats":null,"previous_names":["dvhcoding/calendar-ui"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DVHcoding%2FCalendar-UI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DVHcoding%2FCalendar-UI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DVHcoding%2FCalendar-UI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DVHcoding%2FCalendar-UI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DVHcoding","download_url":"https://codeload.github.com/DVHcoding/Calendar-UI/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253124237,"owners_count":21857611,"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","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","design","schedule"],"created_at":"2025-05-08T17:55:35.912Z","updated_at":"2025-10-18T06:48:03.653Z","avatar_url":"https://github.com/DVHcoding.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Calendar-UI\n\n**Calendar-UI** is a modern, feature-rich calendar application designed to streamline scheduling and task management for individuals and teams. Built with cutting-edge technologies like Next.js, React, and Tailwind CSS, it offers a visually appealing, accessible, and highly interactive user interface. Whether you're coordinating work meetings, tracking personal tasks, or planning educational commitments, calendar.me provides a seamless experience with robust features tailored to your needs.\n\n![Calendar-UI Interface](https://learnlangs24h.s3.ap-southeast-2.amazonaws.com/uploads/ZVWQVUEd-tPaUnTjXSoTx.webp)  \n_Screenshot of the Calendar-UI interface displaying a weekly schedule view for March 2025._\n\n## Features\n\nCalendar-UI is packed with functionalities to enhance productivity and user experience:\n\n- **Multi-View Calendar**: Switch between month, week, and day views using intuitive tabs (powered by `@radix-ui/react-tabs`) to visualize your schedule effectively.\n- **Event Management**: Create, edit, and delete events with a user-friendly form system (via `react-hook-form` and `zod` for validation). Events can include titles, categories, dates, times, and attendees.\n- **Color-Coded Categories**: Organize events into categories like \"Work\" (purple), \"Personal\" (blue), and \"Education\" (gray), styled with `tailwindcss` and managed via `@radix-ui/react-select`.\n- **Team Collaboration**: Add teammates to events and view their availability with profile avatars (using `@radix-ui/react-avatar`) and interactive popovers (via `@radix-ui/react-popover`).\n- **Date Picking**: Select dates effortlessly with an integrated date picker (powered by `react-day-picker` and `date-fns` for date manipulation).\n- **Responsive Design**: Enjoy a consistent experience across desktop, tablet, and mobile devices, thanks to Tailwind CSS’s responsive utilities.\n- **Theme Support**: Toggle between light and dark modes with `next-themes`, enhancing accessibility and user comfort.\n- **Interactive UI Components**: Leverage a variety of Radix UI primitives (e.g., dropdowns, dialogs, tooltips) for a polished and accessible interface.\n- **Toast Notifications**: Receive feedback on actions like event creation or deletion with `sonner` toast notifications.\n- **Error Handling**: Robust error management with `react-error-boundary` ensures a smooth user experience even when issues arise.\n\n### Interface Highlights\n\nThe Calendar-UI interface offers a clean and modern layout:\n\n- **Left Sidebar**: Features a dark-themed panel with profile avatars, a \"My Calendars\" dropdown, categorized events, and a \"+\" button for adding new items.\n- **Calendar Panel**: Displays a month view (e.g., October 2023) with highlighted dates and navigation arrows, styled with Tailwind CSS gradients.\n- **Weekly Schedule**: Shows a grid of time slots and events (e.g., \"Team meeting,\" \"Study time\") with color-coded blocks and popovers for event details.\n\n## Technologies Used\n\nCalendar-UI is built with a modern, performant tech stack:\n\n### Core Framework\n\n- **[Next.js](https://nextjs.org/)** (`15.1.0`): A React framework for server-side rendering, static generation, and optimized performance.\n- **[React](https://react.dev/)** (`^19`): A JavaScript library for building dynamic, component-based UIs.\n- **[React DOM](https://react.dev/)** (`^19`): Handles DOM rendering for React components.\n\n### Styling\n\n- **[Tailwind CSS](https://tailwindcss.com/)** (`^3.4.17`): A utility-first CSS framework for rapid, responsive styling.\n- **[tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)** (`^1.0.7`): Adds animation utilities to Tailwind CSS for smooth transitions.\n- **[tailwind-merge](https://github.com/dcastil/tailwind-merge)** (`^2.5.5`): Merges Tailwind classes efficiently, reducing conflicts.\n- **[class-variance-authority](https://cva.style/)** (`^0.7.1`): Manages component variants for consistent styling.\n- **[clsx](https://github.com/lukeed/clsx)** (`^2.1.1`): A utility for conditionally joining class names.\n\n### UI Components\n\n- **Radix UI Primitives** (various versions): Accessible, unstyled components customized with Tailwind CSS:\n  - `@radix-ui/react-accordion`, `@radix-ui/react-alert-dialog`, `@radix-ui/react-avatar`, `@radix-ui/react-checkbox`, `@radix-ui/react-collapsible`, `@radix-ui/react-context-menu`, `@radix-ui/react-dialog`, `@radix-ui/react-dropdown-menu`, `@radix-ui/react-hover-card`, `@radix-ui/react-label`, `@radix-ui/react-menubar`, `@radix-ui/react-navigation-menu`, `@radix-ui/react-popover`, `@radix-ui/react-progress`, `@radix-ui/react-radio-group`, `@radix-ui/react-scroll-area`, `@radix-ui/react-select`, `@radix-ui/react-separator`, `@radix-ui/react-slider`, `@radix-ui/react-slot`, `@radix-ui/react-switch`, `@radix-ui/react-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-toggle`, `@radix-ui/react-toggle-group`, `@radix-ui/react-tooltip`.\n- **[vaul](https://github.com/emilkowalski/vaul)** (`^0.9.6`): A drawer component for mobile-friendly modals.\n- **[cmdk](https://cmdk.paco.me/)** (`1.0.4`): A command palette component for quick navigation.\n- **[react-resizable-panels](https://github.com/bvaughn/react-resizable-panels)** (`^2.1.7`): Resizable layout panels for flexible UI design.\n\n### Form and Validation\n\n- **[React Hook Form](https://react-hook-form.com/)** (`^7.54.1`): Efficient form handling and validation.\n- **[Zod](https://zod.dev/)** (`^3.24.1`): Schema validation library, integrated with React Hook Form via `@hookform/resolvers` (`^3.9.1`).\n\n### Date and Time\n\n- **[date-fns](https://date-fns.org/)** (`latest`): Lightweight date manipulation library.\n- **[React Day Picker](https://react-day-picker.js.org/)** (`8.10.1`): A customizable date picker component.\n\n### Visual Enhancements\n\n- **[Lucide React](https://lucide.dev/)** (`^0.454.0`): Open-source icons for consistent visual elements.\n- **[embla-carousel-react](https://www.embla-carousel.com/)** (`8.5.1`): A lightweight carousel library for slideshows or event previews.\n- **[recharts](https://recharts.org/)** (`2.15.0`): A charting library for data visualization (e.g., task completion trends).\n- **[sonner](https://sonner.emilkowalski.dev/)** (`^1.7.1`): Elegant toast notifications for user feedback.\n- **[input-otp](https://github.com/guilhermerodz/input-otp)** (`1.4.1`): A component for one-time password inputs (if applicable).\n\n### Utilities\n\n- **[Next Themes](https://github.com/pacocoursey/next-themes)** (`^0.4.4`): Theme management for light/dark mode support.\n- **[React Error Boundary](https://github.com/bvaughn/react-error-boundary)** (`latest`): Graceful error handling in React components.\n- **[autoprefixer](https://github.com/postcss/autoprefixer)** (`^10.4.20`): Adds vendor prefixes to CSS for broader compatibility.\n- **[postcss](https://postcss.org/)** (`^8`): A tool for transforming CSS with plugins like Tailwind CSS.\n\n### Development Tools\n\n- **[TypeScript](https://www.typescriptlang.org/)** (`^5`): Static typing for improved code quality and developer experience.\n- **Type Definitions**: `@types/node` (`^22`), `@types/react` (`^19`), `@types/react-dom` (`^19`) for TypeScript support.\n\n## Installation\n\nTo set up Calendar-UI locally, follow these steps:\n\n1. **Clone the Repository**:\n   ```bash\n   git clone https://github.com/DVHcoding/Calendar-UI.git\n   cd Calendar-UI\n   ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdvhcoding%2Fcalendar-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdvhcoding%2Fcalendar-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdvhcoding%2Fcalendar-ui/lists"}