{"id":4245,"url":"https://github.com/SmallStoneSK/react-native-draggable-calendar","last_synced_at":"2025-08-04T00:32:40.387Z","repository":{"id":57336620,"uuid":"132308286","full_name":"SmallStoneSK/react-native-draggable-calendar","owner":"SmallStoneSK","description":"A calendar component supporting dragging.","archived":false,"fork":false,"pushed_at":"2019-06-06T11:57:29.000Z","size":762,"stargazers_count":104,"open_issues_count":2,"forks_count":18,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-28T22:33:33.992Z","etag":null,"topics":["calendar","react-native"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SmallStoneSK.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-06T05:02:46.000Z","updated_at":"2024-02-16T17:20:42.000Z","dependencies_parsed_at":"2022-09-11T08:52:19.132Z","dependency_job_id":null,"html_url":"https://github.com/SmallStoneSK/react-native-draggable-calendar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmallStoneSK%2Freact-native-draggable-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmallStoneSK%2Freact-native-draggable-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmallStoneSK%2Freact-native-draggable-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmallStoneSK%2Freact-native-draggable-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SmallStoneSK","download_url":"https://codeload.github.com/SmallStoneSK/react-native-draggable-calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576898,"owners_count":17939645,"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","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":["calendar","react-native"],"created_at":"2024-01-05T20:17:05.660Z","updated_at":"2024-12-07T07:31:33.463Z","avatar_url":"https://github.com/SmallStoneSK.png","language":"JavaScript","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"## DraggableCalendar\n\nA calendar component supporting dragging operation.\n\n## 1. Examples\n\nDownload the repository, cd the examples directory, and run it on simulator.\n\n```bash\ngit clone git@github.com:SmallStoneSK/react-native-draggable-calendar.git\ncd examples\nreact-native run-ios      # for ios\nreact-native run-android  # for android\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./picture/demo1.gif\" width=250/\u003e\n  \u003cimg src=\"./picture/demo2.gif\" width=250/\u003e\n  \u003cimg src=\"./picture/demo3.gif\" width=250/\u003e\n\u003c/p\u003e\n\n## 2. Usage\n\nAt first, you should install react-native-draggable-calendar. Like this:\n\n```bash\nnpm install react-native-draggable-calendar --save\n```\n\n1. For basic usage, you can use it as following:\n\n```javascript\nexport class BasicUsageDemo extends Component {\n\n  constructor(props) {\n    super(props);\n  }\n\n  onGetTime = () =\u003e {\n    // you can get the selected time.\n    console.log('onGetTime: ', this._calendar.getSelection());\n  };\n\n  onSelectionChange = (newSelection) =\u003e {\n    // when selected time changes, this func will be called.\n    console.log('onSelectionChange', newSelection);\n  };\n\n  render() {\n    return (\n      \u003cView style={{flex: 1}}\u003e\n        \u003cDraggableCalendar\n          ref={_ =\u003e this._calendar = _}\n          onSelectionChange={this.onSelectionChange}\n        /\u003e\n        \u003cTouchableOpacity onPress={this.onGetTime} style={{\n          justifyContent: 'center', alignItems: 'center',\n          left: 0, right: 0, bottom: 0, paddingVertical: 15,\n          position: 'absolute', backgroundColor: '#4291EF'\n        }}\u003e\n          \u003cText style={{color: '#FFF'}}\u003eGet Time\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n2. As it has provided a default style, you can use it as following for in-depth customization.\n\n```javascript\nexport class CustomizationDemo extends Component {\n  _genStyles() {\n    return {\n      style: styles.draggableContainer,\n      headerTextStyle: styles.dayText,\n      monthHeaderTextStyle: styles.dayText,\n      dayTextStyle: styles.dayText,\n      selectedDayTextStyle: styles.selectedDayText,\n      singleDayContainerStyle: styles.selectedDayContainer,\n      beginDayContainerStyle: styles.selectedDayContainer,\n      middleDayContainerStyle: styles.selectedDayContainer,\n      endDayContainerStyle: styles.selectedDayContainer\n    };\n  }\n  render() {\n    return (\n      \u003cDraggableCalendar {...this._genStyles()}/\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  draggableContainer: {\n    backgroundColor: '#303E4D'\n  },\n  dayText: {\n    color: '#EAC351'\n  },\n  selectedDayText: {\n    color: '#303E4D'\n  },\n  selectedDayContainer: {\n    backgroundColor: '#EAC351'\n  }\n});\n```\n\nFor detailed xxxStyle meaning, you can see the following picture:\n\n\u003cimg align=\"center\" src=\"./picture/style-introduction.png\"/\u003e\n\n## 3. Others\n\n### 1. Decide how many month to render.\n\nYou have two ways to deside this.\n\n1. pass fullDateRange and availableDateRange. Like this:\n\n```javascript\n\u003cDraggableCalendar\n  fullDateRange={[new Date(2018, 4, 1, 0, 0, 0), new Date(2018, 6, 31, 0, 0, 0)]}\n  availableDateRange={[new Date(2018, 4, 21, 0, 0, 0), new Date(2018, 6, 31, 0, 0, 0)]}\n  /\u003e\n```\n\nSo, the date between 5.1~5.20 will not be selected. You'd better specify the first day of a month and the last day of a month to fullDateRange.\n\n2. pass maxDays. Like this:\n\n```javascript\n\u003cDraggableCalendar maxDays={180}/\u003e\n```\n\nIn this way, the availableDateRange will be \\[today, today + 180\\]. And the fullDateRange will be \\[first day of this month, last day of the month containing (today + 180)\\].\n\n### 2. Customize your render content.\n\nIf you are not satisfied with the customization above, you can even pass renderMonthHeader/renderDay function to DraggableCalendar. Like this:\n\n```javascript\n\u003cDraggableCalendar\n  renderDay={data =\u003e this.yourRenderDay(data)}\n  renderMonthHeader={identifier =\u003e this.yourRenderMonthHeader(identifier)}\n  /\u003e\n```\n\n**Note**\n\nThe data passed to yourRenderDay is an object: \n\n```javascript\n{\n  date        // a date obj\n  status      // indicating its selected status. (enum value: see DAY_STATUS in Helper.js)\n  available   // indicating whether this day is touchable\n}\n```\n\nthe identifier passed to yourRenderMonthHeader is a string:\n\n```javascript\n'2018-05'   // you can use identifier.split('-') to get the year and month\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSmallStoneSK%2Freact-native-draggable-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSmallStoneSK%2Freact-native-draggable-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSmallStoneSK%2Freact-native-draggable-calendar/lists"}