{"_id":"@bw-ui/datepicker-dual-calendar","name":"@bw-ui/datepicker-dual-calendar","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@bw-ui/datepicker-dual-calendar","version":"1.1.0","description":"Dual calendar plugin for BW DatePicker - Two months side by side","main":"dist/bw-dual-calendar.min.js","module":"dist/bw-dual-calendar.esm.min.js","types":"index.d.ts","style":"dist/bw-dual-calendar.min.css","exports":{".":{"import":"./dist/bw-dual-calendar.esm.min.js","require":"./dist/bw-dual-calendar.min.js","types":"./index.d.ts"},"./css":"./dist/bw-dual-calendar.min.css"},"scripts":{"build":"node build.js"},"peerDependencies":{"@bw-ui/datepicker":">=0.2.0"},"keywords":["datepicker","dual-calendar","two-months","side-by-side","hotel-booking","bw-ui"],"author":{"name":"BW UI"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/bw-ui/bw-datepicker.git","directory":"packages/dual-calendar"},"_id":"@bw-ui/datepicker-dual-calendar@1.1.0","gitHead":"30d8915a21fd5e442ea3830e44532446a20dfa3c","bugs":{"url":"https://github.com/bw-ui/bw-datepicker/issues"},"homepage":"https://github.com/bw-ui/bw-datepicker#readme","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-0QiW88jA43PB9BMtD68LX73IhuJ11uK1yAbFIPgyaXOuK9JIwJms0Ir1CGnbQl2wQOmvVd8pMCf8mEfMjYod+Q==","shasum":"d68356be51cb03ef1dd4b1875b837688d8318073","tarball":"https://registry.npmjs.org/@bw-ui/datepicker-dual-calendar/-/datepicker-dual-calendar-1.1.0.tgz","fileCount":5,"unpackedSize":43669,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFNPb1aN7ZljOcgbq5pFTIzTd9IDWanuK8mDGoJDYu32AiBKNu07rdao6ra3fmSQeFtyBs9k5QXF1tpn7p/KiyTb8Q=="}]},"_npmUser":{"name":"rchoudhary.dev","email":"rchoudhary.dev@gmail.com"},"directories":{},"maintainers":[{"name":"rchoudhary.dev","email":"rchoudhary.dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/datepicker-dual-calendar_1.1.0_1764510979463_0.9196430625382979"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-30T13:56:19.364Z","1.1.0":"2025-11-30T13:56:19.655Z","modified":"2025-11-30T13:56:19.951Z"},"maintainers":[{"name":"rchoudhary.dev","email":"rchoudhary.dev@gmail.com"}],"description":"Dual calendar plugin for BW DatePicker - Two months side by side","homepage":"https://github.com/bw-ui/bw-datepicker#readme","keywords":["datepicker","dual-calendar","two-months","side-by-side","hotel-booking","bw-ui"],"repository":{"type":"git","url":"git+https://github.com/bw-ui/bw-datepicker.git","directory":"packages/dual-calendar"},"author":{"name":"BW UI"},"bugs":{"url":"https://github.com/bw-ui/bw-datepicker/issues"},"license":"MIT","readme":"# @bw-ui/datepicker-dual-calendar\r\n\r\nDual Calendar plugin for BW DatePicker - Two months side by side.\r\n\r\n![Version](https://img.shields.io/npm/v/@bw-ui/datepicker-dual-calendar)\r\n![License](https://img.shields.io/npm/l/@bw-ui/datepicker-dual-calendar)\r\n![Size](https://img.shields.io/bundlephobia/minzip/@bw-ui/datepicker-dual-calendar)\r\n\r\n[Live Demo](https://bw-ui.github.io/bw-datepicker) • [Documentation](https://www.npmjs.com/package/@bw-ui/datepicker-dual-calendar) • [Core Package](https://www.npmjs.com/package/@bw-ui/datepicker)\r\n\r\n## ✨ Features\r\n\r\n- 📅 **Multiple Months** - 2-4 months side by side\r\n- 🔗 **Linked Navigation** - All calendars move together\r\n- 🎯 **Independent Mode** - Navigate each calendar separately\r\n- 🌍 **Locale Support** - Works with locale plugin\r\n- 🎨 **Theming** - CSS variables, dark mode support\r\n- 📱 **Responsive** - Stacks on mobile\r\n- 🔌 **Plugin Compatible** - Emits render:day events for Data plugin support\r\n\r\n## 📦 Installation\r\n\r\n```bash\r\nnpm install @bw-ui/datepicker @bw-ui/datepicker-dual-calendar\r\n```\r\n\r\n> ⚠️ **Peer Dependency:** Requires `@bw-ui/datepicker` core package\r\n\r\n## 🚀 Quick Start\r\n\r\n### ES Modules\r\n\r\n```javascript\r\nimport { BWDatePicker } from '@bw-ui/datepicker';\r\nimport { DualCalendarPlugin } from '@bw-ui/datepicker-dual-calendar';\r\nimport '@bw-ui/datepicker/css';\r\nimport '@bw-ui/datepicker-dual-calendar/css';\r\n\r\nconst picker = new BWDatePicker('#date-input').use(DualCalendarPlugin);\r\n```\r\n\r\n### CDN\r\n\r\n```html\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://unpkg.com/@bw-ui/datepicker/dist/bw-datepicker.min.css\"\r\n/>\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://unpkg.com/@bw-ui/datepicker-dual-calendar/dist/bw-dual-calendar.min.css\"\r\n/>\r\n\r\n<script src=\"https://unpkg.com/@bw-ui/datepicker/dist/bw-datepicker.min.js\"></script>\r\n<script src=\"https://unpkg.com/@bw-ui/datepicker-dual-calendar/dist/bw-dual-calendar.min.js\"></script>\r\n\r\n<script>\r\n  const picker = new BWDatePicker('#date-input').use(\r\n    BWDualCalendar.DualCalendarPlugin\r\n  );\r\n</script>\r\n```\r\n\r\n## ⚙️ Options\r\n\r\n```javascript\r\n.use(DualCalendarPlugin, {\r\n  // Navigation\r\n  linked: true,              // Navigate all calendars together (default: true)\r\n  months: 2,                 // Number of months to show: 2-4 (default: 2)\r\n  gap: 1,                    // Months gap between calendars (default: 1)\r\n\r\n  // Starting position\r\n  leftMonth: null,           // Starting month 0-11 (default: current)\r\n  leftYear: null,            // Starting year (default: current)\r\n\r\n  // Display\r\n  showNavigation: 'outside', // Navigation button position\r\n})\r\n```\r\n\r\n### Options Reference\r\n\r\n| Option           | Type      | Default     | Description                                              |\r\n| ---------------- | --------- | ----------- | -------------------------------------------------------- |\r\n| `linked`         | `boolean` | `true`      | Navigate all calendars together                          |\r\n| `months`         | `number`  | `2`         | Number of months to display (2-4)                        |\r\n| `gap`            | `number`  | `1`         | Months gap between calendars (1 = consecutive)           |\r\n| `leftMonth`      | `number`  | `null`      | Starting month (0-11), null = current month              |\r\n| `leftYear`       | `number`  | `null`      | Starting year, null = current year                       |\r\n| `showNavigation` | `string`  | `'outside'` | Navigation position: `'outside'` \\| `'both'` \\| `'left'` |\r\n\r\n## 📖 Examples\r\n\r\n### Basic Dual Calendar\r\n\r\n```javascript\r\nnew BWDatePicker('#date-input').use(DualCalendarPlugin);\r\n```\r\n\r\n```\r\n┌─────────────────────────────────────────────────────────┐\r\n│  ◄                December 2025    January 2026       ► │\r\n├────────────────────────────┬────────────────────────────┤\r\n│  Su Mo Tu We Th Fr Sa      │  Su Mo Tu We Th Fr Sa      │\r\n│      1  2  3  4  5  6      │            1  2  3         │\r\n│   7  8  9 10 11 12 13      │   4  5  6  7  8  9 10      │\r\n│  14 15 16 17 18 19 20      │  11 12 13 14 15 16 17      │\r\n│  21 22 23 24 25 26 27      │  18 19 20 21 22 23 24      │\r\n│  28 29 30 31               │  25 26 27 28 29 30 31      │\r\n└────────────────────────────┴────────────────────────────┘\r\n```\r\n\r\n### Hotel Booking (with Range Plugin)\r\n\r\n```javascript\r\nimport { RangePlugin } from '@bw-ui/datepicker-range';\r\nimport { DualCalendarPlugin } from '@bw-ui/datepicker-dual-calendar';\r\n\r\nnew BWDatePicker('#booking-date')\r\n  .use(DualCalendarPlugin, {\r\n    linked: true,\r\n    gap: 1,\r\n  })\r\n  .use(RangePlugin, {\r\n    minRange: 1,\r\n    maxRange: 30,\r\n  });\r\n```\r\n\r\n### Monday First\r\n\r\n```javascript\r\n.use(DualCalendarPlugin, {\r\n  firstDayOfWeek: 1, // Monday\r\n})\r\n```\r\n\r\n### Two Month Gap (Compare)\r\n\r\n```javascript\r\n.use(DualCalendarPlugin, {\r\n  linked: true,\r\n  gap: 6, // Show 6 months apart (e.g., Jan + July)\r\n})\r\n```\r\n\r\n### Independent Navigation\r\n\r\n```javascript\r\n.use(DualCalendarPlugin, {\r\n  linked: false, // Each calendar navigates separately\r\n})\r\n```\r\n\r\n### Custom Locale\r\n\r\n```javascript\r\n.use(DualCalendarPlugin, {\r\n  monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',\r\n               'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],\r\n  dayNames: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],\r\n  firstDayOfWeek: 1,\r\n})\r\n```\r\n\r\n### With Locale Plugin\r\n\r\n```javascript\r\nimport { LocalePlugin } from '@bw-ui/datepicker-locale';\r\nimport { DualCalendarPlugin } from '@bw-ui/datepicker-dual-calendar';\r\n\r\nnew BWDatePicker('#date-input')\r\n  .use(LocalePlugin, { locale: 'de-DE' })\r\n  .use(DualCalendarPlugin);\r\n// Month/day names automatically use German locale\r\n```\r\n\r\n## 🔌 API Methods\r\n\r\nAccess via `picker.getPlugin('dual-calendar')`:\r\n\r\n```javascript\r\nconst dual = picker.getPlugin('dual-calendar');\r\n\r\n// Get calendar states\r\ndual.getLeft(); // { month: 11, year: 2025 }\r\ndual.getRight(); // { month: 0, year: 2026 }\r\n\r\n// Navigation\r\ndual.prevMonth(); // Go to previous month\r\ndual.nextMonth(); // Go to next month\r\ndual.prevYear(); // Go to previous year\r\ndual.nextYear(); // Go to next year\r\n\r\n// Go to specific date\r\ndual.goToDate(new Date('2025-06-15'));\r\n\r\n// Go to today\r\ndual.goToToday();\r\n\r\n// Linked mode\r\ndual.setLinked(false); // Disable linked navigation\r\ndual.isLinked(); // Check if linked\r\n\r\n// Refresh\r\ndual.refresh();\r\n```\r\n\r\n## 📡 Events\r\n\r\n```javascript\r\nconst picker = new BWDatePicker('#date-input').use(DualCalendarPlugin);\r\n\r\n// Navigation event\r\npicker.on('dual:navigate', ({ left, right }) => {\r\n  console.log('Left calendar:', left.month, left.year);\r\n  console.log('Right calendar:', right.month, right.year);\r\n});\r\n```\r\n\r\n## 🎨 Theming\r\n\r\n### CSS Variables\r\n\r\n```css\r\n.bw-datepicker--dual {\r\n  /* Gap between calendars */\r\n  --bw-dual-gap: 16px;\r\n\r\n  /* Navigation */\r\n  --bw-dual-border: #e5e7eb;\r\n  --bw-dual-btn-bg: #fff;\r\n  --bw-dual-btn-color: #374151;\r\n  --bw-dual-btn-hover-bg: #f3f4f6;\r\n  --bw-dual-btn-hover-border: #d1d5db;\r\n  --bw-dual-btn-active-bg: #e5e7eb;\r\n\r\n  /* Title */\r\n  --bw-dual-title-color: #111827;\r\n\r\n  /* Weekdays */\r\n  --bw-dual-weekday-color: #6b7280;\r\n\r\n  /* Days */\r\n  --bw-dual-day-color: #111827;\r\n  --bw-dual-day-bg: transparent;\r\n  --bw-dual-day-hover-bg: #f3f4f6;\r\n  --bw-dual-day-other-color: #d1d5db;\r\n  --bw-dual-today-color: #3b82f6;\r\n  --bw-dual-selected-bg: #3b82f6;\r\n}\r\n```\r\n\r\n### Custom Theme Example\r\n\r\n```css\r\n.bw-datepicker--dual {\r\n  --bw-dual-gap: 24px;\r\n  --bw-dual-selected-bg: #10b981;\r\n  --bw-dual-today-color: #10b981;\r\n}\r\n```\r\n\r\n### With Theming Plugin\r\n\r\n```javascript\r\nimport { ThemingPlugin } from '@bw-ui/datepicker-theming';\r\nimport { DualCalendarPlugin } from '@bw-ui/datepicker-dual-calendar';\r\n\r\nnew BWDatePicker('#date-input')\r\n  .use(ThemingPlugin, {\r\n    theme: 'dark',\r\n    customVars: {\r\n      '--bw-dual-selected-bg': '#10b981',\r\n      '--bw-dual-today-color': '#34d399',\r\n    },\r\n  })\r\n  .use(DualCalendarPlugin);\r\n```\r\n\r\n### Dark Mode\r\n\r\nDark mode is automatically supported via:\r\n\r\n- `[data-bw-theme=\"dark\"]` attribute (Theming plugin)\r\n- `.bw-datepicker--dark` class (manual)\r\n\r\n## 🔌 Combining with Other Plugins\r\n\r\n### Full Hotel Booking Setup\r\n\r\n```javascript\r\nimport { BWDatePicker } from '@bw-ui/datepicker';\r\nimport { ThemingPlugin } from '@bw-ui/datepicker-theming';\r\nimport { DualCalendarPlugin } from '@bw-ui/datepicker-dual-calendar';\r\nimport { RangePlugin } from '@bw-ui/datepicker-range';\r\nimport { DataPlugin } from '@bw-ui/datepicker-data';\r\n\r\nconst picker = new BWDatePicker('#booking')\r\n  .use(ThemingPlugin, { theme: 'light' })\r\n  .use(DualCalendarPlugin, { linked: true })\r\n  .use(DataPlugin, {\r\n    data: {\r\n      '2025-12-24': { price: 199, status: 'available' },\r\n      '2025-12-25': { price: 299, status: 'limited' },\r\n      '2025-12-31': { price: 499, status: 'sold-out' },\r\n    },\r\n    renderDay: (date, data) => (data ? `$${data.price}` : ''),\r\n  })\r\n  .use(RangePlugin, {\r\n    minRange: 1,\r\n    maxRange: 14,\r\n    presets: ['thisWeek', 'thisMonth'],\r\n    presetsPosition: 'left',\r\n  });\r\n```\r\n\r\n## 📁 What's Included\r\n\r\n```\r\ndist/\r\n├── bw-dual-calendar.min.js       # IIFE build (for <script>)\r\n├── bw-dual-calendar.esm.min.js   # ESM build (for import)\r\n└── bw-dual-calendar.min.css      # Styles\r\n```\r\n\r\n## 📱 Responsive Behavior\r\n\r\nOn screens smaller than 600px:\r\n\r\n- Calendars stack vertically\r\n- Month titles stack\r\n- Full width days\r\n\r\n```css\r\n@media (max-width: 600px) {\r\n  .bw-dual-calendars {\r\n    flex-direction: column;\r\n  }\r\n}\r\n```\r\n\r\n## 🔗 Related Packages\r\n\r\n| Package                                                                              | Description           |\r\n| ------------------------------------------------------------------------------------ | --------------------- |\r\n| [@bw-ui/datepicker](https://www.npmjs.com/package/@bw-ui/datepicker)                 | Core (required)       |\r\n| [@bw-ui/datepicker-range](https://www.npmjs.com/package/@bw-ui/datepicker-range)     | Date range selection  |\r\n| [@bw-ui/datepicker-theming](https://www.npmjs.com/package/@bw-ui/datepicker-theming) | Dark mode & themes    |\r\n| [@bw-ui/datepicker-data](https://www.npmjs.com/package/@bw-ui/datepicker-data)       | Prices & availability |\r\n| [@bw-ui/datepicker-locale](https://www.npmjs.com/package/@bw-ui/datepicker-locale)   | Internationalization  |\r\n\r\n## 📄 License\r\n\r\nMIT © [BW UI](https://github.com/bw-ui)\r\n\r\n## 🐛 Issues\r\n\r\nFound a bug? [Report it here](https://github.com/bw-ui/bw-datepicker/issues)\r\n","readmeFilename":"README.md","_rev":"1-1f4ae0170b5cb267f07519559f258dfa"}