{"id":3999,"url":"https://github.com/christopherdro/react-native-calendar","last_synced_at":"2025-08-04T00:31:05.094Z","repository":{"id":32268024,"uuid":"35842587","full_name":"christopherdro/react-native-calendar","owner":"christopherdro","description":"[DEPRECATED] Calendar Component for React Native","archived":false,"fork":false,"pushed_at":"2017-12-27T00:01:40.000Z","size":2165,"stargazers_count":536,"open_issues_count":42,"forks_count":242,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-07-09T10:02:41.927Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/christopherdro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-18T21:05:16.000Z","updated_at":"2024-05-18T01:46:50.000Z","dependencies_parsed_at":"2022-09-14T19:51:20.927Z","dependency_job_id":null,"html_url":"https://github.com/christopherdro/react-native-calendar","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/christopherdro/react-native-calendar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christopherdro%2Freact-native-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christopherdro%2Freact-native-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christopherdro%2Freact-native-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christopherdro%2Freact-native-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/christopherdro","download_url":"https://codeload.github.com/christopherdro/react-native-calendar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christopherdro%2Freact-native-calendar/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268633447,"owners_count":24281786,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:16:58.068Z","updated_at":"2025-08-04T00:31:04.758Z","avatar_url":"https://github.com/christopherdro.png","language":"JavaScript","funding_links":[],"categories":["Components","组件","Libraries","Others"],"sub_categories":["UI"],"readme":"\n# :warning: Deprecated :warning:\nThis library is no longer being actively maintained.\nTry https://github.com/wix/react-native-calendars\n\n## react-native-calendar\n\nA `\u003cCalendar\u003e` component for React Native\n\nPortrait mode only\n\n## Installation\n\n`npm install react-native-calendar --save`\n\n## Usage\n```javascript\n\u003cCalendar\n  currentMonth={'2015-08-01'}       // Optional date to set the currently displayed month after initialization\n  customStyle={{day: {fontSize: 15, textAlign: 'center'}}} // Customize any pre-defined styles\n  dayHeadings={Array}               // Default: ['S', 'M', 'T', 'W', 'T', 'F', 'S']\n  eventDates={['2015-07-01']}       // Optional array of moment() parseable dates that will show an event indicator\n  events={[{date:'2015-07-01', ..}]}// Optional array of event objects with a date property and custom styles for the event indicator\n  monthNames={Array}                // Defaults to english names of months\n  nextButtonText={'Next'}           // Text for next button. Default: 'Next'\n  onDateSelect={(date) =\u003e this.onDateSelect(date)} // Callback after date selection\n  onDateLongPress={(date) =\u003e this.onDateLongPress(date)} // Callback after date is long pressed\n  onSwipeNext={this.onSwipeNext}    // Callback for forward swipe event\n  onSwipePrev={this.onSwipePrev}    // Callback for back swipe event\n  onTouchNext={this.onTouchNext}    // Callback for next touch event\n  onTouchPrev={this.onTouchPrev}    // Callback for prev touch event\n  onTitlePress={this.onTitlePress}  // Callback on title press\n  prevButtonText={'Prev'}           // Text for previous button. Default: 'Prev'\n  removeClippedSubviews={false}     // Set to false for us within Modals. Default: true\n  renderDay={\u003cCustomDay /\u003e}         // Optionally render a custom day component\n  scrollEnabled={true}              // False disables swiping. Default: False\n  selectedDate={'2015-08-15'}       // Day to be selected\n  showControls={true}               // False hides prev/next buttons. Default: False\n  showEventIndicators={true}        // False hides event indicators. Default:False\n  startDate={'2015-08-01'}          // The first month that will display. Default: current month\n  titleFormat={'MMMM YYYY'}         // Format for displaying current month. Default: 'MMMM YYYY'\n  today={'2017-05-16'}              // Defaults to today\n  weekStart={1} // Day on which week starts 0 - Sunday, 1 - Monday, 2 - Tuesday, etc, Default: 1\n/\u003e\n```\n\n## Available custom styles\n\nThere are a number of pre-defined styles in the calendar. Below, we will give an example of how each of them can be changed depending on your use case.\n\n### calendarContainer\n\n`calendarContainer` changes the background of the calendar.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    calendarContainer: {\n      backgroundColor: 'blue',\n    },\n  }\n  return \u003cCalendar customStyle={customStyle} /\u003e\n}\n```\n\n![calendarContainer](images/calendarContainer.png)\n\n### calendarControls\n\n`calendarControls` changes only the bar on the top that contains the month and year by default, but can also contain controls for changing the month.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    calendarControls: {\n      backgroundColor: 'blue',\n    },\n  }\n  return \u003cCalendar customStyle={customStyle} /\u003e\n}\n```\n\n![calendarControls](images/calendarControls.png)\n\n### calendarHeading\n\n`calendarHeading` changes the bar that contains the days of the week.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    calendarHeading: {\n      backgroundColor: 'blue',\n    },\n  }\n  return \u003cCalendar customStyle={customStyle} /\u003e\n}\n```\n\n![calendarHeading](images/calendarHeading.png)\n\n### controlButton\n\n`controlButton` shows the next and previous buttons that allow you to change the current month. The `showControls` prop must be passed through to `\u003cCalendar /\u003e` in order for this style to take effect.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    controlButton: {\n      backgroundColor: 'blue',\n    },\n  }\n  return (\n    \u003cCalendar\n      showControls\n      customStyle={customStyle} /\u003e\n  )\n}\n```\n\n![controlButton](images/controlButton.png)\n\n### controlButtonText\n\n`controlButtonText` applies styles to the text that is rendered when the `showControls` prop is `true`. The text can also be changed using the `prevButtonText` and `nextButtonText` props.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    controlButtonText: {\n      color: 'blue',\n    },\n  }\n  return (\n    \u003cCalendar\n      showControls\n      customStyle={customStyle} /\u003e\n  )\n}\n```\n\n![controlButtonText](images/controlButtonText.png)\n\n### currentDayCircle\n\n`currentDayCircle` changes the style of the background behind the currently-selected day *when the currently-selected day is today*.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    currentDayCircle: {\n      backgroundColor: 'blue',\n    },\n  }\n  return \u003cCalendar customStyle={customStyle} /\u003e\n}\n```\n\n![currentDayCircle](images/currentDayCircle.png)\n\n### currentDayText\n\n`currentDayText` changes the style of the current day (defaults to `red`) to differentiate it from other days.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    currentDayText: {\n      color: 'blue',\n    },\n  }\n  return \u003cCalendar customStyle={customStyle} /\u003e\n}\n```\n\n![currentDayText](images/currentDayText.png)\n\n### day\n\n`day` changes the text of every day other than today and weekend days.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    day: {\n      color: 'blue',\n    },\n  }\n  return \u003cCalendar customStyle={customStyle} /\u003e\n}\n```\n\n![day](images/day.png)\n\n### dayButton\n\n`dayButton` changes the background behind all valid days.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    dayButton: {\n      backgroundColor: 'blue',\n    },\n  }\n  return \u003cCalendar customStyle={customStyle} /\u003e\n}\n```\n\n![dayButton](images/dayButton.png)\n\n### dayButtonFiller\n\n`dayButtonFiller` styles the background behind all invalid days.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    dayButtonFiller: {\n      backgroundColor: 'blue',\n    },\n  }\n  return \u003cCalendar customStyle={customStyle} /\u003e\n}\n```\n\n![dayButtonFiller](images/dayButtonFiller.png)\n\n### dayCircleFiller\n\n`dayCircleFiller` styles a circle around all days other than the active day.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    dayCircleFiller: {\n      backgroundColor: 'blue',\n    },\n  }\n  return \u003cCalendar customStyle={customStyle} /\u003e\n}\n```\n\n![dayCircleFiller](images/dayCircleFiller.png)\n\n### dayHeading\n\n`dayHeading` styles the text for non-weekend days in the day of the week bar.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    dayHeading: {\n      color: 'blue',\n    },\n  }\n  return (\n    \u003cCalendar\n    showEventIndicators\n    customStyle={customStyle} /\u003e\n  )\n}\n```\n\n![dayHeading](images/dayHeading.png)\n\n### eventIndicator\n\n`eventIndicator` styles the event indicator bubble for days that have events. Must pass either an `events` array or `eventDates` array and have `showEventIndicators` passed as `true` for the event indicators to display.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    eventIndicator: {\n      backgroundColor: 'blue',\n      width: 10,\n      height: 10,\n    },\n  }\n  return (\n    \u003cCalendar\n      showEventIndicators\n      eventDates={['2016-11-01', '2016-11-07', '2016-11-19']}\n      customStyle={customStyle} /\u003e\n  )\n}\n```\n\n![eventIndicator](images/eventIndicator.png)\n\n### eventIndicatorFiller\n\n`eventIndicatorFiller` styles the event indicator space for days that do not have events. Must pass `showEventIndicators` as `true` for the event indicators to display.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    eventIndicatorFiller: {\n      backgroundColor: 'blue',\n      width: 10,\n      height: 10,\n    },\n  }\n  return (\n    \u003cCalendar\n      showEventIndicators\n      eventDates={['2016-11-01', '2016-11-07', '2016-11-19']}\n      customStyle={customStyle} /\u003e\n  )\n}\n```\n\n![eventIndicatorFiller](images/eventIndicatorFiller.png)\n\n### hasEventCircle\n\n`hasEventCircle` styles the circle around the days that have events associated with them. Must pass either an `events` array or `eventDates` array and have `showEventIndicators` passed as `true` for the event indicators to display.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    hasEventCircle: {\n      backgroundColor: 'blue',\n    },\n  }\n  return (\n    \u003cCalendar\n      showEventIndicators\n      eventDates={['2016-11-01', '2016-11-07', '2016-11-19']}\n      customStyle={customStyle} /\u003e\n  )\n}\n```\n\n![hasEventCircle](images/hasEventCircle.png)\n\n### hasEventDaySelectedCircle\n\n`hasEventDaySelectedCircle` styles the circle around the selected day that have events associated with them. Must pass either an `events` array or `eventDates` array and have `showEventIndicators` passed as `true` for the event indicators to display.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    hasEventCircle: {\n      backgroundColor: 'blue',\n    },\n    hasEventDaySelectedCircle: {\n      backgroundColor: 'red',\n  \t},\n  }\n  return (\n    \u003cCalendar\n      showEventIndicators\n      eventDates={['2016-12-03', '2016-12-21', '2016-12-22', '2016-12-30']}\n      customStyle={customStyle} /\u003e\n  )\n}\n```\n\n\u003cimg src=\"images/hasEventDaySelectedCircle.png\" width=\"300em\" /\u003e\n\n### hasEventText\n\n`hasEventText` styles the text of the days that have events associated with them. Must pass either an `events` array or `eventDates` array and have `showEventIndicators` passed as `true` for the event indicators to display.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    hasEventText: {\n      backgroundColor: 'blue',\n    },\n  }\n  return (\n    \u003cCalendar\n      showEventIndicators\n      eventDates={['2016-11-01', '2016-11-07', '2016-11-19']}\n      customStyle={customStyle} /\u003e\n  )\n}\n```\n\n![hasEventText](images/hasEventText.png)\n\n### monthContainer\n\n`monthContainer` styles the background behind the month.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    monthContainer: {\n      backgroundColor: 'blue',\n    },\n  }\n  return \u003cCalendar customStyle={customStyle} /\u003e\n}\n```\n\n![monthContainer](images/monthContainer.png)\n\n### selectedDayCircle\n\n`selectedDayCircle` styles the circle behind any selected day other than today.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    selectedDayCircle: {\n      backgroundColor: 'blue',\n    },\n  }\n  return \u003cCalendar customStyle={customStyle} /\u003e\n}\n```\n\n![selectedDayCircle](images/selectedDayCircle.png)\n\n### selectedDayText\n\n`selectedDayText` styles the text of the currently-selected day.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    selectedDayText: {\n      color: 'blue',\n    },\n  }\n  return \u003cCalendar customStyle={customStyle} /\u003e\n}\n```\n\n![selectedDayText](images/selectedDayText.png)\n\n### title\n\n`title` styles the title at the top of the calendar.\n`titleText` styles text within title.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    title: {\n      color: 'blue',\n    },\n    titleText: {\n      fontSize: 12,\n    },\n  }\n  return \u003cCalendar customStyle={customStyle} /\u003e\n}\n```\n\n![title](images/title.png)\n\n### weekendDayButton\n\n`weekendDayButton` styles the weekends background.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    weekendDayButton: {\n      backgroundColor: 'red',\n    },\n  }\n  return \u003cCalendar customStyle={customStyle} /\u003e\n}\n```\n\n![weekendDayButton](images/weekendDayButton.png)\n\n### weekendDayText\n\n`weekendDayText` styles the text of weekends.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    weekendDayText: {\n      color: 'blue',\n    },\n  }\n  return \u003cCalendar customStyle={customStyle} /\u003e\n}\n```\n\n![weekendDayText](images/weekendDayText.png)\n\n### weekendHeading\n\n`weekendHeading` styles the text of the weekend heading.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    weekendHeading: {\n      color: 'blue',\n    },\n  }\n  return \u003cCalendar customStyle={customStyle} /\u003e\n}\n```\n\n![weekendHeading](images/weekendHeading.png)\n\n### weekRow\n\n`weekRow` styles the background of the row associated with each week.\n\n```js\nconst Schedule = () =\u003e {\n  const customStyle = {\n    weekRow: {\n      backgroundColor: 'blue',\n    },\n  }\n  return \u003cCalendar customStyle={customStyle} /\u003e\n}\n```\n\n![weekRow](images/weekRow.png)\n\n## TODOS\n\n- [ ] Improve swipe feature\n- [ ] Language support\n\n## DEMO\n![Demo gif](images/demo.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristopherdro%2Freact-native-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchristopherdro%2Freact-native-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristopherdro%2Freact-native-calendar/lists"}