{"_id":"@atom_design/calendar","name":"@atom_design/calendar","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@atom_design/calendar","version":"1.0.0","description":"A styled React Native calendar component built on react-native-calendars with Atom Design theming.","main":"index.js","types":"index.d.ts","author":{"name":"Atom Design"},"license":"MIT","keywords":["react-native","calendar","react-native-calendars","datepicker","date-selection","ui-component","atom-design"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","react-native-calendars":">=1.1300.0","prop-types":">=15.0.0"},"_id":"@atom_design/calendar@1.0.0","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-JpZ0LoDRLvIrgGWMrnLgCdqpwDcclItsRn5YMhep81wneHRMtUonG5mQx9OH/B/5KO1hCcyJ8Swl6vj2EytIGw==","shasum":"5317f2ac159a905645c4d06eca6d870be114b6f7","tarball":"https://registry.npmjs.org/@atom_design/calendar/-/calendar-1.0.0.tgz","fileCount":5,"unpackedSize":21647,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAap5fgtAbcSRxUGluc3yy0GuefENTIdrIKtsR6B6QT6AiEAjIq/Ho3hcWR3n3PDL6Kj6SriRfKjfmW4ne8VRK5XlgM="}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/calendar_1.0.0_1764758222748_0.08538211662267225"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-03T10:37:02.648Z","1.0.0":"2025-12-03T10:37:02.931Z","modified":"2025-12-03T10:37:03.266Z"},"maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"description":"A styled React Native calendar component built on react-native-calendars with Atom Design theming.","keywords":["react-native","calendar","react-native-calendars","datepicker","date-selection","ui-component","atom-design"],"author":{"name":"Atom Design"},"license":"MIT","readme":"# @atom_design/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 date selection, min/max restrictions, marked dates, and full theming.\n\n---\n\n## ✨ Features\n\n- 📅 **Full Monthly Calendar** - Clean, modern calendar UI\n- 🎨 **Atom Design Theming** - Pre-configured with brand colors\n- 🔘 **Date Selection** - Single date selection with highlight\n- 🚫 **Min/Max Date Limits** - Restrict selectable date range\n- 🏷️ **Marked Dates** - Add dots, highlights, or custom marks\n- 📱 **Swipe Navigation** - Swipe to change months\n- ⚙️ **Highly Customizable** - Colors, theme, and all calendar props\n- 🎯 **TypeScript Support** - Full type definitions included\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install @atom_design/calendar\n```\n\nOr with yarn:\n\n```bash\nyarn add @atom_design/calendar\n```\n\n### Peer Dependencies\n\nMake sure you have the required peer dependencies installed:\n\n```bash\nnpm install react-native-calendars prop-types\n```\n\n---\n\n## 📥 Import\n\n```javascript\nimport Calendar from '@atom_design/calendar';\n// or\nimport { AtomCalendar } from '@atom_design/calendar';\n```\n\n---\n\n## 🎯 Basic Usage\n\n```jsx\nimport React, { useState } from 'react';\nimport Calendar from '@atom_design/calendar';\n\nfunction CalendarExample() {\n  const [selectedDate, setSelectedDate] = useState('2025-12-03');\n\n  return (\n    <Calendar\n      selectedDate={selectedDate}\n      onDateSelect={setSelectedDate}\n    />\n  );\n}\n```\n\n---\n\n## 📋 Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `selectedDate` | `string` | - | Selected date (YYYY-MM-DD format) |\n| `onDateSelect` | `(date: string) => void` | - | Callback when date is selected |\n| `minDate` | `string` | - | Minimum selectable date |\n| `maxDate` | `string` | - | Maximum selectable date |\n| `markedDates` | `object` | `{}` | Custom marked dates object |\n| `primaryColor` | `string` | `'#d9232d'` | Primary/accent color |\n| `showShadow` | `boolean` | `true` | Show shadow around calendar |\n| `hideArrows` | `boolean` | `false` | Hide navigation arrows |\n| `hideExtraDays` | `boolean` | `true` | Hide days from other months |\n| `disableMonthChange` | `boolean` | `false` | Disable month navigation |\n| `firstDay` | `number` | `0` | First day of week (0=Sun, 1=Mon) |\n| `showWeekNumbers` | `boolean` | `false` | Show week numbers |\n| `enableSwipeMonths` | `boolean` | `true` | Enable swipe navigation |\n| `containerStyle` | `ViewStyle` | - | Container style override |\n| `calendarStyle` | `ViewStyle` | - | Calendar style override |\n| `theme` | `object` | - | Custom theme object |\n| `testID` | `string` | - | Test ID for testing |\n\n---\n\n## 🎨 Customization Examples\n\n### With Date Restrictions\n\n```jsx\n<Calendar\n  selectedDate={date}\n  onDateSelect={setDate}\n  minDate=\"2025-01-01\"\n  maxDate=\"2025-12-31\"\n/>\n```\n\n### Custom Primary Color\n\n```jsx\n<Calendar\n  selectedDate={date}\n  onDateSelect={setDate}\n  primaryColor=\"#4CAF50\"\n/>\n```\n\n### With Marked Dates\n\n```jsx\n<Calendar\n  selectedDate={date}\n  onDateSelect={setDate}\n  markedDates={{\n    '2025-12-25': { marked: true, dotColor: 'green' },\n    '2025-12-31': { marked: true, dotColor: 'red' },\n    '2025-12-15': { disabled: true, disableTouchEvent: true },\n  }}\n/>\n```\n\n### Monday as First Day\n\n```jsx\n<Calendar\n  selectedDate={date}\n  onDateSelect={setDate}\n  firstDay={1} // Monday\n/>\n```\n\n### Without Shadow\n\n```jsx\n<Calendar\n  selectedDate={date}\n  onDateSelect={setDate}\n  showShadow={false}\n/>\n```\n\n### Custom Theme\n\n```jsx\n<Calendar\n  selectedDate={date}\n  onDateSelect={setDate}\n  theme={{\n    textDayFontSize: 18,\n    textMonthFontSize: 20,\n    dayTextColor: '#333',\n    monthTextColor: '#000',\n  }}\n/>\n```\n\n---\n\n## 🏷️ Marked Dates Format\n\nThe `markedDates` prop accepts an object where keys are dates in `YYYY-MM-DD` format:\n\n```javascript\nconst markedDates = {\n  // Simple dot marker\n  '2025-12-10': { marked: true },\n  \n  // Custom dot color\n  '2025-12-15': { marked: true, dotColor: 'blue' },\n  \n  // Disabled date\n  '2025-12-20': { disabled: true, disableTouchEvent: true },\n  \n  // Selected with custom color\n  '2025-12-25': { selected: true, selectedColor: 'green' },\n  \n  // Multiple dots\n  '2025-12-31': {\n    dots: [\n      { key: 'event1', color: 'red' },\n      { key: 'event2', color: 'blue' },\n    ],\n  },\n};\n```\n\n**Note:** The component automatically merges your `markedDates` with the `selectedDate` highlight.\n\n---\n\n## 🧪 Test Screen Example\n\n```jsx\nimport React, { useState } from 'react';\nimport { View, Text, ScrollView, StyleSheet, TouchableOpacity } from 'react-native';\nimport Calendar from '@atom_design/calendar';\n\nconst CalendarTestScreen = () => {\n  const [selectedDate, setSelectedDate] = useState('2025-12-03');\n  const [primaryColor, setPrimaryColor] = useState('#d9232d');\n\n  // Get today and date limits\n  const today = new Date().toISOString().split('T')[0];\n  const minDate = '2025-01-01';\n  const maxDate = '2025-12-31';\n\n  // Sample marked dates (holidays, events)\n  const markedDates = {\n    '2025-12-25': { marked: true, dotColor: '#4CAF50' }, // Christmas\n    '2025-12-31': { marked: true, dotColor: '#FF9800' }, // New Year's Eve\n    '2025-01-01': { marked: true, dotColor: '#2196F3' }, // New Year\n    '2025-01-26': { marked: true, dotColor: '#FF5722' }, // Republic Day\n    '2025-08-15': { marked: true, dotColor: '#FF5722' }, // Independence Day\n  };\n\n  // Color options\n  const colors = ['#d9232d', '#4CAF50', '#2196F3', '#9C27B0', '#FF9800'];\n\n  return (\n    <ScrollView style={styles.container}>\n      <Text style={styles.header}>Atom Design - Calendar</Text>\n\n      {/* Basic Calendar */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Basic Calendar</Text>\n        <Calendar\n          selectedDate={selectedDate}\n          onDateSelect={setSelectedDate}\n        />\n        <Text style={styles.result}>\n          Selected: {selectedDate || 'None'}\n        </Text>\n      </View>\n\n      {/* With Date Restrictions */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>With Min/Max Dates</Text>\n        <Text style={styles.description}>\n          Restricted to year 2025 only\n        </Text>\n        <Calendar\n          selectedDate={selectedDate}\n          onDateSelect={setSelectedDate}\n          minDate={minDate}\n          maxDate={maxDate}\n        />\n      </View>\n\n      {/* With Marked Dates */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>With Marked Dates</Text>\n        <Text style={styles.description}>\n          Holidays and events are marked with dots\n        </Text>\n        <Calendar\n          selectedDate={selectedDate}\n          onDateSelect={setSelectedDate}\n          markedDates={markedDates}\n        />\n        <View style={styles.legend}>\n          <View style={styles.legendItem}>\n            <View style={[styles.dot, { backgroundColor: '#4CAF50' }]} />\n            <Text style={styles.legendText}>Christmas</Text>\n          </View>\n          <View style={styles.legendItem}>\n            <View style={[styles.dot, { backgroundColor: '#FF9800' }]} />\n            <Text style={styles.legendText}>New Year's Eve</Text>\n          </View>\n          <View style={styles.legendItem}>\n            <View style={[styles.dot, { backgroundColor: '#FF5722' }]} />\n            <Text style={styles.legendText}>National Holiday</Text>\n          </View>\n        </View>\n      </View>\n\n      {/* Custom Color */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Custom Primary Color</Text>\n        <View style={styles.colorPicker}>\n          {colors.map((color) => (\n            <TouchableOpacity\n              key={color}\n              style={[\n                styles.colorOption,\n                { backgroundColor: color },\n                primaryColor === color && styles.colorSelected,\n              ]}\n              onPress={() => setPrimaryColor(color)}\n            />\n          ))}\n        </View>\n        <Calendar\n          selectedDate={selectedDate}\n          onDateSelect={setSelectedDate}\n          primaryColor={primaryColor}\n        />\n      </View>\n\n      {/* Monday First Day */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Monday as First Day</Text>\n        <Calendar\n          selectedDate={selectedDate}\n          onDateSelect={setSelectedDate}\n          firstDay={1}\n        />\n      </View>\n\n      {/* With Week Numbers */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>With Week Numbers</Text>\n        <Calendar\n          selectedDate={selectedDate}\n          onDateSelect={setSelectedDate}\n          showWeekNumbers\n          firstDay={1}\n        />\n      </View>\n\n      {/* No Shadow */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Without Shadow</Text>\n        <Calendar\n          selectedDate={selectedDate}\n          onDateSelect={setSelectedDate}\n          showShadow={false}\n          containerStyle={styles.flatCalendar}\n        />\n      </View>\n\n      {/* Disabled Month Change */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Current Month Only</Text>\n        <Text style={styles.description}>\n          Navigation arrows hidden, swipe disabled\n        </Text>\n        <Calendar\n          selectedDate={today}\n          onDateSelect={setSelectedDate}\n          hideArrows\n          disableMonthChange\n          enableSwipeMonths={false}\n        />\n      </View>\n    </ScrollView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#F5F5F5',\n  },\n  header: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    textAlign: 'center',\n    marginVertical: 20,\n    color: '#1A1A1A',\n  },\n  section: {\n    marginHorizontal: 16,\n    marginBottom: 24,\n  },\n  sectionTitle: {\n    fontSize: 18,\n    fontWeight: '600',\n    marginBottom: 8,\n    color: '#1A1A1A',\n  },\n  description: {\n    fontSize: 14,\n    color: '#666',\n    marginBottom: 12,\n  },\n  result: {\n    marginTop: 12,\n    fontSize: 14,\n    color: '#d9232d',\n    fontStyle: 'italic',\n    textAlign: 'center',\n  },\n  legend: {\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    marginTop: 12,\n    gap: 12,\n  },\n  legendItem: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  dot: {\n    width: 10,\n    height: 10,\n    borderRadius: 5,\n    marginRight: 6,\n  },\n  legendText: {\n    fontSize: 12,\n    color: '#666',\n  },\n  colorPicker: {\n    flexDirection: 'row',\n    marginBottom: 12,\n    gap: 10,\n  },\n  colorOption: {\n    width: 36,\n    height: 36,\n    borderRadius: 18,\n    borderWidth: 2,\n    borderColor: 'transparent',\n  },\n  colorSelected: {\n    borderColor: '#1A1A1A',\n  },\n  flatCalendar: {\n    borderWidth: 1,\n    borderColor: '#E0E0E0',\n  },\n});\n\nexport default CalendarTestScreen;\n```\n\n---\n\n## 🎨 Default Theme\n\nThe calendar comes with the following Atom Design theming:\n\n| Property | Value |\n|----------|-------|\n| Selected Day Color | `#d9232d` (or `primaryColor`) |\n| Today Text Color | `#d9232d` |\n| Arrow Color | `#d9232d` |\n| Day Text Color | `#1A1A1A` |\n| Disabled Text Color | `#CCCCCC` |\n| Month Text Color | `#1A1A1A` |\n| Background | `#FFFFFF` |\n\nOverride any value using the `theme` prop.\n\n---\n\n## 📝 TypeScript\n\nFull TypeScript definitions are included:\n\n```typescript\nimport Calendar, { AtomCalendarProps } from '@atom_design/calendar';\n\nconst MyCalendar: React.FC = () => {\n  const [date, setDate] = useState<string>('2025-12-03');\n\n  const handleDateSelect = (dateString: string): void => {\n    setDate(dateString);\n  };\n\n  return (\n    <Calendar\n      selectedDate={date}\n      onDateSelect={handleDateSelect}\n      minDate=\"2025-01-01\"\n      maxDate=\"2025-12-31\"\n    />\n  );\n};\n```\n\n---\n\n## ⚠️ Important Notes\n\n- Always provide dates in **YYYY-MM-DD** format\n- The component wraps `react-native-calendars` - all its props are supported\n- Works on both iOS and Android\n- Requires `react-native-calendars` as a peer dependency\n\n---\n\n## 📄 License\n\nMIT © Atom Design\n\n---\n\n## 👤 Author\n\n**Atom Design Team**\n\nPart of the Atom Design System for React Native.\n","readmeFilename":"README.md","_rev":"1-b07a6e0780db5a07d992583139b7c35e"}