{"_id":"@aniruddha1806/calendar","_rev":"4-e176860c7936479715b5eb54fb65ddac","name":"@aniruddha1806/calendar","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@aniruddha1806/calendar","version":"1.0.0","_id":"@aniruddha1806/calendar@1.0.0","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"da6263180b468537b8be21125fa53474cbe35c6b","tarball":"https://registry.npmjs.org/@aniruddha1806/calendar/-/calendar-1.0.0.tgz","fileCount":11,"integrity":"sha512-NlugzAO3jpoA1HGU/TbG7Jf1aYRZwzLalMQI+1PfsdiApyFY7bsaB5Kg38hGh2th4okG6IapYbc4Ij4lKIcuVw==","signatures":[{"sig":"MEUCIQC9zSjOKqjzIKO6xdV4uDYS9Ji3vVFGRJtVu7HStqDu8AIgGsWasrpgYxeOcyyO5krbuywGvvlhzkYcbhgE0iwERZE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":52331},"main":"dist/cjs/index.js","type":"module","types":"dist/types/index.d.ts","module":"dist/esm/index.js","scripts":{"build":"npm run clean && npm run build:types && npm run build:js","clean":"rimraf dist","build:js":"rollup -c","build:types":"tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist/types","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A lightweight, customizable React calendar component with date selection, range selection, and events","directories":{},"_nodeVersion":"20.14.0","dependencies":{"tslib":"^2.6.2"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","rimraf":"^5.0.0","rollup":"^3.20.0","react-dom":"^18.2.0","typescript":"^5.0.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-typescript":"^11.0.0","@rollup/plugin-node-resolve":"^15.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/calendar_1.0.0_1743973342645_0.8177980605619706","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aniruddha1806/calendar","version":"1.0.1","_id":"@aniruddha1806/calendar@1.0.1","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"58cf44e0ebfea1e824779483a4e84098efe87a36","tarball":"https://registry.npmjs.org/@aniruddha1806/calendar/-/calendar-1.0.1.tgz","fileCount":11,"integrity":"sha512-HlMnhNtQeQmDZwhiek6LdnkfV8ez3YVkZbUDHjUR8SP/O+yLamC73wLvCBjE08UGnkVnCB33HYnkUd96iIwoYQ==","signatures":[{"sig":"MEYCIQCQrNwFAt+cZRCpdCyhz9z1N24YuTtsBkLsAsEFMJUy8wIhALJ4R47h1DGjOh00gKiVDbXPI6FLpwVh/zNw/UbfCOoD","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":68194},"main":"dist/cjs/index.js","type":"module","types":"dist/types/index.d.ts","module":"dist/esm/index.js","scripts":{"build":"npm run clean && npm run build:types && npm run build:js","clean":"rimraf dist","build:js":"rollup -c","build:types":"tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist/types","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A lightweight, customizable React calendar component with date selection, range selection, and events","directories":{},"_nodeVersion":"20.14.0","dependencies":{"tslib":"^2.6.2"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","rimraf":"^5.0.0","rollup":"^3.20.0","react-dom":"^18.2.0","typescript":"^5.0.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-typescript":"^11.0.0","@rollup/plugin-node-resolve":"^15.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/calendar_1.0.1_1743975216158_0.4655639804901288","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@aniruddha1806/calendar","version":"1.0.2","_id":"@aniruddha1806/calendar@1.0.2","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"2291849f2981e83633a6ea4ae76ea636f314639b","tarball":"https://registry.npmjs.org/@aniruddha1806/calendar/-/calendar-1.0.2.tgz","fileCount":12,"integrity":"sha512-9K9FkU70hvN9lOkhlk4wgmHzsQogFzoUKe40/gB148U+4xe/IwGdbGm5Fe1G13Gmxu1ly3nieUQf4qK0em4tuA==","signatures":[{"sig":"MEUCIQDMaz8GMVA3yeXfohZJfoimaCkb95/SPxGBN7n0O7FhiQIgf4onJg0YXjrUtu8RGP/Cgb2uFgh7ij9eEO7naM+wMYg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":80675},"main":"dist/cjs/index.js","type":"module","types":"dist/types/index.d.ts","module":"dist/esm/index.js","scripts":{"build":"npm run clean && npm run build:types && npm run build:js","clean":"rimraf dist","build:js":"rollup -c","build:types":"tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist/types","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A lightweight, customizable React calendar component with date selection, range selection, and events","directories":{},"_nodeVersion":"20.14.0","dependencies":{"tslib":"^2.6.2"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","rimraf":"^5.0.0","rollup":"^3.20.0","react-dom":"^18.2.0","typescript":"^5.0.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-typescript":"^11.0.0","@rollup/plugin-node-resolve":"^15.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/calendar_1.0.2_1749128690092_0.9753246105068636","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@aniruddha1806/calendar","version":"1.0.3","description":"A lightweight, customizable React calendar component with date selection, range selection, and events","main":"dist/cjs/index.js","type":"module","module":"dist/esm/index.js","types":"dist/types/index.d.ts","scripts":{"build":"npm run clean && npm run build:types && npm run build:js","build:types":"tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist/types","build:js":"rollup -c","clean":"rimraf dist","prepublishOnly":"npm run build"},"dependencies":{"tslib":"^2.6.2"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-node-resolve":"^15.0.0","@rollup/plugin-typescript":"^11.0.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","react":"^18.2.0","react-dom":"^18.2.0","rimraf":"^5.0.0","rollup":"^3.20.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-terser":"^7.0.2","typescript":"^5.0.0"},"_id":"@aniruddha1806/calendar@1.0.3","_nodeVersion":"20.14.0","_npmVersion":"10.9.1","dist":{"integrity":"sha512-uA1xGtQSxRxBCgUWuBSyq83i/D24V15vTtxZ9ttOshFIu+/+q5vzlFXefoRwmFbdyWVETKbc4ypjMgtxYJMQtA==","shasum":"0aad58df1fe5726906582a327b9347ba00f88a0d","tarball":"https://registry.npmjs.org/@aniruddha1806/calendar/-/calendar-1.0.3.tgz","fileCount":12,"unpackedSize":80637,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCIR0MKwg610pu2EkEtROU7w1g7hT/X55eyN5zVLihyjAIhALNVUCT8Vjph/fj1pKOlcepMzFrvLiGNkfPzRDpxuPi0"}]},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"directories":{},"maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/calendar_1.0.3_1749128760450_0.7931313221467935"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-06T21:02:22.538Z","modified":"2025-06-05T13:06:00.807Z","1.0.0":"2025-04-06T21:02:22.857Z","1.0.1":"2025-04-06T21:33:36.382Z","1.0.2":"2025-06-05T13:04:50.263Z","1.0.3":"2025-06-05T13:06:00.623Z"},"description":"A lightweight, customizable React calendar component with date selection, range selection, and events","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"readme":"# React Calendar Component\r\n\r\nA comprehensive, feature-rich calendar component for React applications with TypeScript support. Includes date selection, range selection, event management, and extensive customization options.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @aniruddha1806/calendar\r\n\r\n```\r\n\r\n## Features\r\n\r\n- 📅 Single date and date range selection\r\n- 📝 Event management with CRUD operations\r\n- 🎨 Extensive styling customization (styles + classNames)\r\n- 🌟 Highlighted dates with custom styling\r\n- 📱 Responsive design with mobile support\r\n- 🔒 Min/max date constraints\r\n- 🌍 Multiple date format support (YMD, DMY, MDY)\r\n- ♿ Full accessibility support\r\n- 🎯 TypeScript support with complete type definitions\r\n- 🪶 Zero external dependencies\r\n\r\n## Quick Start\r\n\r\n```jsx\r\nimport { Calendar } from '@aniruddha1806/calendar';\r\n\r\nfunction App() {\r\n  const handleDateChange = (date) => {\r\n    console.log('Selected date:', date);\r\n  };\r\n\r\n  return (\r\n    <div style={{ padding: '20px' }}>\r\n      <Calendar\r\n        label=\"Select Date\"\r\n        onChange={handleDateChange}\r\n        todayButtonLabel=\"Today\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `defaultDate` | `Date` | `new Date()` | Initial selected date |\r\n| `minDate` | `Date` | `undefined` | Minimum selectable date |\r\n| `maxDate` | `Date` | `undefined` | Maximum selectable date |\r\n| `label` | `string` | `undefined` | Label text above the calendar input |\r\n| `onChange` | `(date: Date) => void` | `undefined` | Callback when date is selected |\r\n| `style` | `CSSProperties` | `undefined` | Inline styles for container |\r\n| `className` | `string` | `undefined` | CSS class for container |\r\n| `calendarStyle` | `CSSProperties` | `undefined` | Inline styles for calendar dropdown |\r\n| `calendarClassName` | `string` | `undefined` | CSS class for calendar dropdown |\r\n| `inputStyle` | `CSSProperties` | `undefined` | Inline styles for input button |\r\n| `inputClassName` | `string` | `undefined` | CSS class for input button |\r\n| `labelStyle` | `CSSProperties` | `undefined` | Inline styles for label |\r\n| `labelClassName` | `string` | `undefined` | CSS class for label |\r\n| `highlightedDates` | `HighlightedDate[]` | `[]` | Array of dates to highlight |\r\n| `todayButtonLabel` | `string` | `undefined` | Label for today button (shows button if provided) |\r\n| `range` | `boolean` | `false` | Enable date range selection |\r\n| `defaultStartDate` | `Date` | `undefined` | Initial start date for range selection |\r\n| `defaultEndDate` | `Date` | `undefined` | Initial end date for range selection |\r\n| `onRangeChange` | `(start: Date \\\\| null, end: Date \\\\| null) => void` | `undefined` | Callback for range selection |\r\n| `events` | `DateEvents` | `{}` | Object containing events for dates |\r\n| `onEventsChange` | `(events: DateEvents) => void` | `undefined` | Callback when events are modified |\r\n| `dateFormat` | `\"YMD\" \\\\| \"DMY\" \\\\| \"MDY\"` | `\"MDY\"` | Date display format |\r\n\r\n## Type Definitions\r\n\r\n### HighlightedDate\r\n\r\n```typescript\r\ninterface HighlightedDate {\r\n  date: Date;\r\n  style?: React.CSSProperties;\r\n  className?: string;\r\n}\r\n```\r\n\r\n### CalendarEvent\r\n\r\n```typescript\r\ninterface CalendarEvent {\r\n  id: string;\r\n  note: string;\r\n}\r\n```\r\n\r\n### DateEvents\r\n\r\n```typescript\r\ninterface DateEvents {\r\n  [dateKey: string]: CalendarEvent[];\r\n}\r\n```\r\n\r\n## Examples\r\n\r\n### Basic Date Selection\r\n\r\nSimple calendar with date selection:\r\n\r\n```jsx\r\nimport { Calendar } from '@aniruddha1806/calendar';\r\n\r\nfunction BasicCalendar() {\r\n  const [selectedDate, setSelectedDate] = useState(new Date());\r\n\r\n  return (\r\n    <Calendar\r\n      label=\"Choose Date\"\r\n      defaultDate={selectedDate}\r\n      onChange={setSelectedDate}\r\n      todayButtonLabel=\"Go to Today\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Date Range Selection\r\n\r\nEnable range selection for booking systems:\r\n\r\n```jsx\r\nimport { Calendar } from '@aniruddha1806/calendar';\r\n\r\nfunction DateRangePicker() {\r\n  const [startDate, setStartDate] = useState(null);\r\n  const [endDate, setEndDate] = useState(null);\r\n\r\n  const handleRangeChange = (start, end) => {\r\n    setStartDate(start);\r\n    setEndDate(end);\r\n    console.log('Range:', start, 'to', end);\r\n  };\r\n\r\n  return (\r\n    <Calendar\r\n      label=\"Select Date Range\"\r\n      range={true}\r\n      onRangeChange={handleRangeChange}\r\n      todayButtonLabel=\"Today\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### With Event Management\r\n\r\nFull event management with add/remove functionality:\r\n\r\n```jsx\r\nimport { useState } from 'react';\r\nimport { Calendar } from '@aniruddha1806/calendar';\r\n\r\nfunction EventCalendar() {\r\n  const [events, setEvents] = useState({\r\n    '2024-1-15': [\r\n      { id: '1', note: 'Team Meeting' },\r\n      { id: '2', note: 'Project Deadline' }\r\n    ],\r\n    '2024-1-20': [\r\n      { id: '3', note: 'Client Presentation' }\r\n    ]\r\n  });\r\n\r\n  const handleEventsChange = (newEvents) => {\r\n    setEvents(newEvents);\r\n    console.log('Events updated:', newEvents);\r\n  };\r\n\r\n  return (\r\n    <Calendar\r\n      label=\"Event Calendar\"\r\n      events={events}\r\n      onEventsChange={handleEventsChange}\r\n      todayButtonLabel=\"Today\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Highlighted Dates\r\n\r\nHighlight special dates with custom styling:\r\n\r\n```jsx\r\nimport { Calendar } from '@aniruddha1806/calendar';\r\n\r\nfunction HighlightedCalendar() {\r\n  const highlightedDates = [\r\n    {\r\n      date: new Date(2024, 0, 15), // January 15, 2024\r\n      style: { backgroundColor: '#ff6b6b', color: 'white' },\r\n      className: 'holiday'\r\n    },\r\n    {\r\n      date: new Date(2024, 0, 25),\r\n      style: { backgroundColor: '#4ecdc4', color: 'white' }\r\n    }\r\n  ];\r\n\r\n  return (\r\n    <Calendar\r\n      label=\"Calendar with Highlights\"\r\n      highlightedDates={highlightedDates}\r\n      onChange={(date) => console.log('Selected:', date)}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Custom Styled Calendar\r\n\r\nApply custom styling to match your design system:\r\n\r\n```jsx\r\nimport { Calendar } from '@aniruddha1806/calendar';\r\n\r\nfunction CustomStyledCalendar() {\r\n  return (\r\n    <Calendar\r\n      label=\"Custom Calendar\"\r\n      className=\"my-calendar\"\r\n      labelStyle={{\r\n        fontSize: '18px',\r\n        fontWeight: 'bold',\r\n        color: '#2c3e50'\r\n      }}\r\n      inputStyle={{\r\n        border: '2px solid #3498db',\r\n        borderRadius: '8px',\r\n        padding: '12px'\r\n      }}\r\n      calendarStyle={{\r\n        border: '2px solid #3498db',\r\n        borderRadius: '12px',\r\n        boxShadow: '0 8px 25px rgba(52, 152, 219, 0.2)'\r\n      }}\r\n      todayButtonLabel=\"Today\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Date Constraints\r\n\r\nSet minimum and maximum selectable dates:\r\n\r\n```jsx\r\nimport { Calendar } from '@aniruddha1806/calendar';\r\n\r\nfunction ConstrainedCalendar() {\r\n  const today = new Date();\r\n  const maxDate = new Date();\r\n  maxDate.setMonth(today.getMonth() + 3); // 3 months from now\r\n\r\n  return (\r\n    <Calendar\r\n      label=\"Available Dates\"\r\n      minDate={today}\r\n      maxDate={maxDate}\r\n      onChange={(date) => console.log('Booked:', date)}\r\n      todayButtonLabel=\"Today\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Different Date Formats\r\n\r\nSupport various date display formats:\r\n\r\n```jsx\r\nimport { Calendar } from '@aniruddha1806/calendar';\r\n\r\nfunction FormattedCalendars() {\r\n  return (\r\n    <div style={{ display: 'grid', gap: '20px', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}>\r\n      <Calendar\r\n        label=\"US Format (MM/DD/YYYY)\"\r\n        dateFormat=\"MDY\"\r\n        todayButtonLabel=\"Today\"\r\n      />\r\n      \r\n      <Calendar\r\n        label=\"European Format (DD/MM/YYYY)\"\r\n        dateFormat=\"DMY\"\r\n        todayButtonLabel=\"Today\"\r\n      />\r\n      \r\n      <Calendar\r\n        label=\"ISO Format (YYYY-MM-DD)\"\r\n        dateFormat=\"YMD\"\r\n        todayButtonLabel=\"Today\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### Booking System\r\n\r\nComplete booking system with range selection and constraints:\r\n\r\n```jsx\r\nimport { useState } from 'react';\r\nimport { Calendar } from '@aniruddha1806/calendar';\r\n\r\nfunction BookingSystem() {\r\n  const [checkIn, setCheckIn] = useState(null);\r\n  const [checkOut, setCheckOut] = useState(null);\r\n  const [bookedDates] = useState([\r\n    new Date(2024, 0, 10),\r\n    new Date(2024, 0, 11),\r\n    new Date(2024, 0, 12),\r\n    new Date(2024, 0, 20),\r\n    new Date(2024, 0, 21)\r\n  ]);\r\n\r\n  const highlightedDates = bookedDates.map(date => ({\r\n    date,\r\n    style: { backgroundColor: '#ff6b6b', color: 'white' },\r\n    className: 'booked-date'\r\n  }));\r\n\r\n  const handleRangeChange = (start, end) => {\r\n    setCheckIn(start);\r\n    setCheckOut(end);\r\n    \r\n    if (start && end) {\r\n      console.log(`Booking from \\${start.toDateString()} to \\${end.toDateString()}`);\r\n    }\r\n  };\r\n\r\n  const today = new Date();\r\n  const maxDate = new Date();\r\n  maxDate.setFullYear(today.getFullYear() + 1);\r\n\r\n  return (\r\n    <div style={{ maxWidth: '400px', margin: '0 auto' }}>\r\n      <Calendar\r\n        label=\"Select Check-in and Check-out Dates\"\r\n        range={true}\r\n        minDate={today}\r\n        maxDate={maxDate}\r\n        highlightedDates={highlightedDates}\r\n        onRangeChange={handleRangeChange}\r\n        todayButtonLabel=\"Today\"\r\n        calendarStyle={{\r\n          border: '1px solid #e0e0e0',\r\n          borderRadius: '8px',\r\n          boxShadow: '0 4px 12px rgba(0,0,0,0.1)'\r\n        }}\r\n      />\r\n      \r\n      {checkIn && checkOut && (\r\n        <div style={{ \r\n          marginTop: '20px', \r\n          padding: '15px', \r\n          backgroundColor: '#f8f9fa', \r\n          borderRadius: '8px' \r\n        }}>\r\n          <h4>Booking Summary</h4>\r\n          <p><strong>Check-in:</strong> {checkIn.toDateString()}</p>\r\n          <p><strong>Check-out:</strong> {checkOut.toDateString()}</p>\r\n          <p><strong>Duration:</strong> {Math.ceil((checkOut - checkIn) / (1000 * 60 * 60 * 24))} nights</p>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### Project Management Calendar\r\n\r\nCalendar with events and milestones:\r\n\r\n```jsx\r\nimport { useState } from 'react';\r\nimport { Calendar } from '@aniruddha1806/calendar';\r\n\r\nfunction ProjectCalendar() {\r\n  const [events, setEvents] = useState({\r\n    '2024-1-15': [\r\n      { id: '1', note: 'Sprint Planning' },\r\n      { id: '2', note: 'Design Review' }\r\n    ],\r\n    '2024-1-22': [\r\n      { id: '3', note: 'Sprint Demo' }\r\n    ],\r\n    '2024-1-30': [\r\n      { id: '4', note: 'Project Milestone' }\r\n    ]\r\n  });\r\n\r\n  const milestones = [\r\n    {\r\n      date: new Date(2024, 0, 30),\r\n      style: { backgroundColor: '#ffd700', color: '#000', fontWeight: 'bold' },\r\n      className: 'milestone'\r\n    }\r\n  ];\r\n\r\n  return (\r\n    <div style={{ maxWidth: '500px' }}>\r\n      <Calendar\r\n        label=\"Project Timeline\"\r\n        events={events}\r\n        onEventsChange={setEvents}\r\n        highlightedDates={milestones}\r\n        todayButtonLabel=\"Today\"\r\n        calendarStyle={{\r\n          width: '100%',\r\n          border: '2px solid #007bff',\r\n          borderRadius: '10px'\r\n        }}\r\n      />\r\n      \r\n      <div style={{ marginTop: '20px', fontSize: '14px', color: '#666' }}>\r\n        <p>📅 Click on any date to add events</p>\r\n        <p>⭐ Yellow dates are project milestones</p>\r\n        <p>🔵 Blue dots indicate scheduled events</p>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## TypeScript Usage\r\n\r\nThe component provides full TypeScript support:\r\n\r\n```typescript\r\nimport { Calendar, CalendarProps, DateEvents, HighlightedDate } from '@aniruddha1806/calendar';\r\n\r\ninterface AppProps {\r\n  initialDate?: Date;\r\n}\r\n\r\nconst App: React.FC<AppProps> = ({ initialDate = new Date() }) => {\r\n  const [selectedDate, setSelectedDate] = useState<Date>(initialDate);\r\n  const [events, setEvents] = useState<DateEvents>({});\r\n\r\n  const highlightedDates: HighlightedDate[] = [\r\n    {\r\n      date: new Date(2024, 0, 15),\r\n      style: { backgroundColor: '#ff6b6b', color: 'white' }\r\n    }\r\n  ];\r\n\r\n  const handleDateChange = (date: Date): void => {\r\n    setSelectedDate(date);\r\n    console.log('Selected:', date);\r\n  };\r\n\r\n  const handleEventsChange = (newEvents: DateEvents): void => {\r\n    setEvents(newEvents);\r\n  };\r\n\r\n  const calendarProps: CalendarProps = {\r\n    label: \"Select Date\",\r\n    defaultDate: selectedDate,\r\n    onChange: handleDateChange,\r\n    events,\r\n    onEventsChange: handleEventsChange,\r\n    highlightedDates,\r\n    todayButtonLabel: \"Today\",\r\n    dateFormat: \"MDY\"\r\n  };\r\n\r\n  return <Calendar {...calendarProps} />;\r\n};\r\n```\r\n\r\n","readmeFilename":"README.md"}