{"library":"react-native-calendars","title":"React Native Calendars","description":"react-native-calendars is a comprehensive and highly customizable set of calendar components designed for React Native applications. It provides a variety of views including a standard month calendar, a scrollable list of calendars (CalendarList), an agenda view combining a calendar with an event list, and expandable week views. The library is actively maintained with frequent releases, often multiple times a week or month, indicating rapid development and responsiveness to bug fixes and feature requests. The current stable version is 1.1314.0. Key differentiators include extensive styling options, support for marking specific dates with various styles (dots, periods, custom backgrounds), and accessibility features. It aims to offer a robust solution for displaying and interacting with date information in mobile applications without requiring complex native module linking beyond standard React Native setup.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-calendars"],"cli":null},"imports":["import { Calendar } from 'react-native-calendars'","import { CalendarList } from 'react-native-calendars'","import { Agenda } from 'react-native-calendars'","import { LocaleConfig } from 'react-native-calendars'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState, useCallback } from 'react';\nimport { SafeAreaView, StyleSheet, Text, View } from 'react-native';\nimport { Calendar, LocaleConfig } from 'react-native-calendars';\n\n// Configure localization (optional)\nLocaleConfig.locales['en'] = {\n  monthNames: ['January','February','March','April','May','June','July','August','September','October','November','December'],\n  monthNamesShort: ['Jan.','Feb.','Mar.','Apr.','May.','Jun.','Jul.','Aug.','Sep.','Oct.','Nov.','Dec.'],\n  dayNames: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],\n  dayNamesShort: ['Sun.','Mon.','Tue.','Wed.','Thu.','Fri.','Sat.'],\n  today: 'Today'\n};\nLocaleConfig.defaultLocale = 'en';\n\nconst App = () => {\n  const [selected, setSelected] = useState('');\n\n  const onDayPress = useCallback((day) => {\n    setSelected(day.dateString);\n  }, []);\n\n  // Define marked dates for special styling\n  const markedDates = {\n    [selected]: {\n      selected: true,\n      disableTouchEvent: true,\n      selectedColor: 'orange', \n      selectedTextColor: 'white'\n    },\n    '2026-04-20': {dots: [{key: 'vacation', color: 'blue', selectedDotColor: 'blue'}]},\n    '2026-04-21': {marked: true, dotColor: 'red'},\n    '2026-04-22': {selected: true, marked: true, selectedColor: 'purple', customStyles: { text: { color: 'white' } }}\n  };\n\n  return (\n    <SafeAreaView style={styles.container}>\n      <Text style={styles.title}>My Calendar App</Text>\n      <Calendar\n        onDayPress={onDayPress}\n        markedDates={markedDates}\n        enableSwipeMonths={true}\n        hideExtraDays={true}\n        showWeekNumbers={true}\n        firstDay={1} // Monday as first day of the week\n        style={styles.calendar}\n        theme={{\n          selectedDayBackgroundColor: '#00adf5',\n          todayTextColor: '#00adf5',\n          arrowColor: 'orange',\n          indicatorColor: 'orange',\n          textMonthFontWeight: 'bold',\n          textDayHeaderFontWeight: '500',\n          backgroundColor: '#ffffff'\n        }}\n      />\n      {selected && <Text style={styles.selectedDayText}>Selected day: {selected}</Text>}\n    </SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#f5fcff',\n    paddingTop: 50, // Ensure content is below status bar\n  },\n  title: {\n    fontSize: 24,\n    textAlign: 'center',\n    marginBottom: 20,\n    fontWeight: 'bold',\n    color: '#333',\n  },\n  calendar: {\n    borderWidth: 1,\n    borderColor: '#ddd',\n    borderRadius: 10,\n    marginHorizontal: 15,\n    padding: 10,\n    elevation: 3, // Android shadow\n    shadowColor: '#000', // iOS shadow\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.1,\n    shadowRadius: 4,\n  },\n  selectedDayText: {\n    fontSize: 18,\n    textAlign: 'center',\n    marginTop: 30,\n    fontWeight: '600',\n    color: '#00adf5',\n  },\n});\n\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates how to render a basic calendar component, handle day selection events, apply various custom date markings, and set a custom theme. It also includes basic localization setup.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}