\r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n## āļø Options\r\n\r\n```javascript\r\n.use(DataPlugin, {\r\n // Data Sources\r\n data: {}, // Static data object\r\n fetch: async () => {}, // Fetch function\r\n fetchPriority: 'replace', // 'replace' | 'merge' | 'fallback'\r\n\r\n // Rendering\r\n renderDay: (dateKey, data) => '', // Custom day content\r\n dayClass: (dateKey, data) => '', // Custom day class\r\n\r\n // Display\r\n expanded: false, // Larger day cells\r\n\r\n // Loading Options\r\n showLoading: true, // Show loader while fetching\r\n loaderType: 'overlay', // 'overlay' | 'calendar' | 'skeleton' | 'spinner'\r\n\r\n // Fetch Options\r\n cache: true, // Cache fetched months\r\n retries: 2, // Retry failed requests\r\n timeout: 10000, // Request timeout (ms)\r\n})\r\n```\r\n\r\n### Options Reference\r\n\r\n| Option | Type | Default | Description |\r\n| --------------- | ---------- | ----------- | -------------------------------------- |\r\n| `data` | `object` | `null` | Static data object with date keys |\r\n| `fetch` | `function` | `null` | Async function to fetch data |\r\n| `fetchPriority` | `string` | `'replace'` | How fetch interacts with static data |\r\n| `renderDay` | `function` | `null` | Custom render function for day content |\r\n| `dayClass` | `function` | `null` | Custom class function for day cells |\r\n| `expanded` | `boolean` | `false` | Enable larger day cells |\r\n| `showLoading` | `boolean` | `true` | Show loading indicator |\r\n| `loaderType` | `string` | `'overlay'` | Type of loading indicator |\r\n| `cache` | `boolean` | `true` | Cache fetched months |\r\n| `retries` | `number` | `2` | Number of retry attempts |\r\n| `timeout` | `number` | `10000` | Request timeout in ms |\r\n\r\n## ā³ Loader Types\r\n\r\n| Type | Description | Blocks Clicks |\r\n| ------------ | ------------------------------------------ | ------------- |\r\n| `'overlay'` | Full picker overlay with spinner (default) | ā
Yes |\r\n| `'calendar'` | Only calendar area has spinner | ā No |\r\n| `'skeleton'` | Skeleton loaders on each day cell | ā No |\r\n| `'spinner'` | Small spinner in corner | ā No |\r\n\r\n### Overlay Loader (Default)\r\n\r\nBlocks all interaction while loading - prevents accidental navigation.\r\n\r\n```javascript\r\n.use(DataPlugin, {\r\n fetch: fetchPrices,\r\n loaderType: 'overlay',\r\n})\r\n```\r\n\r\n### Calendar Loader\r\n\r\nOnly calendar area shows loader - user can still use header navigation.\r\n\r\n```javascript\r\n.use(DataPlugin, {\r\n fetch: fetchPrices,\r\n loaderType: 'calendar',\r\n})\r\n```\r\n\r\n### Skeleton Loader\r\n\r\nShows skeleton animation on each day cell.\r\n\r\n```javascript\r\n.use(DataPlugin, {\r\n fetch: fetchPrices,\r\n loaderType: 'skeleton',\r\n})\r\n```\r\n\r\n### Spinner Loader\r\n\r\nNon-intrusive small spinner in corner.\r\n\r\n```javascript\r\n.use(DataPlugin, {\r\n fetch: fetchPrices,\r\n loaderType: 'spinner',\r\n})\r\n```\r\n\r\n### Disable Loading Indicator\r\n\r\n```javascript\r\n.use(DataPlugin, {\r\n fetch: fetchPrices,\r\n showLoading: false,\r\n})\r\n```\r\n\r\n## š Data Format\r\n\r\n```javascript\r\n{\r\n \"2025-12-01\": { price: 99, status: \"available\", rooms: 5 },\r\n \"2025-12-02\": { price: 150, status: \"limited\", rooms: 2 },\r\n \"2025-12-03\": { price: 200, status: \"sold-out\", rooms: 0 },\r\n}\r\n```\r\n\r\n### Built-in Status Classes\r\n\r\n| Status | CSS Class | Effect |\r\n| ----------- | ------------ | ------------------------ |\r\n| `available` | `.available` | Green background |\r\n| `limited` | `.limited` | Yellow background |\r\n| `sold-out` | `.sold-out` | Red background, disabled |\r\n\r\n## š Examples\r\n\r\n### Static Data\r\n\r\n```javascript\r\n.use(DataPlugin, {\r\n data: {\r\n '2025-12-01': { price: 99, status: 'available' },\r\n '2025-12-02': { price: 150, status: 'limited' },\r\n },\r\n renderDay: (dateKey, data) => data ? `ā¹${data.price}` : '',\r\n dayClass: (dateKey, data) => data?.status || '',\r\n})\r\n```\r\n\r\n### API Fetch\r\n\r\n```javascript\r\n.use(DataPlugin, {\r\n fetch: async ({ month, year, signal }) => {\r\n const res = await fetch(`/api/prices?month=${month}&year=${year}`, { signal });\r\n return res.json();\r\n },\r\n renderDay: (dateKey, data) => data ? `ā¹${data.price}` : '',\r\n dayClass: (dateKey, data) => data?.status || '',\r\n})\r\n```\r\n\r\n### Fake Data for Testing\r\n\r\n```javascript\r\n.use(DataPlugin, {\r\n fetch: async ({ month, year }) => {\r\n await new Promise(r => setTimeout(r, 1000)); // 1 sec delay\r\n\r\n const daysInMonth = new Date(year, month + 1, 0).getDate();\r\n const data = {};\r\n\r\n for (let day = 1; day <= daysInMonth; day++) {\r\n const dateKey = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;\r\n const rooms = Math.floor(Math.random() * 10);\r\n data[dateKey] = {\r\n price: Math.floor(Math.random() * 300) + 50,\r\n rooms: rooms,\r\n status: rooms === 0 ? 'sold-out' : rooms < 3 ? 'limited' : 'available'\r\n };\r\n }\r\n return data;\r\n },\r\n loaderType: 'skeleton',\r\n renderDay: (dateKey, data) => {\r\n if (!data) return '';\r\n return `ā¹${data.price}`;\r\n },\r\n dayClass: (dateKey, data) => data?.status || '',\r\n})\r\n```\r\n\r\n### Expanded Mode (Larger Cells)\r\n\r\n```javascript\r\n.use(DataPlugin, {\r\n expanded: true,\r\n data: { ... },\r\n renderDay: (dateKey, data) => {\r\n if (!data) return '';\r\n const statusColor = {\r\n 'available': '#16a34a',\r\n 'limited': '#ca8a04',\r\n 'sold-out': '#dc2626'\r\n }[data.status] || '#666';\r\n\r\n return `\r\n \r\n ā¹${data.price}\r\n ${data.rooms} left\r\n
\r\n `;\r\n },\r\n dayClass: (dateKey, data) => data?.status || '',\r\n})\r\n```\r\n\r\n## š Fetch Priority\r\n\r\n| Priority | Behavior |\r\n| ------------ | --------------------------------------------- |\r\n| `'replace'` | Fetch overwrites static data (default) |\r\n| `'merge'` | Fetch + static combined, fetch wins conflicts |\r\n| `'fallback'` | Only fetch if no static data exists for month |\r\n\r\n```javascript\r\n// Static as placeholder, API updates\r\n.use(DataPlugin, {\r\n data: { ... }, // Shows immediately\r\n fetch: async () => { ... }, // Replaces when loaded\r\n fetchPriority: 'replace',\r\n})\r\n\r\n// Merge static defaults with API data\r\n.use(DataPlugin, {\r\n data: { ... },\r\n fetch: async () => { ... },\r\n fetchPriority: 'merge',\r\n})\r\n\r\n// Use static, only fetch if missing\r\n.use(DataPlugin, {\r\n data: { ... },\r\n fetch: async () => { ... },\r\n fetchPriority: 'fallback',\r\n})\r\n```\r\n\r\n## šØ Custom Rendering\r\n\r\n### Price with Status Badge\r\n\r\n```javascript\r\nrenderDay: (dateKey, data) => {\r\n if (!data) return '';\r\n\r\n const statusBg = {\r\n 'available': '#dcfce7',\r\n 'limited': '#fef9c3',\r\n 'sold-out': '#fee2e2'\r\n }[data.status] || '#f3f4f6';\r\n\r\n const statusText = {\r\n 'available': '#16a34a',\r\n 'limited': '#ca8a04',\r\n 'sold-out': '#dc2626'\r\n }[data.status] || '#666';\r\n\r\n return `\r\n \r\n ā¹${data.price}\r\n ${data.rooms} left\r\n
\r\n `;\r\n},\r\n```\r\n\r\n## š API Methods\r\n\r\nAccess via `picker.getPlugin('data')`:\r\n\r\n```javascript\r\nconst dataPlugin = picker.getPlugin('data');\r\n\r\n// Get data for specific date\r\ndataPlugin.get('2025-12-01');\r\n\r\n// Set data for specific date\r\ndataPlugin.set('2025-12-01', { price: 99, status: 'available' });\r\n\r\n// Set data for entire month\r\ndataPlugin.setMonth(11, 2025, { ... });\r\n\r\n// Get data for date range\r\ndataPlugin.getRange(new Date('2025-12-01'), new Date('2025-12-07'));\r\n\r\n// Sum property across range (e.g., total price)\r\ndataPlugin.sumRange(new Date('2025-12-01'), new Date('2025-12-07'), 'price');\r\n\r\n// Refresh data (clear cache + re-fetch)\r\ndataPlugin.refresh();\r\n\r\n// Clear all data\r\ndataPlugin.clear();\r\n\r\n// Check if loading\r\ndataPlugin.isLoading();\r\n```\r\n\r\n## š” Events\r\n\r\n```javascript\r\nconst picker = new BWDatePicker('#date-input')\r\n .use(DataPlugin, { ... });\r\n\r\npicker.on('data:loaded', ({ month, year, data }) => {\r\n console.log('Data loaded:', data);\r\n});\r\n\r\npicker.on('data:error', ({ month, year, error }) => {\r\n console.error('Fetch failed:', error);\r\n});\r\n```\r\n\r\n## š
View Mode Support\r\n\r\nThe Data Plugin automatically handles different view modes:\r\n\r\n| View Mode | Data Display |\r\n| ---------- | ------------------------- |\r\n| `calendar` | ā
Shows data on days |\r\n| `week` | ā
Shows data on days |\r\n| `month` | ā No data (month picker) |\r\n| `year` | ā No data (year picker) |\r\n\r\nData is automatically fetched when:\r\n\r\n- Picker opens\r\n- Month/year navigation\r\n- Week navigation (in week view)\r\n- Switching back to calendar/week view\r\n\r\n## š Combining with Other Plugins\r\n\r\n```javascript\r\nimport { BWDatePicker } from '@bw-ui/datepicker';\r\nimport { ThemingPlugin } from '@bw-ui/datepicker-theming';\r\nimport { DataPlugin } from '@bw-ui/datepicker-data';\r\n\r\nconst picker = new BWDatePicker('#date-input')\r\n .use(ThemingPlugin, { theme: 'dark' })\r\n .use(DataPlugin, {\r\n expanded: true,\r\n loaderType: 'overlay',\r\n data: { ... },\r\n renderDay: (dateKey, data) => { ... },\r\n });\r\n```\r\n\r\n## š What's Included\r\n\r\n```\r\ndist/\r\nāāā bw-data.min.js # IIFE build (for