├── .changeset ├── README.md ├── config.json ├── pink-impalas-say.md ├── pre.json └── pretty-boxes-read.md ├── .github └── FUNDING.yml ├── .gitignore ├── .husky ├── commit-msg └── pre-commit ├── .npmrc ├── .prettierignore ├── .prettierrc.json ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── apps └── demo │ ├── CHANGELOG.md │ ├── components.json │ ├── eslint.config.mjs │ ├── messages │ ├── en.json │ └── es.json │ ├── next.config.ts │ ├── package.json │ ├── postcss.config.mjs │ ├── public │ ├── calendar-day.png │ ├── calendar-month.png │ ├── calendar-week.png │ ├── file.svg │ ├── globe.svg │ ├── next.svg │ ├── scene.splinecode │ ├── scene2.splinecode │ ├── scene3.splinecode │ ├── scene4.splinecode │ ├── vercel.svg │ └── window.svg │ ├── src │ ├── app │ │ ├── [locale] │ │ │ ├── calendar │ │ │ │ └── page.tsx │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── favicon.ico │ │ ├── layout.tsx │ │ ├── manifest.ts │ │ ├── not-found.tsx │ │ ├── robots.txt │ │ └── sitemap.ts │ ├── components │ │ ├── app-header.tsx │ │ ├── calendars.tsx │ │ ├── date-picker.tsx │ │ ├── flickering-grid.tsx │ │ ├── locale-switcher.tsx │ │ ├── sidebar-left.tsx │ │ ├── theme-switcher.tsx │ │ └── ui │ │ │ ├── avatar.tsx │ │ │ ├── badge.tsx │ │ │ ├── breadcrumb.tsx │ │ │ ├── button.tsx │ │ │ ├── calendar.tsx │ │ │ ├── card.tsx │ │ │ ├── collapsible.tsx │ │ │ ├── dropdown-menu.tsx │ │ │ ├── input.tsx │ │ │ ├── label.tsx │ │ │ ├── select.tsx │ │ │ ├── separator.tsx │ │ │ ├── sheet.tsx │ │ │ ├── sidebar.tsx │ │ │ ├── skeleton.tsx │ │ │ ├── tabs.tsx │ │ │ ├── toggle-group.tsx │ │ │ ├── toggle.tsx │ │ │ └── tooltip.tsx │ ├── config │ │ ├── deploy.ts │ │ └── meta.ts │ ├── data │ │ ├── events.json │ │ ├── events.ts │ │ └── seed.ts │ ├── fonts.ts │ ├── global.d.ts │ ├── hooks │ │ ├── use-fake-api.ts │ │ ├── use-get-all-search-params.ts │ │ ├── use-mobile.ts │ │ ├── use-mounted.ts │ │ └── use-swipe.ts │ ├── i18n │ │ ├── request.ts │ │ └── routing.ts │ ├── lib │ │ └── utils.ts │ ├── middleware.ts │ ├── providers │ │ └── query-provider.tsx │ └── styles │ │ └── globals.css │ ├── tailwind.config.ts │ └── tsconfig.json ├── commitlint.config.mjs ├── docs ├── installation.md ├── overview.md └── quick-start.md ├── package.json ├── packages ├── react-calendar-day │ ├── CHANGELOG.md │ ├── eslint.config.mjs │ ├── package.json │ ├── src │ │ ├── components │ │ │ ├── calendar-day-active-drag.tsx │ │ │ ├── calendar-day-active-resize.tsx │ │ │ ├── calendar-day-active-section.tsx │ │ │ ├── calendar-day-active-selection.tsx │ │ │ ├── calendar-day-axis.tsx │ │ │ ├── calendar-day-context-menu.tsx │ │ │ ├── calendar-day-event-card-content.tsx │ │ │ ├── calendar-day-events.tsx │ │ │ ├── calendar-day-header.tsx │ │ │ ├── calendar-day-time-indicator.tsx │ │ │ └── calendar-day-view.tsx │ │ ├── hooks │ │ │ ├── use-calendar-day-drag.ts │ │ │ ├── use-calendar-day-interaction.ts │ │ │ ├── use-calendar-day-resize.ts │ │ │ ├── use-calendar-day-selection.ts │ │ │ └── use-day-view-position.ts │ │ ├── index.ts │ │ └── lib │ │ │ └── utils.ts │ └── tsconfig.json ├── react-calendar-month │ ├── CHANGELOG.md │ ├── eslint.config.mjs │ ├── package.json │ ├── src │ │ ├── components │ │ │ ├── calendar-month-active-drag.tsx │ │ │ ├── calendar-month-active-resize.tsx │ │ │ ├── calendar-month-active-section.tsx │ │ │ ├── calendar-month-active-selection.tsx │ │ │ ├── calendar-month-context-menu.tsx │ │ │ ├── calendar-month-day.tsx │ │ │ ├── calendar-month-event-card-content.tsx │ │ │ ├── calendar-month-header.tsx │ │ │ └── calendar-month-view.tsx │ │ ├── hooks │ │ │ ├── use-calendar-month-drag.ts │ │ │ ├── use-calendar-month-interaction.ts │ │ │ ├── use-calendar-month-resize.ts │ │ │ ├── use-calendar-month-selection.ts │ │ │ └── use-month-view-position.ts │ │ ├── index.ts │ │ └── lib │ │ │ └── utils.ts │ └── tsconfig.json ├── react-calendar-range │ ├── CHANGELOG.md │ ├── eslint.config.mjs │ ├── package.json │ ├── src │ │ ├── components │ │ │ └── calendar-range-view.tsx │ │ └── index.ts │ └── tsconfig.json ├── react-calendar-ui │ ├── CHANGELOG.md │ ├── eslint.config.mjs │ ├── package.json │ ├── src │ │ ├── components │ │ │ ├── button.tsx │ │ │ ├── calendar-event-card.tsx │ │ │ ├── context-menu.tsx │ │ │ ├── dialog.tsx │ │ │ ├── drawer.tsx │ │ │ ├── form.tsx │ │ │ ├── input.tsx │ │ │ ├── label.tsx │ │ │ ├── radio-group.tsx │ │ │ ├── sheet.tsx │ │ │ └── sonner.tsx │ │ ├── hooks │ │ │ ├── use-dialog.tsx │ │ │ ├── use-media-query.tsx │ │ │ └── use-sheet.tsx │ │ ├── index.ts │ │ └── lib │ │ │ ├── utils.js │ │ │ └── utils.ts │ └── tsconfig.json ├── react-calendar-week │ ├── CHANGELOG.md │ ├── eslint.config.mjs │ ├── package.json │ ├── src │ │ ├── components │ │ │ └── calendar-week-view.tsx │ │ └── index.ts │ └── tsconfig.json └── react-calendar │ ├── CHANGELOG.md │ ├── eslint.config.mjs │ ├── package.json │ ├── src │ ├── components │ │ ├── calendar-event-card.tsx │ │ ├── calendar-event-form.tsx │ │ └── calendar.tsx │ ├── hooks │ │ ├── use-date-fragments.ts │ │ └── use-react-calendar.tsx │ ├── index.ts │ ├── lib │ │ ├── calendar.ts │ │ ├── time.ts │ │ └── utils.ts │ └── types.ts │ └── tsconfig.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml └── turbo.json /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": true, 5 | "fixed": [], 6 | "linked": [], 7 | "access": "public", 8 | "baseBranch": "main", 9 | "updateInternalDependencies": "patch", 10 | "ignore": [] 11 | } 12 | -------------------------------------------------------------------------------- /.changeset/pink-impalas-say.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@illostack/react-calendar-month": patch 3 | "@illostack/react-calendar-range": patch 4 | "@illostack/react-calendar-week": patch 5 | "@illostack/react-calendar-day": patch 6 | "@illostack/react-calendar-ui": patch 7 | "@illostack/react-calendar": patch 8 | --- 9 | 10 | fix: useDateFragments behabiour 11 | -------------------------------------------------------------------------------- /.changeset/pre.json: -------------------------------------------------------------------------------- 1 | { 2 | "mode": "pre", 3 | "tag": "beta", 4 | "initialVersions": { 5 | "demo": "0.0.1-beta.1", 6 | "@illostack/react-calendar": "0.0.1-beta.1", 7 | "@illostack/react-calendar-day": "0.0.1-beta.1", 8 | "@illostack/react-calendar-month": "0.0.1-beta.1", 9 | "@illostack/react-calendar-range": "0.0.1-beta.1", 10 | "@illostack/react-calendar-ui": "0.0.1-beta.1", 11 | "@illostack/react-calendar-week": "0.0.1-beta.1" 12 | }, 13 | "changesets": ["pink-impalas-say", "pretty-boxes-read"] 14 | } 15 | -------------------------------------------------------------------------------- /.changeset/pretty-boxes-read.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@illostack/react-calendar-month": patch 3 | "@illostack/react-calendar-range": patch 4 | "@illostack/react-calendar-week": patch 5 | "@illostack/react-calendar-day": patch 6 | "@illostack/react-calendar-ui": patch 7 | "@illostack/react-calendar": patch 8 | "demo": patch 9 | --- 10 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [illodev] 4 | patreon: IlloStack 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # Dependencies 4 | node_modules 5 | .pnp 6 | .pnp.js 7 | 8 | # Local env files 9 | .env 10 | .env.local 11 | .env.development.local 12 | .env.test.local 13 | .env.production.local 14 | next-env.d.ts 15 | 16 | # Testing 17 | coverage 18 | 19 | # Turbo 20 | .turbo 21 | 22 | # Vercel 23 | .vercel 24 | 25 | # Build Outputs 26 | .next/ 27 | out/ 28 | build 29 | dist 30 | 31 | 32 | # Debug 33 | npm-debug.log* 34 | yarn-debug.log* 35 | yarn-error.log* 36 | 37 | # Misc 38 | .DS_Store 39 | *.pem 40 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | npx --no -- commitlint --edit $1 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | pnpm lint-staged 4 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | # Configuración básica para npm 2 | 3 | # Establece el registro predeterminado 4 | registry=https://registry.npmjs.org/ 5 | 6 | # Configura el almacenamiento en caché 7 | cache=~/.npm-cache 8 | 9 | # Configura el prefijo global (opcional) 10 | prefix=~/.npm-global 11 | 12 | # Configura el nivel de registro (opcional) 13 | loglevel=warn -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | coverage 2 | public 3 | dist 4 | pnpm-lock.yaml 5 | pnpm-workspace.yaml 6 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": false, 3 | "arrowParens": "always", 4 | "trailingComma": "none", 5 | "printWidth": 80, 6 | "tabWidth": 2, 7 | "plugins": ["prettier-plugin-tailwindcss"] 8 | } 9 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.codeActionsOnSave": { 3 | "source.fixAll": "explicit", 4 | "source.organizeImports": "explicit", 5 | "source.sortMembers": "explicit" 6 | }, 7 | "eslint.workingDirectories": [ 8 | { 9 | "mode": "auto" 10 | } 11 | ], 12 | "typescript.enablePromptUseWorkspaceTsdk": true, 13 | "typescript.tsdk": "node_modules/typescript/lib" 14 | } 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Álvaro Jáuregui 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # IlloStack Calendar 2 | 3 | > [!IMPORTANT] 4 | > **This project is currently in development and not yet stable.** 5 | 6 | 7 | IlloStack Calendar is an open-source calendar with advanced features like drag & drop, customizable events, and multiple views (day, week, custom range, and month). It is designed to be highly flexible and extensible, allowing integration with other tools and full customization of events and styles. 8 | 9 | 10 | ## Features 11 | 12 | ### 📅 **Multiple and Modular Views** 13 | - **Day View**: Display a single day’s events. 14 | - **Week View**: See the events of an entire week. 15 | - **Custom Range View**: Define a custom date range for more flexibility. 16 | - **Month View**: View events for an entire month at a glance. 17 | - **More Views Coming Soon**: Stay tuned for additional viewing options! 18 | 19 | ### 🗓️ **Grid Selection** 20 | - Easily create events by selecting a time slot on the calendar grid. 21 | - Tooltips or previews will guide you during the selection process. 22 | 23 | ### ✨ **Drag & Drop** 24 | - Move events around with ease by dragging and dropping them into new time slots. 25 | - Constraints to avoid placing events outside of working hours or unavailable slots. 26 | 27 | ### 📋 **Context Menu** 28 | - Right-click on events for quick actions like: 29 | - Create, Edit, Delete, Copy, Cut, Paste, or Duplicate events. 30 | - Reschedule, Set Recurring, and View Event Details for better management. 31 | 32 | ### ⌨️ **Keyboard Shortcuts** 33 | - Navigate and manage events more efficiently with keyboard shortcuts. 34 | - Quick access to common actions like creating, editing, or deleting events. 35 | - Shortcuts guide within the UI for easy reference. 36 | 37 | ### 🌍 **Localization Support** 38 | - Full support for different languages and regional date/time formats. 39 | - Adapt the app to various time zones for global use. 40 | 41 | ### 🎨 **Custom Styling** 42 | - Modify the look and feel of your calendar with custom styles, colors, and layouts. 43 | - Import/export styling presets for easy customization across different instances. 44 | 45 | ### 🔗 **API for State & Events** 46 | - Centralized event and state management through an API. 47 | 48 | ### ⏰ **Working Hours Restrictions** 49 | - Configure working hours and hide non-working hours from view. 50 | - **Flexible Exceptions**: Define custom exceptions like holidays or special working hours. 51 | 52 | ### 🖌️ **Custom Decorators** 53 | - Add extra elements to the calendar to enrich the user experience. 54 | - Interactive decorators that can display event details upon clicking. 55 | 56 | ### 🔌 **Integration with External Services** 57 | - **Google Calendar Integration** (coming soon). 58 | - Future updates will include integrations with popular task management tools (e.g., Trello, Asana) for seamless event synchronization. 59 | -------------------------------------------------------------------------------- /apps/demo/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # demo 2 | 3 | ## 0.0.1-beta.2 4 | 5 | ### Patch Changes 6 | 7 | - Updated dependencies [ee62f92] 8 | - @illostack/react-calendar-month@0.0.1-beta.2 9 | - @illostack/react-calendar-range@0.0.1-beta.2 10 | - @illostack/react-calendar-week@0.0.1-beta.2 11 | - @illostack/react-calendar-day@0.0.1-beta.2 12 | - @illostack/react-calendar@0.0.1-beta.2 13 | 14 | ## 0.0.1-beta.1 15 | 16 | ### Patch Changes 17 | 18 | - 19 | - Updated dependencies 20 | - @illostack/react-calendar-month@0.0.1-beta.1 21 | - @illostack/react-calendar-range@0.0.1-beta.1 22 | - @illostack/react-calendar-week@0.0.1-beta.1 23 | - @illostack/react-calendar-day@0.0.1-beta.1 24 | - @illostack/react-calendar@0.0.1-beta.1 25 | -------------------------------------------------------------------------------- /apps/demo/components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "src/styles/globals.css", 9 | "baseColor": "zinc", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | }, 20 | "iconLibrary": "lucide" 21 | } 22 | -------------------------------------------------------------------------------- /apps/demo/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import { nextJsConfig } from "@illostack/eslint-config/next"; 2 | 3 | /** @type {import("eslint").Linter.Config} */ 4 | export default nextJsConfig; 5 | -------------------------------------------------------------------------------- /apps/demo/messages/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "Manifest": { 3 | "name": "Name" 4 | }, 5 | "calendar": { 6 | "days": { 7 | "0": { 8 | "short": "Sun", 9 | "long": "Sunday" 10 | }, 11 | "1": { 12 | "short": "Mon", 13 | "long": "Monday" 14 | }, 15 | "2": { 16 | "short": "Tue", 17 | "long": "Tuesday" 18 | }, 19 | "3": { 20 | "short": "Wed", 21 | "long": "Wednesday" 22 | }, 23 | "4": { 24 | "short": "Thu", 25 | "long": "Thursday" 26 | }, 27 | "5": { 28 | "short": "Fri", 29 | "long": "Friday" 30 | }, 31 | "6": { 32 | "short": "Sat", 33 | "long": "Saturday" 34 | } 35 | }, 36 | "months": { 37 | "0": { 38 | "short": "Jan", 39 | "long": "January" 40 | }, 41 | "1": { 42 | "short": "Feb", 43 | "long": "February" 44 | }, 45 | "2": { 46 | "short": "Mar", 47 | "long": "March" 48 | }, 49 | "3": { 50 | "short": "Apr", 51 | "long": "April" 52 | }, 53 | "4": { 54 | "short": "May", 55 | "long": "May" 56 | }, 57 | "5": { 58 | "short": "Jun", 59 | "long": "June" 60 | }, 61 | "6": { 62 | "short": "Jul", 63 | "long": "July" 64 | }, 65 | "7": { 66 | "short": "Aug", 67 | "long": "August" 68 | }, 69 | "8": { 70 | "short": "Sep", 71 | "long": "September" 72 | }, 73 | "9": { 74 | "short": "Oct", 75 | "long": "October" 76 | }, 77 | "10": { 78 | "short": "Nov", 79 | "long": "November" 80 | }, 81 | "11": { 82 | "short": "Dec", 83 | "long": "December" 84 | } 85 | } 86 | }, 87 | "literals": { 88 | "day": "Day", 89 | "days": "Days", 90 | "week": "Week", 91 | "month": "Month", 92 | "year": "Year", 93 | "range": "Range", 94 | "today": "Today", 95 | "previous": "Previous", 96 | "next": "Next", 97 | "more": "More", 98 | "go-to": "Go to" 99 | }, 100 | "form": { 101 | "save": "Save" 102 | }, 103 | "action": { 104 | "create-event": "Create event", 105 | "update-event": "Update event", 106 | "delete-event": "Delete event", 107 | "duplicate-event": "Duplicate event", 108 | "copy-event": "Copy event", 109 | "cut-event": "Cut event", 110 | "paste-event": "Paste event", 111 | "undo": "Undo" 112 | }, 113 | "message": { 114 | "event-created": "Event created", 115 | "event-updated": "Event updated", 116 | "event-deleted": "Event deleted", 117 | "event-restored": "Event restored", 118 | "event-duplicated": "Event duplicated", 119 | "event-copied": "Event copied", 120 | "event-cutted": "Event cutted", 121 | "event-pasted": "Event pasted", 122 | "event-not-found": "Event not found" 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /apps/demo/messages/es.json: -------------------------------------------------------------------------------- 1 | { 2 | "Manifest": { 3 | "name": "Nombre" 4 | }, 5 | "calendar": { 6 | "days": { 7 | "0": { 8 | "short": "Dom", 9 | "long": "Domingo" 10 | }, 11 | "1": { 12 | "short": "Lun", 13 | "long": "Lunes" 14 | }, 15 | "2": { 16 | "short": "Mar", 17 | "long": "Martes" 18 | }, 19 | "3": { 20 | "short": "Mié", 21 | "long": "Miércoles" 22 | }, 23 | "4": { 24 | "short": "Jue", 25 | "long": "Jueves" 26 | }, 27 | "5": { 28 | "short": "Vie", 29 | "long": "Viernes" 30 | }, 31 | "6": { 32 | "short": "Sáb", 33 | "long": "Sábado" 34 | } 35 | }, 36 | "months": { 37 | "0": { 38 | "short": "Ene", 39 | "long": "Enero" 40 | }, 41 | "1": { 42 | "short": "Feb", 43 | "long": "Febrero" 44 | }, 45 | "2": { 46 | "short": "Mar", 47 | "long": "Marzo" 48 | }, 49 | "3": { 50 | "short": "Abr", 51 | "long": "Abril" 52 | }, 53 | "4": { 54 | "short": "May", 55 | "long": "Mayo" 56 | }, 57 | "5": { 58 | "short": "Jun", 59 | "long": "Junio" 60 | }, 61 | "6": { 62 | "short": "Jul", 63 | "long": "Julio" 64 | }, 65 | "7": { 66 | "short": "Ago", 67 | "long": "Agosto" 68 | }, 69 | "8": { 70 | "short": "Sep", 71 | "long": "Septiembre" 72 | }, 73 | "9": { 74 | "short": "Oct", 75 | "long": "Octubre" 76 | }, 77 | "10": { 78 | "short": "Nov", 79 | "long": "Noviembre" 80 | }, 81 | "11": { 82 | "short": "Dic", 83 | "long": "Diciembre" 84 | } 85 | } 86 | }, 87 | "literals": { 88 | "day": "Día", 89 | "days": "Días", 90 | "week": "Semana", 91 | "month": "Mes", 92 | "year": "Año", 93 | "range": "Rango", 94 | "today": "Hoy", 95 | "previous": "Anterior", 96 | "next": "Siguiente", 97 | "more": "Más", 98 | "go-to": "Ir a" 99 | }, 100 | "form": { 101 | "save": "Guardar" 102 | }, 103 | "action": { 104 | "create-event": "Crear evento", 105 | "update-event": "Actualizar evento", 106 | "delete-event": "Eliminar evento", 107 | "duplicate-event": "Duplicar evento", 108 | "copy-event": "Copiar evento", 109 | "cut-event": "Cortar evento", 110 | "paste-event": "Pegar evento", 111 | "undo": "Deshacer" 112 | }, 113 | "message": { 114 | "event-created": "Evento creado", 115 | "event-updated": "Evento actualizado", 116 | "event-deleted": "Evento eliminado", 117 | "event-restored": "Evento restaurado", 118 | "event-duplicated": "Evento duplicado", 119 | "event-copied": "Evento copiado", 120 | "event-cutted": "Evento cortado", 121 | "event-pasted": "Evento pegado", 122 | "event-not-found": "Evento no encontrado" 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /apps/demo/next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | import createNextIntlPlugin from "next-intl/plugin"; 3 | 4 | const withNextIntl = createNextIntlPlugin(); 5 | 6 | const nextConfig: NextConfig = { 7 | images: { 8 | remotePatterns: [ 9 | { 10 | hostname: "images.unsplash.com" 11 | } 12 | ] 13 | } 14 | }; 15 | 16 | export default withNextIntl(nextConfig); 17 | -------------------------------------------------------------------------------- /apps/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo", 3 | "version": "0.0.1-beta.2", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev --turbopack", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint --max-warnings 0", 10 | "check-types": "tsc --noEmit" 11 | }, 12 | "dependencies": { 13 | "@illostack/react-calendar": "workspace:*", 14 | "@illostack/react-calendar-day": "workspace:*", 15 | "@illostack/react-calendar-month": "workspace:*", 16 | "@illostack/react-calendar-range": "workspace:*", 17 | "@illostack/react-calendar-week": "workspace:*", 18 | "@radix-ui/react-avatar": "^1.1.4", 19 | "@radix-ui/react-collapsible": "^1.1.4", 20 | "@radix-ui/react-dialog": "^1.1.7", 21 | "@radix-ui/react-dropdown-menu": "^2.1.7", 22 | "@radix-ui/react-label": "^2.1.3", 23 | "@radix-ui/react-select": "^2.1.7", 24 | "@radix-ui/react-separator": "^1.1.3", 25 | "@radix-ui/react-slot": "^1.2.0", 26 | "@radix-ui/react-tabs": "^1.1.4", 27 | "@radix-ui/react-toggle": "^1.1.3", 28 | "@radix-ui/react-toggle-group": "^1.1.3", 29 | "@radix-ui/react-tooltip": "^1.2.0", 30 | "@react-native-async-storage/async-storage": "^2.1.2", 31 | "@tanstack/query-async-storage-persister": "^5.73.1", 32 | "@tanstack/react-query": "^5.72.2", 33 | "@tanstack/react-query-devtools": "^5.72.2", 34 | "@tanstack/react-query-next-experimental": "^5.72.2", 35 | "@tanstack/react-query-persist-client": "^5.73.1", 36 | "class-variance-authority": "^0.7.1", 37 | "clsx": "^2.1.1", 38 | "lucide-react": "^0.474.0", 39 | "next": "^15.3.0", 40 | "next-intl": "^4.0.2", 41 | "next-themes": "^0.4.6", 42 | "nuqs": "^2.4.1", 43 | "react": "^19.1.0", 44 | "react-day-picker": "^8.10.1", 45 | "react-dom": "^19.1.0", 46 | "tailwind-merge": "^2.6.0", 47 | "tailwindcss-animate": "^1.0.7" 48 | }, 49 | "devDependencies": { 50 | "@faker-js/faker": "^9.6.0", 51 | "@illostack/eslint-config": "^0.0.3", 52 | "@illostack/typescript-config": "^0.0.3", 53 | "@types/node": "^22.14.0", 54 | "@types/react": "19.0.10", 55 | "@types/react-dom": "19.0.4", 56 | "eslint": "^9.24.0", 57 | "postcss": "^8.5.3", 58 | "tailwindcss": "^3.4.17", 59 | "typescript": "5.8.2" 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /apps/demo/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {} 5 | } 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /apps/demo/public/calendar-day.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IlloStack/calendar/013ef14f8db4949184cb5a146787417c7fc6c4c7/apps/demo/public/calendar-day.png -------------------------------------------------------------------------------- /apps/demo/public/calendar-month.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IlloStack/calendar/013ef14f8db4949184cb5a146787417c7fc6c4c7/apps/demo/public/calendar-month.png -------------------------------------------------------------------------------- /apps/demo/public/calendar-week.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IlloStack/calendar/013ef14f8db4949184cb5a146787417c7fc6c4c7/apps/demo/public/calendar-week.png -------------------------------------------------------------------------------- /apps/demo/public/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/demo/public/globe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/demo/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/demo/public/scene.splinecode: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IlloStack/calendar/013ef14f8db4949184cb5a146787417c7fc6c4c7/apps/demo/public/scene.splinecode -------------------------------------------------------------------------------- /apps/demo/public/scene2.splinecode: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IlloStack/calendar/013ef14f8db4949184cb5a146787417c7fc6c4c7/apps/demo/public/scene2.splinecode -------------------------------------------------------------------------------- /apps/demo/public/scene3.splinecode: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IlloStack/calendar/013ef14f8db4949184cb5a146787417c7fc6c4c7/apps/demo/public/scene3.splinecode -------------------------------------------------------------------------------- /apps/demo/public/scene4.splinecode: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IlloStack/calendar/013ef14f8db4949184cb5a146787417c7fc6c4c7/apps/demo/public/scene4.splinecode -------------------------------------------------------------------------------- /apps/demo/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/demo/public/window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/demo/src/app/[locale]/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { NextIntlClientProvider } from "next-intl"; 3 | import { getMessages, setRequestLocale } from "next-intl/server"; 4 | import { ThemeProvider } from "next-themes"; 5 | import { Geist } from "next/font/google"; 6 | import { notFound } from "next/navigation"; 7 | import { NuqsAdapter } from "nuqs/adapters/next/app"; 8 | 9 | import meta from "@/config/meta"; 10 | import { Locale, routing } from "@/i18n/routing"; 11 | import { QueryProvider } from "@/providers/query-provider"; 12 | import "@/styles/globals.css"; 13 | 14 | const geistSans = Geist({ 15 | variable: "--font-geist-sans", 16 | subsets: ["latin"] 17 | }); 18 | 19 | export const metadata: Metadata = { 20 | title: meta.title, 21 | description: meta.description, 22 | keywords: meta.keywords 23 | }; 24 | 25 | export default async function RootLayout({ 26 | children, 27 | params 28 | }: Readonly<{ 29 | children: React.ReactNode; 30 | params: Promise<{ 31 | locale: string; 32 | }>; 33 | }>) { 34 | const { locale } = await params; 35 | 36 | if (!routing.locales.includes(locale as Locale)) { 37 | notFound(); 38 | } 39 | 40 | setRequestLocale(locale); 41 | 42 | const messages = await getMessages(); 43 | 44 | return ( 45 | 46 | 49 | 50 | 51 | 52 | 58 | {children} 59 | 60 | 61 | 62 | 63 | 64 | 65 | ); 66 | } 67 | -------------------------------------------------------------------------------- /apps/demo/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IlloStack/calendar/013ef14f8db4949184cb5a146787417c7fc6c4c7/apps/demo/src/app/favicon.ico -------------------------------------------------------------------------------- /apps/demo/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import "@/styles/globals.css"; 2 | import { ReactNode } from "react"; 3 | 4 | type Props = { 5 | children: ReactNode; 6 | }; 7 | 8 | export default function RootLayout({ children }: Props) { 9 | return children; 10 | } 11 | -------------------------------------------------------------------------------- /apps/demo/src/app/manifest.ts: -------------------------------------------------------------------------------- 1 | import { MetadataRoute } from "next"; 2 | import { getTranslations } from "next-intl/server"; 3 | 4 | export default async function manifest(): Promise { 5 | const locale = "en"; 6 | const t = await getTranslations({ locale, namespace: "Manifest" }); 7 | 8 | return { 9 | name: t("name"), 10 | start_url: "/", 11 | theme_color: "#101E33" 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /apps/demo/src/app/not-found.tsx: -------------------------------------------------------------------------------- 1 | import { NextIntlClientProvider } from "next-intl"; 2 | import { getMessages } from "next-intl/server"; 3 | import { ThemeProvider } from "next-themes"; 4 | import { Geist } from "next/font/google"; 5 | 6 | const geistSans = Geist({ 7 | variable: "--font-geist-sans", 8 | subsets: ["latin"] 9 | }); 10 | 11 | export default async function GlobalNotFound() { 12 | const messages = await getMessages({ 13 | locale: "en" 14 | }); 15 | 16 | return ( 17 | 18 | 19 | 22 | 23 | 24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
35 |
36 |
37 |
38 |
39 |
40 | Not Found 41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | 49 | 50 | 51 | 52 | ); 53 | } 54 | -------------------------------------------------------------------------------- /apps/demo/src/app/robots.txt: -------------------------------------------------------------------------------- 1 | User-Agent: * 2 | Allow: * -------------------------------------------------------------------------------- /apps/demo/src/app/sitemap.ts: -------------------------------------------------------------------------------- 1 | import { host } from "@/config/deploy"; 2 | import { Locale, getPathname, routing } from "@/i18n/routing"; 3 | import { MetadataRoute } from "next"; 4 | 5 | export default function sitemap(): MetadataRoute.Sitemap { 6 | return [getEntry("/")]; 7 | } 8 | 9 | type Href = Parameters[0]["href"]; 10 | 11 | function getEntry(href: Href) { 12 | return { 13 | url: getUrl(href, routing.defaultLocale), 14 | alternates: { 15 | languages: Object.fromEntries( 16 | routing.locales.map((locale) => [locale, getUrl(href, locale)]) 17 | ) 18 | } 19 | }; 20 | } 21 | 22 | function getUrl(href: Href, locale: Locale) { 23 | const pathname = getPathname({ locale, href }); 24 | return host + pathname; 25 | } 26 | -------------------------------------------------------------------------------- /apps/demo/src/components/calendars.tsx: -------------------------------------------------------------------------------- 1 | import { Check, ChevronRight } from "lucide-react"; 2 | import * as React from "react"; 3 | 4 | import { 5 | Collapsible, 6 | CollapsibleContent, 7 | CollapsibleTrigger 8 | } from "@/components/ui/collapsible"; 9 | import { 10 | SidebarGroup, 11 | SidebarGroupContent, 12 | SidebarGroupLabel, 13 | SidebarMenu, 14 | SidebarMenuButton, 15 | SidebarMenuItem, 16 | SidebarSeparator 17 | } from "@/components/ui/sidebar"; 18 | 19 | export function Calendars({ 20 | calendars 21 | }: { 22 | calendars: { 23 | name: string; 24 | items: string[]; 25 | }[]; 26 | }) { 27 | return ( 28 | <> 29 | {calendars.map((calendar, index) => ( 30 | 31 | 32 | 36 | 40 | 41 | {calendar.name} 42 | 43 | 44 | 45 | 46 | 47 | 48 | {calendar.items.map((item, index) => ( 49 | 50 | 51 |
55 | 56 |
57 | {item} 58 | 59 | 60 | ))} 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | ))} 69 | 70 | ); 71 | } 72 | -------------------------------------------------------------------------------- /apps/demo/src/components/date-picker.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useCalendar } from "@illostack/react-calendar"; 4 | import { useLocale, useTranslations } from "next-intl"; 5 | import * as React from "react"; 6 | 7 | import { Calendar } from "@/components/ui/calendar"; 8 | import { SidebarGroup, SidebarGroupContent } from "@/components/ui/sidebar"; 9 | 10 | export function DatePicker() { 11 | const locale = useLocale(); 12 | const t = useTranslations(); 13 | const calendar = useCalendar(); 14 | 15 | const dates = calendar 16 | .useWatch((state) => state.dates) 17 | .filter((d) => !d.isOutside); 18 | const date = calendar.useWatch((state) => state.date); 19 | const view = calendar.useWatch((state) => state.view); 20 | 21 | const selected = React.useMemo(() => { 22 | const firstDay = dates.at(0)?.date as Date; 23 | const lastDay = dates.at(-1)?.date as Date; 24 | 25 | return { 26 | from: firstDay, 27 | to: lastDay 28 | }; 29 | }, [dates]); 30 | 31 | return ( 32 | 33 | 34 | t(`calendar.days.${day}.short`), 44 | month: (month) => t(`calendar.months.${month}.long`), 45 | ordinalNumber: (n) => n.toString(), 46 | era: () => "", 47 | quarter: () => "", 48 | dayPeriod: () => "" 49 | } 50 | }} 51 | defaultMonth={date} 52 | weekStartsOn={locale === "es" ? 1 : 0} 53 | onDayClick={(day) => calendar.changeDate(day)} 54 | className="[&_td:has([role=gridcell].bg-primary)]:bg-sidebar-foreground/10 [&_[role=gridcell].bg-primary]:text-sidebar-foreground [&_[role=gridcell].bg-accent]:!bg-sidebar-primary [&_[role=gridcell].bg-accent]:!text-sidebar-primary-foreground [&_[role=gridcell].bg-accent]:!rounded-md [&_[role=gridcell].bg-primary]:rounded-none [&_[role=gridcell]]:!bg-transparent" 55 | /> 56 | 57 | 58 | ); 59 | } 60 | -------------------------------------------------------------------------------- /apps/demo/src/components/locale-switcher.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useLocale } from "next-intl"; 4 | import { useParams } from "next/navigation"; 5 | import * as React from "react"; 6 | 7 | import { Button } from "@/components/ui/button"; 8 | import { 9 | Select, 10 | SelectContent, 11 | SelectGroup, 12 | SelectItem, 13 | SelectTrigger, 14 | SelectValue 15 | } from "@/components/ui/select"; 16 | import { useGetAllSearchParams } from "@/hooks/use-get-all-search-params"; 17 | import { Locale, localesMap, usePathname, useRouter } from "@/i18n/routing"; 18 | import { cn } from "@/lib/utils"; 19 | 20 | type LocaleSwitcherProps = React.ComponentProps; 21 | 22 | const LocaleSwitcher = React.forwardRef( 23 | ({ className, ...props }, ref) => { 24 | const locale = useLocale(); 25 | const router = useRouter(); 26 | const pathname = usePathname(); 27 | const params = useParams(); 28 | const query = useGetAllSearchParams(); 29 | const [isPending, startTransition] = React.useTransition(); 30 | 31 | function onSelectChange(value: Locale) { 32 | startTransition(() => { 33 | router.replace( 34 | // @ts-expect-error -- TypeScript will validate that only known `params` 35 | // are used in combination with a given `pathname`. Since the two will 36 | // always match for the current route, we can skip runtime checks. 37 | { pathname, params, query }, 38 | { locale: value } 39 | ); 40 | }); 41 | } 42 | 43 | return ( 44 | 71 | ); 72 | } 73 | ); 74 | 75 | LocaleSwitcher.displayName = "LocaleSwitcher"; 76 | 77 | export { LocaleSwitcher }; 78 | -------------------------------------------------------------------------------- /apps/demo/src/components/theme-switcher.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { MoonIcon, SunIcon } from "lucide-react"; 4 | import { useTheme } from "next-themes"; 5 | import * as React from "react"; 6 | 7 | import { Button } from "@/components/ui/button"; 8 | import { Skeleton } from "@/components/ui/skeleton"; 9 | import { useMounted } from "@/hooks/use-mounted"; 10 | import { cn } from "@/lib/utils"; 11 | 12 | const themes = [ 13 | { 14 | label: "Claro", 15 | value: "light", 16 | icon: SunIcon 17 | }, 18 | { 19 | label: "Oscuro", 20 | value: "dark", 21 | icon: MoonIcon 22 | } 23 | ]; 24 | 25 | type ThemeSwitcherProps = React.ComponentProps; 26 | 27 | const ThemeSwitcher = React.forwardRef( 28 | ({ className, ...props }, ref) => { 29 | const mounted = useMounted(); 30 | const { theme, setTheme } = useTheme(); 31 | 32 | const selectedTheme = React.useMemo( 33 | () => themes.find((t) => t.value !== theme) || themes[0], 34 | [theme] 35 | ) as (typeof themes)[number]; 36 | 37 | if (!mounted) { 38 | return ; 39 | } 40 | 41 | return ( 42 | 55 | ); 56 | } 57 | ); 58 | 59 | ThemeSwitcher.displayName = "ThemeSwitcher"; 60 | 61 | export { ThemeSwitcher }; 62 | -------------------------------------------------------------------------------- /apps/demo/src/components/ui/avatar.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as React from "react"; 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"; 5 | 6 | import { cn } from "@/lib/utils"; 7 | 8 | const Avatar = React.forwardRef< 9 | React.ElementRef, 10 | React.ComponentPropsWithoutRef 11 | >(({ className, ...props }, ref) => ( 12 | 20 | )); 21 | Avatar.displayName = AvatarPrimitive.Root.displayName; 22 | 23 | const AvatarImage = React.forwardRef< 24 | React.ElementRef, 25 | React.ComponentPropsWithoutRef 26 | >(({ className, ...props }, ref) => ( 27 | 32 | )); 33 | AvatarImage.displayName = AvatarPrimitive.Image.displayName; 34 | 35 | const AvatarFallback = React.forwardRef< 36 | React.ElementRef, 37 | React.ComponentPropsWithoutRef 38 | >(({ className, ...props }, ref) => ( 39 | 47 | )); 48 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; 49 | 50 | export { Avatar, AvatarImage, AvatarFallback }; 51 | -------------------------------------------------------------------------------- /apps/demo/src/components/ui/badge.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { cva, type VariantProps } from "class-variance-authority"; 3 | 4 | import { cn } from "@/lib/utils"; 5 | 6 | const badgeVariants = cva( 7 | "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", 8 | { 9 | variants: { 10 | variant: { 11 | default: 12 | "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80", 13 | secondary: 14 | "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", 15 | destructive: 16 | "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80", 17 | outline: "text-foreground" 18 | } 19 | }, 20 | defaultVariants: { 21 | variant: "default" 22 | } 23 | } 24 | ); 25 | 26 | export interface BadgeProps 27 | extends React.HTMLAttributes, 28 | VariantProps {} 29 | 30 | function Badge({ className, variant, ...props }: BadgeProps) { 31 | return ( 32 |
33 | ); 34 | } 35 | 36 | export { Badge, badgeVariants }; 37 | -------------------------------------------------------------------------------- /apps/demo/src/components/ui/breadcrumb.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Slot } from "@radix-ui/react-slot"; 3 | import { ChevronRight, MoreHorizontal } from "lucide-react"; 4 | 5 | import { cn } from "@/lib/utils"; 6 | 7 | const Breadcrumb = React.forwardRef< 8 | HTMLElement, 9 | React.ComponentPropsWithoutRef<"nav"> & { 10 | separator?: React.ReactNode; 11 | } 12 | >(({ ...props }, ref) =>