{"id":13424,"date":"2025-09-11T05:47:23","date_gmt":"2025-09-11T05:47:23","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=13424"},"modified":"2025-09-11T05:47:23","modified_gmt":"2025-09-11T05:47:23","slug":"react-native-calendar","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react-native\/react-native-calendar","title":{"rendered":"React Native Calendar"},"content":{"rendered":"<p>You can implement a calendar in React Native using the popular <a href=\"https:\/\/github.com\/wix\/react-native-calendars\" target=\"_blank\" rel=\"noopener\">react-native-calendars<\/a> library by Wix. It provides a simple and customizable calendar UI out of the box.<\/p>\n<h3>1. Install the library:<\/h3>\n<pre class=\"lang:addlightplain\">npm install react-native-calendars<\/pre>\n<h3>2. Calendar Display<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"routeros\">\r\n&lt;Calendar\r\n  onDayPress={day =&gt; {\r\n    setSelectedDate(day.dateString);\r\n  }}\r\n  markedDates={{\r\n    [selectedDate]: {\r\n      selected: true,\r\n      marked: true,\r\n      selectedColor: 'blue',\r\n    },\r\n  }}\r\n\/&gt;\r\n<\/pre>\n<h2>Explanation:<\/h2>\n<ul>\n<li ><b>onDayPress<\/b><span style=\"font-weight: 400;\">: Callback that triggers when a date is tapped. day.dateString is a string like &#8216;2025-07-24&#8217;.<\/span><\/li>\n<li ><b>markedDates<\/b><span style=\"font-weight: 400;\">: Object to highlight dates. We mark only the selectedDate:<\/span>\n<ul>\n<li><b>selected<\/b><span style=\"font-weight: 400;\">: true highlights the date.<\/span><\/li>\n<li><b>marked<\/b><span style=\"font-weight: 400;\">: true shows a small dot under the date.<\/span><\/li>\n<li><b>selectedColor<\/b><span>: &#8216;blue&#8217; changes the highlight color.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>3. Expo Example:<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"routeros\">\r\nimport React, { useState } from 'react';\r\nimport { View, Text, StyleSheet } from 'react-native';\r\nimport { Calendar } from 'react-native-calendars';\r\n\r\nconst MyCalendar = () => {\r\n  const [selectedDate, setSelectedDate] = useState('');\r\n\r\n  return (\r\n    <View style={styles.container}>\r\n      <Calendar\r\n        onDayPress={day => {\r\n          setSelectedDate(day.dateString);\r\n        }}\r\n        markedDates={{\r\n          [selectedDate]: {\r\n            selected: true,\r\n            marked: true,\r\n            selectedColor: 'blue',\r\n          },\r\n        }}\r\n      \/>\r\n      {selectedDate ? (\r\n        <Text style={styles.dateText}>Selected Date: {selectedDate}<\/Text>\r\n      ) : (\r\n        <Text style={styles.dateText}>No date selected<\/Text>\r\n      )}\r\n    <\/View>\r\n  );\r\n};\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    marginTop: 50,\r\n    padding: 16,\r\n  },\r\n  dateText: {\r\n    marginTop: 20,\r\n    fontSize: 18,\r\n    textAlign: 'center',\r\n  },\r\n});\r\n\r\nexport default MyCalendar;\r\n<\/pre>\n<div class=\"qanda-read-box\"><div class=\"bg-light read-more-icon\"><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\" alt=\"Also Read\"><p><\/p><h3>Also Read:<\/h3><a href=\"https:\/\/www.bacancytechnology.com\/blog\/react-native-hooks-to-build-app\" target=\"_blank\">React Native Hooks<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>You can implement a calendar in React Native using the popular react-native-calendars library by Wix. It provides a simple and customizable calendar UI out of the box. 1. Install the library: npm install react-native-calendars 2. Calendar Display &lt;Calendar onDayPress={day =&gt; { setSelectedDate(day.dateString); }} markedDates={{ [selectedDate]: { selected: true, marked: true, selectedColor: &#8216;blue&#8217;, }, }} \/&gt; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":13425,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[14],"tags":[],"class_list":["post-13424","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13424"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=13424"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13424\/revisions"}],"predecessor-version":[{"id":13426,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13424\/revisions\/13426"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/13425"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=13424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=13424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=13424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}