{"id":26045824,"url":"https://github.com/f0wu5u/calendar-kit","last_synced_at":"2025-12-28T22:50:05.596Z","repository":{"id":250371546,"uuid":"806997017","full_name":"f0wu5u/calendar-kit","owner":"f0wu5u","description":"A simple JS only calendar UI for react native","archived":false,"fork":false,"pushed_at":"2025-03-10T07:39:29.000Z","size":12673,"stargazers_count":53,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-31T18:18:41.550Z","etag":null,"topics":["react","react-native","react-native-calendar-ui"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/f0wu5u.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-28T09:43:24.000Z","updated_at":"2025-03-14T09:37:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"a03cb9de-aabd-481b-ba17-c786f3a6ad78","html_url":"https://github.com/f0wu5u/calendar-kit","commit_stats":null,"previous_names":["arbta/react-native-calendar-ui","arbta/calendar-kit","f0wu5u/calendar-kit"],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f0wu5u%2Fcalendar-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f0wu5u%2Fcalendar-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f0wu5u%2Fcalendar-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f0wu5u%2Fcalendar-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/f0wu5u","download_url":"https://codeload.github.com/f0wu5u/calendar-kit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247713258,"owners_count":20983683,"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":["react","react-native","react-native-calendar-ui"],"created_at":"2025-03-07T20:49:02.872Z","updated_at":"2025-12-28T22:50:05.540Z","avatar_url":"https://github.com/f0wu5u.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Introduction\nA **simple** and **customizable** React Native component for displaying and interacting with **Gregorian calendar** dates.\n![@fowusu/calendar-kit](https://github.com/f0wu5u/calendar-kit/blob/main/static/calendar-kit.png?raw=true)\n\n# Features\n- πŸ’‘ 100% Typescript\n- ⚑️ Build with `@shopify/flashlist` for faster list rendering\n- πŸ•‘ Works in all timezones\n- 🎨 Fully customizable with example use cases\n- 🈲 Supports localization\n- πŸš€ DX, UX and Performance in one lightweight bundle\n- πŸ—“οΈ Multiview calendars (`Week`βœ…, `Month`βœ…, Yearly(coming soon)βš™οΈ)\n- πŸ‘¨πŸ½β€πŸ’» Works in every RN project including react native web\n\n# Examples\n\n| Vio.com | Airbnb |\n|-----------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------|\n| \u003cimg width=\"380\" src=\"https://github.com/f0wu5u/calendar-kit/blob/main/static/vio-calendar.gif\" /\u003e | \u003cimg width=\"380\" src=\"https://github.com/f0wu5u/calendar-kit/blob/main/static/airbnb-calendar.gif\"/\u003e |\n\n| Priceline | Booking.com |\n|-----------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------|\n| \u003cimg width=\"380\" src=\"https://github.com/f0wu5u/calendar-kit/blob/main/static/priceline-calendar.gif\" /\u003e | \u003cimg width=\"380\" src=\"https://github.com/f0wu5u/calendar-kit/blob/main/static/booking-calendar.gif\"/\u003e |\n\n| Localized | Performance |\n|-----------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------|\n| \u003cimg width=\"380\" src=\"https://github.com/f0wu5u/calendar-kit/blob/main/static/localize-calendar.gif\" /\u003e | \u003cimg width=\"380\" src=\"https://github.com/f0wu5u/calendar-kit/blob/main/static/performance-calendar.gif\"/\u003e |\n\n| Multiview (Week \u0026 Year) | Schedule |\n|------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------|\n| \u003cimg width=\"380\" src=\"https://github.com/f0wu5u/calendar-kit/blob/main/static/multiview-calendar.gif\" /\u003e | \u003cimg width=\"380\" src=\"https://github.com/f0wu5u/calendar-kit/blob/main/static/schedule-calendar.gif\"/\u003e |\n\n\n# Installation\nTo install the package, use npm or yarn:\n\n```bash\nnpm install @fowusu/calendar-kit\n```\nor\n\n```bash\nyarn add @fowusu/calendar-kit\n```\n\nor\n\n```bash\nyarn expo add @fowusu/calendar-kit\n```\n\n\u003e ⚠️ You need to install `@shopify/flash-list`\n```bash\nyarn add @shopify/flash-list\n```\n\n```bash\nyarn expo add @shopify/flash-list\n```\n\n# Usage\nHere’s a basic example of how to use the `@fowusu/calendar-kit` package:\n\n## Calendar\n```typescript jsx\nimport React, { useCallback, useState } from \"react\";\nimport { Calendar, toLocaleDateString } from \"@fowusu/calendar-kit\";\n\nconst today = new Date();\n\nconst todayDateString = toLocaleDateString(today);\n\nconst CalendarComponent = () =\u003e {\n const [selectedDay, setSelectedDay] = useState\u003cstring\u003e();\n\n const onDayPress = useCallback((dateString) =\u003e {\n setSelectedDay(dateString);\n }, []);\n\n return (\n \u003cCalendar\n date={todayDateString}\n markedDates={[selectedDay]}\n onDayPress={onDayPress}\n /\u003e\n );\n};\n```\n\n## CalendarList\n```typescript jsx\nimport React, { useCallback, useState } from \"react\";\nimport {CalendarList, toLocaleDateString} from \"@fowusu/calendar-kit\";\n\nconst today = new Date();\nconst todayDateString = toLocaleDateString(today);\n\nconst CalendarListComponent = () =\u003e {\n const [selectedDay, setSelectedDay] = useState\u003cstring\u003e();\n \n const onDayPress = useCallback((dateString) =\u003e {\n setSelectedDay(dateString);\n }, []);\n\n return (\n \u003cCalendarList\n currentDate={todayDateString}\n estimatedCalendarSize={{\n fiveWeekCalendarSize: 400\n }}\n markedDates={[selectedDay]}\n futureMonthsCount={12}\n pastMonthsCount={0}\n onDayPress={onDayPress}\n /\u003e\n );\n};\n```\n\n# API Reference\nSee our [API Reference docs](API_REFERENCE.md)\n# Contributing\nContributions are welcome! Please see the [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff0wu5u%2Fcalendar-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ff0wu5u%2Fcalendar-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff0wu5u%2Fcalendar-kit/lists"}