{"_id":"@agsci/fullcalendar-svelte-shadcn","name":"@agsci/fullcalendar-svelte-shadcn","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@agsci/fullcalendar-svelte-shadcn","version":"0.1.0","description":"A Svelte 5 component library wrapping FullCalendar with shadcn-svelte styling. Fully themeable, dark mode ready, TypeScript support.","license":"MIT","author":{"name":"Kaustubh Bhalerao"},"repository":{"type":"git","url":"git+https://github.com/kbhalerao/fullcalendar-svelte-shadcn.git"},"homepage":"https://github.com/kbhalerao/fullcalendar-svelte-shadcn#readme","bugs":{"url":"https://github.com/kbhalerao/fullcalendar-svelte-shadcn/issues"},"scripts":{"dev":"vite dev","build":"vite build && npm run prepack","preview":"vite preview","prepare":"svelte-kit sync || echo ''","prepack":"svelte-kit sync && svelte-package && publint","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","format":"prettier --write .","lint":"prettier --check . && eslint ."},"sideEffects":["**/*.css"],"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"},"./styles":{"import":"./dist/styles/calendar.css"},"./styles/calendar.css":{"import":"./dist/styles/calendar.css"}},"peerDependencies":{"@fullcalendar/core":"^6.1.0","svelte":"^5.0.0"},"peerDependenciesMeta":{"@fullcalendar/daygrid":{"optional":true},"@fullcalendar/timegrid":{"optional":true},"@fullcalendar/list":{"optional":true},"@fullcalendar/interaction":{"optional":true}},"devDependencies":{"@eslint/compat":"^1.4.0","@eslint/js":"^9.39.1","@fullcalendar/core":"^6.1.19","@fullcalendar/daygrid":"^6.1.19","@fullcalendar/interaction":"^6.1.19","@fullcalendar/list":"^6.1.19","@fullcalendar/timegrid":"^6.1.19","@internationalized/date":"^3.10.0","@lucide/svelte":"^0.544.0","@sveltejs/adapter-cloudflare":"^7.2.4","@sveltejs/kit":"^2.48.5","@sveltejs/package":"^2.5.6","@sveltejs/vite-plugin-svelte":"^6.2.1","@tailwindcss/forms":"^0.5.10","@tailwindcss/typography":"^0.5.19","@tailwindcss/vite":"^4.1.17","@types/node":"^22","bits-ui":"^2.14.4","clsx":"^2.1.1","eslint":"^9.39.1","eslint-config-prettier":"^10.1.8","eslint-plugin-svelte":"^3.13.0","globals":"^16.5.0","prettier":"^3.6.2","prettier-plugin-svelte":"^3.4.0","prettier-plugin-tailwindcss":"^0.7.1","publint":"^0.3.15","svelte":"^5.43.8","svelte-check":"^4.3.4","tailwind-merge":"^3.4.0","tailwind-variants":"^3.2.2","tailwindcss":"^4.1.17","tw-animate-css":"^1.4.0","typescript":"^5.9.3","typescript-eslint":"^8.47.0","vite":"^7.2.2","vite-plugin-devtools-json":"^1.0.0","zod":"^4.1.13"},"keywords":["svelte","svelte5","sveltekit","fullcalendar","calendar","shadcn","shadcn-svelte","ui","components"],"_id":"@agsci/fullcalendar-svelte-shadcn@0.1.0","gitHead":"f15978f9927b45cc07811bef848c22b05e4ce385","_nodeVersion":"22.16.0","_npmVersion":"11.6.0","dist":{"integrity":"sha512-10PJuiJmQGn/R2eGNsV6DTbYoETEG/QAfpNQnZ06EhaNTLNrfWW+LVSkIPvWUI+MrRe7Rqf6NNl+Cu0mPja+wA==","shasum":"95d9251f61f347652377b86699ac68f7f18824ec","tarball":"https://registry.npmjs.org/@agsci/fullcalendar-svelte-shadcn/-/fullcalendar-svelte-shadcn-0.1.0.tgz","fileCount":168,"unpackedSize":166613,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD2Lwd7OhG+e/4SQPkXB1R67Cvszu4yPsQt9xRjqS7v+AIhAKWIQ2X2Dueqkdgr6bSBwSB8rS57Q/81RWChHPeQ+urH"}]},"_npmUser":{"name":"kbhalerao","email":"bhalerao@soildiagnostics.com"},"directories":{},"maintainers":[{"name":"kbhalerao","email":"bhalerao@soildiagnostics.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/fullcalendar-svelte-shadcn_0.1.0_1765230294813_0.2416426077378211"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-08T21:44:54.731Z","0.1.0":"2025-12-08T21:44:54.983Z","modified":"2025-12-08T21:44:55.283Z"},"maintainers":[{"name":"kbhalerao","email":"bhalerao@soildiagnostics.com"}],"description":"A Svelte 5 component library wrapping FullCalendar with shadcn-svelte styling. Fully themeable, dark mode ready, TypeScript support.","homepage":"https://github.com/kbhalerao/fullcalendar-svelte-shadcn#readme","keywords":["svelte","svelte5","sveltekit","fullcalendar","calendar","shadcn","shadcn-svelte","ui","components"],"repository":{"type":"git","url":"git+https://github.com/kbhalerao/fullcalendar-svelte-shadcn.git"},"author":{"name":"Kaustubh Bhalerao"},"bugs":{"url":"https://github.com/kbhalerao/fullcalendar-svelte-shadcn/issues"},"license":"MIT","readme":"# FullCalendar Svelte + shadcn\n\nA Svelte 5 component library wrapping [FullCalendar](https://fullcalendar.io) with [shadcn-svelte](https://shadcn-svelte.com) styling. Fully themeable, accessible, and designed to integrate seamlessly with your existing shadcn design system.\n\n## Features\n\n- **Svelte 5 Runes** - Built with `$state`, `$derived`, and `$effect` for optimal reactivity\n- **Full FullCalendar Power** - Day, week, month views with drag-and-drop, resizing, and selection\n- **Themeable** - Automatically inherits your shadcn theme via CSS custom properties\n- **Dark Mode Ready** - Works with your existing dark mode setup out of the box\n- **Tree-shakeable** - Only import what you need\n- **TypeScript** - Full type definitions included\n\n## Installation\n\n```bash\nnpm install @agsci/fullcalendar-svelte-shadcn @fullcalendar/core\n```\n\n### Optional Plugins\n\nInstall the FullCalendar plugins you need:\n\n```bash\n# For day/week views (time grid)\nnpm install @fullcalendar/daygrid @fullcalendar/timegrid\n\n# For drag-and-drop and selection\nnpm install @fullcalendar/interaction\n\n# For list view\nnpm install @fullcalendar/list\n```\n\n## Quick Start\n\n```svelte\n<script lang=\"ts\">\n  import { Calendar, CalendarNav, type CalendarEvent, type CalendarView } from '@agsci/fullcalendar-svelte-shadcn';\n  import '@agsci/fullcalendar-svelte-shadcn/styles';\n\n  let events = $state<CalendarEvent[]>([\n    {\n      id: '1',\n      title: 'Team Meeting',\n      start: new Date(),\n      end: new Date(Date.now() + 60 * 60 * 1000),\n      backgroundColor: '#3b82f6'\n    }\n  ]);\n\n  let viewedDate = $state(new Date());\n  let currentView = $state<CalendarView>('week');\n  let calendarRef: { prev: () => void; next: () => void; today: () => void; changeView: (v: CalendarView) => void };\n</script>\n\n<CalendarNav\n  {viewedDate}\n  {currentView}\n  onPrev={() => calendarRef?.prev()}\n  onNext={() => calendarRef?.next()}\n  onToday={() => calendarRef?.today()}\n  onViewChange={(v) => { currentView = v; calendarRef?.changeView(v); }}\n/>\n\n<Calendar\n  bind:this={calendarRef}\n  {events}\n  config={{ initialView: 'week', editable: true, selectable: true }}\n  onEventClick={(event) => console.log('Clicked:', event)}\n  onDatesSet={(start) => viewedDate = start}\n  onViewChange={(v) => currentView = v}\n/>\n```\n\n## Components\n\n### Calendar\n\nThe main calendar component wrapping FullCalendar.\n\n```svelte\n<Calendar\n  events={events}\n  config={{\n    initialView: 'week',      // 'day' | 'week' | 'month' | 'list'\n    slotMinTime: '07:00',     // Earliest time slot\n    slotMaxTime: '21:00',     // Latest time slot\n    height: '600px',          // Calendar height\n    editable: true,           // Enable drag-and-drop\n    selectable: true,         // Enable date range selection\n    nowIndicator: true,       // Show current time line\n    firstDay: 0               // Week start (0=Sunday, 1=Monday)\n  }}\n  onEventClick={(event) => {}}\n  onEventChange={(event, oldEvent, revert) => {}}\n  onDateSelect={(start, end, allDay) => {}}\n  onDateClick={(date, allDay) => {}}\n  onDatesSet={(start, end) => {}}\n  onViewChange={(view) => {}}\n/>\n```\n\n### CalendarNav\n\nNavigation controls with month/year selectors and view switcher.\n\n```svelte\n<CalendarNav\n  viewedDate={viewedDate}\n  currentView={currentView}\n  onPrev={() => calendarRef?.prev()}\n  onNext={() => calendarRef?.next()}\n  onToday={() => calendarRef?.today()}\n  onViewChange={(view) => calendarRef?.changeView(view)}\n  onDateChange={(date) => calendarRef?.gotoDate(date)}\n/>\n```\n\n### Event Dialogs\n\nPre-built dialogs for viewing, adding, editing, and deleting events.\n\n```svelte\n<script>\n  import { EventView, EventAddDialog, EventEditDialog, EventDeleteDialog } from '@agsci/fullcalendar-svelte-shadcn';\n</script>\n\n<EventView\n  event={selectedEvent}\n  open={viewOpen}\n  onClose={() => viewOpen = false}\n  onEdit={(event) => { /* open edit dialog */ }}\n  onDelete={(event) => { /* open delete dialog */ }}\n/>\n\n<EventAddDialog\n  open={addOpen}\n  defaultStart={selectedStart}\n  defaultEnd={selectedEnd}\n  onClose={() => addOpen = false}\n  onAdd={(eventData) => events = [...events, { id: Date.now().toString(), ...eventData }]}\n/>\n\n<EventEditDialog\n  event={selectedEvent}\n  open={editOpen}\n  onClose={() => editOpen = false}\n  onSave={(id, updates) => events = events.map(e => e.id === id ? { ...e, ...updates } : e)}\n/>\n\n<EventDeleteDialog\n  event={selectedEvent}\n  open={deleteOpen}\n  onClose={() => deleteOpen = false}\n  onConfirm={(id) => events = events.filter(e => e.id !== id)}\n/>\n```\n\n## Customization\n\n### Theming via CSS Custom Properties\n\nThe calendar automatically inherits your shadcn theme. It uses CSS custom properties that map to your theme tokens:\n\n```css\n/* The library uses these variables (with sensible fallbacks) */\n:root {\n  --fc-border-color: var(--border);\n  --fc-bg: var(--background);\n  --fc-text: var(--foreground);\n  --fc-muted: var(--muted-foreground);\n  --fc-today-bg: var(--accent);\n  --fc-hover-bg: var(--secondary);\n  --fc-primary: var(--primary);\n  --fc-primary-foreground: var(--primary-foreground);\n}\n```\n\n**No extra configuration needed** - if you have shadcn-svelte set up, the calendar matches your theme automatically.\n\n### Custom Theme Overrides\n\nOverride specific calendar styles in your app's CSS:\n\n```css\n/* Make the calendar more compact */\n:root {\n  --fc-slot-height: 2.5rem;\n  --fc-header-height: 2.5rem;\n}\n\n/* Custom event colors */\n.fc-event {\n  --fc-event-radius: 0.5rem;\n}\n\n/* Different today highlight */\n.fc-day-today {\n  --fc-today-bg: hsl(var(--primary) / 0.1);\n}\n```\n\n### Dark Mode\n\nThe calendar respects your dark mode setup. If you use the standard `.dark` class approach:\n\n```css\n.dark {\n  --border: hsl(240 3.7% 15.9%);\n  --background: hsl(240 10% 3.9%);\n  --foreground: hsl(0 0% 98%);\n  /* ... your other dark mode tokens */\n}\n```\n\nThe calendar will automatically adapt.\n\n### Component-Level Styling\n\nPass custom classes to components:\n\n```svelte\n<Calendar class=\"rounded-lg shadow-lg\" />\n<CalendarNav class=\"mb-4 px-2\" />\n```\n\n### Event Styling\n\nControl event appearance via the event data:\n\n```typescript\nconst event: CalendarEvent = {\n  id: '1',\n  title: 'Important Meeting',\n  start: new Date(),\n  end: new Date(),\n  backgroundColor: '#ef4444',  // Red background\n  textColor: '#ffffff',        // White text\n};\n```\n\nOr use the color picker in the Add/Edit dialogs.\n\n## Types\n\n```typescript\ninterface CalendarEvent {\n  id: string;\n  title: string;\n  start: Date;\n  end: Date;\n  description?: string;\n  backgroundColor?: string;\n  textColor?: string;\n  allDay?: boolean;\n  extendedProps?: Record<string, unknown>;\n}\n\ninterface CalendarConfig {\n  initialView?: 'day' | 'week' | 'month' | 'list';\n  slotMinTime?: string;  // e.g., '07:00'\n  slotMaxTime?: string;  // e.g., '21:00'\n  firstDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  editable?: boolean;\n  selectable?: boolean;\n  nowIndicator?: boolean;\n  height?: string | number;\n  allDaySlot?: boolean;\n  timeZone?: string;\n}\n\ntype CalendarView = 'day' | 'week' | 'month' | 'list';\n```\n\n## State Management\n\nFor complex apps, use the provided state utilities:\n\n```typescript\nimport { createCalendarState, setCalendarContext, getCalendarContext } from '@agsci/fullcalendar-svelte-shadcn';\n\n// In a parent component\nconst calendarState = createCalendarState(initialEvents);\nsetCalendarContext(calendarState);\n\n// In child components\nconst state = getCalendarContext();\nstate.addEvent(newEvent);\nstate.selectEvent(event);\nstate.openModal('add');\n```\n\n## Utilities\n\nHelpful date utilities are exported:\n\n```typescript\nimport {\n  formatDate,      // 'Dec 8, 2024'\n  formatTime,      // '2:30 PM'\n  formatDateRange, // 'Dec 8, 2:00 PM - 3:00 PM'\n  isSameDay,\n  isToday,\n  toDateString,    // '2024-12-08' (for inputs)\n  toTimeString,    // '14:30' (for inputs)\n} from '@agsci/fullcalendar-svelte-shadcn';\n```\n\n## Requirements\n\n- Svelte 5.x\n- @fullcalendar/core 6.x\n- A project with shadcn-svelte set up (for theme tokens)\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Start dev server\npnpm dev\n\n# Type check\npnpm check\n\n# Build library\npnpm build\n```\n\n## License\n\nMIT\n\n## Credits\n\n- [FullCalendar](https://fullcalendar.io) - The powerful calendar engine\n- [shadcn-svelte](https://shadcn-svelte.com) - Beautiful UI components\n- [Svelte](https://svelte.dev) - The framework\n","readmeFilename":"README.md","_rev":"1-ec06e1825cb8d6085c94441f4afc3b91"}