{"_id":"@d3sm/kalendar","_rev":"4-b764d3f9067aec908ef77c65828601b3","name":"@d3sm/kalendar","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@d3sm/kalendar","version":"0.1.0","keywords":["react-native","expo","calendar","new-architecture","swiftui","compose"],"author":{"url":"https://github.com/d3sm/kalendar","name":"d3sm","email":"desmj@pm.me"},"license":"MIT","_id":"@d3sm/kalendar@0.1.0","maintainers":[{"name":"d3sm","email":"desmj@pm.me"}],"homepage":"https://github.com/d3sm/kalendar#readme","bugs":{"url":"https://github.com/d3sm/kalendar/issues"},"dist":{"shasum":"ceafc391ab48dc9abe5b823f5dad2166168143c1","tarball":"https://registry.npmjs.org/@d3sm/kalendar/-/kalendar-0.1.0.tgz","fileCount":96,"integrity":"sha512-MWFFaBPhk8iaxnxfHH8O2ZAu9KG8ApMHiKtS9UiKeqvSlVPERVPGcQU8qFoGvzCY0Dh/S/NTs93wFqhY5F29Yw==","signatures":[{"sig":"MEYCIQDNgwpPTMnmVv2hnGj0sF1u0QQKIgPkJgogciJkXo7YJgIhAKFL4kZM5Kw/eAg8j39vVMxWGqqIhOqoQ5A5CDkTkar8","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":336749},"main":"build/index.js","types":"build/index.d.ts","source":"src/index.ts","gitHead":"817b20b5ebd7d9aba27f3869c44a2c898c465fec","scripts":{"lint":"eslint src/","spec":"npm run spec:ts && npm run spec:ios && npm run spec:android","test":"npm run spec:ts","build":"expo-module build","clean":"expo-module clean","spec:ts":"TZ=UTC node --experimental-strip-types --experimental-test-module-mocks --test \"spec/ts/*.test.ts\"","spec:ios":"swift test","expo-module":"expo-module","spec:android":"cd example/android && ./gradlew :d3sm-kalendar:testDebugUnitTest","spec:generate":"node --experimental-strip-types spec/generate.mjs","prepublishOnly":"CI=1 expo-module build"},"_npmUser":{"name":"d3sm","email":"desmj@pm.me"},"repository":{"url":"git+https://github.com/d3sm/kalendar.git","type":"git"},"workspaces":["example"],"_npmVersion":"10.9.2","description":"A native calendar view for React Native — SwiftUI on iOS, Jetpack Compose on Android.","directories":{},"_nodeVersion":"22.13.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"yarn@4.17.1","devDependencies":{"expo":"^57.0.8","eslint":"^9.7.0","prettier":"^3.9.6","typescript":"~5.8.0","@types/react":"19.2.17","react-native":"^0.86.0","expo-module-scripts":"^56.0.3","eslint-config-universe":"^16.0.0","@typescript-eslint/parser":"^8.65.0"},"peerDependencies":{"expo":">=57.0.8","react":">=19.1.0","react-native":">=0.86.0"},"_npmOperationalInternal":{"tmp":"tmp/kalendar_0.1.0_1784925439004_0.3798536113913429","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@d3sm/kalendar","version":"0.1.2","publishConfig":{"access":"public"},"description":"A native calendar view for React Native — SwiftUI on iOS, Jetpack Compose on Android.","author":{"name":"d3sm","email":"desmj@pm.me","url":"https://github.com/d3sm/kalendar"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/d3sm/kalendar.git"},"homepage":"https://github.com/d3sm/kalendar#readme","bugs":{"url":"https://github.com/d3sm/kalendar/issues"},"main":"build/index.js","types":"build/index.d.ts","source":"src/index.ts","exports":{".":{"types":"./build/index.d.ts","default":"./build/index.js"}},"scripts":{"build":"expo-module build","prepublish":"CI=1 expo-module build","clean":"expo-module clean","lint":"eslint src/","test":"npm run spec:ts","expo-module":"expo-module","spec:generate":"node --experimental-strip-types spec/generate.mjs","spec:ts":"TZ=UTC node --experimental-strip-types --experimental-test-module-mocks --test \"spec/ts/*.test.ts\"","spec:ios":"swift test","spec:android":"cd example/android && ./gradlew :d3sm-kalendar:testDebugUnitTest","spec":"npm run spec:ts && npm run spec:ios && npm run spec:android"},"keywords":["react-native","expo","calendar","new-architecture","swiftui","compose"],"devDependencies":{"@types/react":"19.2.17","@typescript-eslint/parser":"^8.65.0","eslint":"^9.7.0","eslint-config-universe":"^16.0.0","expo":"^57.0.8","expo-module-scripts":"^56.0.3","prettier":"^3.9.6","react-native":"^0.86.0","typescript":"~5.8.0"},"peerDependencies":{"expo":">=57.0.8","react":">=19.1.0","react-native":">=0.86.0"},"workspaces":["example"],"packageManager":"yarn@4.17.1","_id":"@d3sm/kalendar@0.1.2","gitHead":"e1368a962676fe0977b808482ed1d08704d6a960","_nodeVersion":"22.13.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-ziSx5Mk/k0JwMCU5hYaM4bPCbDenZ3XbMV+fB8mc+Bj5tL83Qu/M/W0Gor4jAxqVbIFu0wbbZ4tEeudCfSgX9Q==","shasum":"66e4dccfc25c41550e05f47def88fd14f0cdbb5e","tarball":"https://registry.npmjs.org/@d3sm/kalendar/-/kalendar-0.1.2.tgz","fileCount":92,"unpackedSize":429435,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCrnQx4uuxXuTv2JZlfeuJJQ8y441j6GqdW5ipD5hv6sQIhAPp+NK+KGE2uq8Spah7RuVFTFL9AQJFvbconG6G57XkG"}]},"_npmUser":{"name":"d3sm","email":"desmj@pm.me"},"directories":{},"maintainers":[{"name":"d3sm","email":"desmj@pm.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/kalendar_0.1.2_1785503058983_0.5113438621784037"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-24T20:37:18.853Z","modified":"2026-07-31T13:04:19.427Z","0.1.0":"2026-07-24T20:37:19.168Z","0.1.1":"2026-07-30T16:57:15.133Z","0.1.2":"2026-07-31T13:04:19.218Z"},"bugs":{"url":"https://github.com/d3sm/kalendar/issues"},"author":{"name":"d3sm","email":"desmj@pm.me","url":"https://github.com/d3sm/kalendar"},"license":"MIT","homepage":"https://github.com/d3sm/kalendar#readme","keywords":["react-native","expo","calendar","new-architecture","swiftui","compose"],"repository":{"type":"git","url":"git+https://github.com/d3sm/kalendar.git"},"description":"A native calendar view for React Native — SwiftUI on iOS, Jetpack Compose on Android.","maintainers":[{"name":"d3sm","email":"desmj@pm.me"}],"readme":"# kalendar\n\nA native calendar for React Native. It draws with SwiftUI on iOS and Jetpack Compose on Android, so paging, the zoom between views, and drag-to-reschedule all run natively and stay smooth.\n\n<p align=\"center\">\n  <img src=\"media/demo.gif\" width=\"300\" alt=\"Zooming between month, year, and day views\" />\n</p>\n\n## What it does\n\n- Renders natively — SwiftUI on iOS, Compose on Android.\n- Month, year, and day views, with a zoom between them.\n- Themeable: accent, text, and background colors, corner radius, selection shape, font.\n- On iOS 26, selection and event chips use Liquid Glass (`.glassEffect`); below that it's solid fills, and on Android it's translucent Material.\n- Works with your own day screen, or the built-in one.\n- Honors week start, locale, and 12- or 24-hour time.\n\n## Screenshots\n\n| Month                                                                               | Year                                                                              | Day                                                                             |\n| ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |\n| ![Month view](media/month.png) | ![Year view](media/year.png) | ![Day view](media/day.png) |\n\n| Android                                       | iOS                                       |\n| --------------------------------------------- | ----------------------------------------- |\n| ![Sheet with events](media/android_sheet.png) | ![Sheet with events](media/ios_sheet.png) |\n| ![Drill-down](media/android_drill.gif)        | ![Drill-down](media/ios_drill.gif)        |\n\n## Requirements\n\n- Expo SDK 57+ / React Native 0.81+, with the New Architecture (Fabric) enabled.\n- iOS 16.4+. Liquid Glass needs iOS 26; below that it falls back to solid fills.\n- Android 7.0+ (`minSdk` 24).\n\n## Install\n\n```sh\nnpx expo install @d3sm/kalendar\n```\n\n## Usage\n\nA month picker:\n\n```tsx\nimport { KalendarView } from '@d3sm/kalendar';\n\n<KalendarView\n  style={{ flex: 1 }}\n  selectedDate={date}\n  markedDates={['2026-07-03', '2026-07-20']}\n  onDayPress={(e) => setDate(e.nativeEvent.date)}\n  accentColor='#3b82f6'\n  eventEditor\n  events={events}\n  onEventChange={(e) => update(e.nativeEvent)}\n  onEventDelete={(e) => remove(e.nativeEvent.id)}\n/>;\n```\n\n## Opening a day\n\nSet `dayView` and tapping a day zooms into a native day view — an hour timeline you can drag events around on and pinch to zoom. `daySheet` shows the same thing in a bottom sheet instead.\n\nWant your own screen? Leave both off and handle `onDayPress`. It hands you the day's events (all-day and multi-day first, then timed), which is usually everything you need to route somewhere:\n\n```tsx\n<KalendarView\n  events={events}\n  onDayPress={(e) => {\n    const { date, events } = e.nativeEvent; // events on that day\n    navigation.navigate('MyDay', { date, events });\n  }}\n/>\n```\n\n`onDayPress` fires on every tap, even with `dayView` on, so you can prefetch or update nearby UI while still using the built-in view.\n\n## Navigating\n\nThe props — `month`, `level`, `selectedDate` — cover most navigation. For the rest, like jumping back to today after someone has paged away, there's a `ref`:\n\n```tsx\nimport { useRef } from 'react';\nimport { KalendarView, type KalendarViewHandle } from '@d3sm/kalendar';\n\nconst cal = useRef<KalendarViewHandle>(null);\n\n<KalendarView ref={cal} events={events} />;\n\ncal.current?.goToToday();\ncal.current?.scrollToDate('2026-07-17');\n```\n\nIts methods resolve once the view has mounted, so call them from an effect or a handler.\n","readmeFilename":"README.md"}