{"_id":"@atom-design-mog/calendar","_rev":"2-35020366e60c903ebcf71d389a8ecd40","name":"@atom-design-mog/calendar","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@atom-design-mog/calendar","version":"1.0.0","keywords":["react-native","calendar","react-native-calendars","ui-component"],"author":{"name":"Avi Gupta"},"license":"MIT","_id":"@atom-design-mog/calendar@1.0.0","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"d527a3a628c76643d99dc51c3382ae5bf728d8e8","tarball":"https://registry.npmjs.org/@atom-design-mog/calendar/-/calendar-1.0.0.tgz","fileCount":3,"integrity":"sha512-Jz9j4Fj4AmyWtPLrw6QLSisGP4ypdRfbzvWiKgAfbf149wHQBG/co6v+XBXq4KNcE937TYBsq82GMogiiu0nnw==","signatures":[{"sig":"MEUCICUxxvZUO5rhxwnFNaI3VhXivPbP3IfBE8/KxzkmzZwGAiEAsz5mVTsgC1WW1olp+j+sH3vUUD9MR0ojrjlnTpIbEG8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1801},"main":"index.js","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"A styled wrapper around react-native-calendars for easier calendar usage.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","react-native-calendars":">=1.1300.0"},"_npmOperationalInternal":{"tmp":"tmp/calendar_1.0.0_1763724253025_0.6507642389643442","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@atom-design-mog/calendar","version":"1.0.1","description":"A styled wrapper around react-native-calendars for easier calendar usage.","main":"index.js","author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","calendar","react-native-calendars","ui-component"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","react-native-calendars":">=1.1300.0"},"_id":"@atom-design-mog/calendar@1.0.1","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-BuD3hbv5HTUSHIje0yKLYziPfaDz3EAcsfo+DJSkGsb0WbrPPzR3L2F+Z3WzuT01WD69eLnT7fqde5sSnA+e8g==","shasum":"79e47a676662360ecb3f82aa1338074aaed2f698","tarball":"https://registry.npmjs.org/@atom-design-mog/calendar/-/calendar-1.0.1.tgz","fileCount":4,"unpackedSize":5412,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCoHpd9qUOs4fXklo2et76VR4AA9/Q3VlrGA2tHVWY51gIhAKSmW2P94xRjXvk6nhHLbQBLXC31Xf9hYj40z8nyg2Lr"}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/calendar_1.0.1_1763966393075_0.9662158262092839"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-21T11:24:12.915Z","modified":"2025-11-24T06:39:53.445Z","1.0.0":"2025-11-21T11:24:13.204Z","1.0.1":"2025-11-24T06:39:53.234Z"},"author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","calendar","react-native-calendars","ui-component"],"description":"A styled wrapper around react-native-calendars for easier calendar usage.","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"readme":"# @atom-design-mog/calendar\n\nA customizable and elegant Calendar Component for React Native, built on top of `react-native-calendars` and styled for the Atom Design System. Supports selected date highlighting, min/max date limits, marked dates, and callback events.\n\n🚀 Installation\n\nInstall using npm:\n\n```bash\nnpm install @atom-design-mog/calendar\n```\n\nAlso install the required peer dependency:\n\n```bash\nnpm install react-native-calendars\n```\n\nor using yarn:\n\n```bash\nyarn add @atom-design-mog/calendar react-native-calendars\n```\n\n📸 Preview\n\nThe component includes:\n\n- 📅 Full monthly calendar\n- 🔘 Selected date with Atom red theme\n- 🚫 Min & Max date restrictions\n- 🏷 Support for custom marked dates\n- 📲 Callback when a user selects a date\n\n📦 Usage Example\n\n```javascript\nimport React, { useState } from 'react';\nimport { View, Text, ScrollView } from 'react-native';\nimport CalendarComponent from '@atom-design-mog/calendar';\n\nexport default function TestCalendarsScreen() {\n  const [selectedDate, setSelectedDate] = useState('2025-11-17');\n\n  return (\n    <ScrollView style={{ flex: 1 }}>\n      <View style={{ padding: 20, gap: 20 }}>\n        <Text style={{ fontSize: 18, fontWeight: '600' }}>\n          Calendar Component\n        </Text>\n\n        <CalendarComponent\n          selectedDate={selectedDate}\n          onDateSelect={setSelectedDate}\n          minDate=\"2025-01-01\"\n          maxDate=\"2025-12-31\"\n        />\n\n        <Text style={{ fontSize: 16 }}>\n          Selected Date: {selectedDate}\n        </Text>\n      </View>\n    </ScrollView>\n  );\n}\n```\n\n🔧 Props API\n\n| Prop             | Type                           | Default     | Description                                      |\n| ---------------- | ------------------------------ | ----------- | ------------------------------------------------ |\n| **selectedDate** | `string` (YYYY-MM-DD)          | `null`      | Currently selected date                          |\n| **onDateSelect** | `(dateString: string) => void` | `undefined` | Callback triggered when a day is pressed         |\n| **minDate**      | `string`                       | `undefined` | Minimum selectable date                          |\n| **maxDate**      | `string`                       | `undefined` | Maximum selectable date                          |\n| **markedDates**  | `object`                       | `{}`        | Add custom marks on specific dates               |\n| **...props**     | `Calendar` component props     | —           | Additional props passed to underlying `Calendar` |\n\n\n🏷 Marked Dates Format\n\nYou may pass custom marks like:\n\n```javascript\nconst markedDates = {\n  \"2025-11-17\": { marked: true },\n  \"2025-11-18\": { disabled: true },\n  \"2025-11-19\": { selected: true, selectedColor: \"#d9232d\" }\n};\n```\n\nThe component automatically merges your marks with the selected date highlight.\n\n🎨 Theming\n\nThis component applies Atom Design System colors:\n\n- Selected color → `#d9232d`\n- Today's text → `#d9232d`\n- Arrow color → `#d9232d`\n\nClean typography defaults. You can override all theme values via the `theme` prop if needed.\n\n🎛 Features\n\n- 📅 Clean, modern calendar UI\n- 🔴 Atom-themed selected date\n- ⛔ Min + Max selectable date range\n- 🏷 Supports rich marked dates\n- ⚡ Smooth interactions\n- 🧩 Fully customizable (passes props to `react-native-calendars`)\n\n📝 Notes\n\n- Always provide date strings in `YYYY-MM-DD` format.\n- This component wraps `react-native-calendars` for easier UI consistency.\n- Works in both Android and iOS.\n- Compatible with JavaScript & TypeScript.\n\n👤 Author\nAvi Gupta\n","readmeFilename":"README.md"}