{"_id":"@armin-eslami/persian-calendar","_rev":"31-fac4f4045855efbf306475b37754a0fd","name":"@armin-eslami/persian-calendar","dist-tags":{"latest":"1.0.16"},"versions":{"1.0.13":{"name":"@armin-eslami/persian-calendar","version":"1.0.13","keywords":["calendar","persian","react","component","year","month","big","jalali","jalalli"],"author":{"name":"Armin Eslami"},"license":"MIT","_id":"@armin-eslami/persian-calendar@1.0.13","maintainers":[{"name":"armin-eslami","email":"armineslami@hotmail.com"}],"homepage":"https://github.com/armineslami/persian-calendar#readme","bugs":{"url":"https://github.com/armineslami/persian-calendar/issues"},"dist":{"shasum":"51d239bb18946cf5cbed6698d104764e8b8dddee","tarball":"https://registry.npmjs.org/@armin-eslami/persian-calendar/-/persian-calendar-1.0.13.tgz","fileCount":28,"integrity":"sha512-0ea5SjrYV8XS1q/U2Qm7UeOUlNs6gRru1EKFWBFMWLiGruGs5iWtxtTSpknbvZG/MJkr/w0Sgr78C+4HxkxT3A==","signatures":[{"sig":"MEYCIQCh3Rh+94PAGGttYWHkY5bTl5NFGVHT/SnEZnnc3R4ngQIhAMFZJBqSDdpncrnXnu+wd3raFotH5G9ouyaCg3jQCs1n","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":258227},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"da697667d66149a0a708067d9641e57fbd6ebf3f","scripts":{"build":"rm -rf dist && rollup -c"},"_npmUser":{"name":"armin-eslami","email":"armineslami@hotmail.com"},"repository":{"url":"git+https://github.com/armineslami/persian-calendar.git","type":"git"},"_npmVersion":"10.9.2","description":"Big persian calendar component made by react.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"clsx":"^2.1.0","tslib":"^2.8.1","moment-jalaali":"^0.10.4","tailwind-merge":"^2.2.0"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^4.41.0","postcss":"^8.5.3","typescript":"^5.0.0","@types/node":"^18.0.0","postcss-cli":"^11.0.1","tailwindcss":"^3.4.17","@types/react":"^18.0.0","autoprefixer":"^10.4.21","@types/moment-jalaali":"^0.7.9","rollup-plugin-postcss":"^4.0.2","postcss-prefix-selector":"^2.1.1","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^16.0.1","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/persian-calendar_1.0.13_1747911228363_0.7392029085953218","host":"s3://npm-registry-packages-npm-production"}},"1.0.14":{"name":"@armin-eslami/persian-calendar","version":"1.0.14","keywords":["calendar","persian","react","component","year","month","big","jalali","jalalli"],"author":{"name":"Armin Eslami"},"license":"MIT","_id":"@armin-eslami/persian-calendar@1.0.14","maintainers":[{"name":"armin-eslami","email":"armineslami@hotmail.com"}],"homepage":"https://github.com/armineslami/persian-calendar#readme","bugs":{"url":"https://github.com/armineslami/persian-calendar/issues"},"dist":{"shasum":"4de0e7a4d0c1e8efbe6487772a9d36b1824fce21","tarball":"https://registry.npmjs.org/@armin-eslami/persian-calendar/-/persian-calendar-1.0.14.tgz","fileCount":28,"integrity":"sha512-zMkz8hUlSWKkMrbt4tyNvLxrh71IWghXkd8Ve5k2+XXd/QVurGoj7gwVhMIv+cYRooznG22kXSfz7av7ZAVsyA==","signatures":[{"sig":"MEUCIBNdTtGY60CBH9E1zP4HWhIEQ8PDnOIjUAWVn0yeIUFlAiEAvUhh+XplviokZlny+Rfu/CTlrepfh/TzsQHbrBog6uc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":258245},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"eda0d53017398ebfcf3f2442717dbf7e18b2dc4b","scripts":{"build":"rm -rf dist && rollup -c"},"_npmUser":{"name":"armin-eslami","email":"armineslami@hotmail.com"},"repository":{"url":"git+https://github.com/armineslami/persian-calendar.git","type":"git"},"_npmVersion":"10.9.2","description":"Big persian calendar component made by react.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"clsx":"^2.1.0","tslib":"^2.8.1","moment-jalaali":"^0.10.4","tailwind-merge":"^2.2.0"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^4.41.0","postcss":"^8.5.3","typescript":"^5.0.0","@types/node":"^18.0.0","postcss-cli":"^11.0.1","tailwindcss":"^3.4.17","@types/react":"^18.0.0","autoprefixer":"^10.4.21","@types/moment-jalaali":"^0.7.9","rollup-plugin-postcss":"^4.0.2","postcss-prefix-selector":"^2.1.1","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^16.0.1","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=18.0.0 <20.0.0","react-dom":">=18.0.0 <20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/persian-calendar_1.0.14_1748418008680_0.6278743639619908","host":"s3://npm-registry-packages-npm-production"}},"1.0.16":{"name":"@armin-eslami/persian-calendar","version":"1.0.16","description":"Big persian calendar component made by react.","main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"}},"scripts":{"build":"rm -rf dist && rollup -c"},"keywords":["calendar","persian","react","component","year","month","big","jalali","jalalli"],"author":{"name":"Armin Eslami"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/armineslami/persian-calendar.git"},"dependencies":{"clsx":"^2.1.0","moment-jalaali":"^0.10.4","tailwind-merge":"^2.2.0","tslib":"^2.8.1"},"peerDependencies":{"react":">=18.0.0 <20.0.0","react-dom":">=18.0.0 <20.0.0"},"devDependencies":{"@rollup/plugin-node-resolve":"^16.0.1","@types/moment-jalaali":"^0.7.9","@types/node":"^18.0.0","@types/react":"^18.0.0","autoprefixer":"^10.4.21","postcss":"^8.5.3","postcss-cli":"^11.0.1","postcss-prefix-selector":"^2.1.1","rollup":"^4.41.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-typescript2":"^0.36.0","tailwindcss":"^3.4.17","typescript":"^5.0.0"},"_id":"@armin-eslami/persian-calendar@1.0.16","gitHead":"dee72ccd512f4d9eca7d43aad65864b96ad66e3c","bugs":{"url":"https://github.com/armineslami/persian-calendar/issues"},"homepage":"https://github.com/armineslami/persian-calendar#readme","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-jVIxHcr9g5O0ADhFKlI8YUedODF8uw1PncKR/llMlyiLq0iSvT+oQw3zEk5TfihVYennFPZqLGTbT9bL/ciqUg==","shasum":"5356fb28402c49f6418175ef1c4146aa90d8e9f2","tarball":"https://registry.npmjs.org/@armin-eslami/persian-calendar/-/persian-calendar-1.0.16.tgz","fileCount":28,"unpackedSize":259739,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC6+5svHVP5SolE3GKqa+tqzYA2d0JaZXDL6du5Z78ZQAIhAN6dEVk8jNX8ImfRO1+4EpApVS5SALZl9cOCDyhEa6nS"}]},"_npmUser":{"name":"armin-eslami","email":"armineslami@hotmail.com"},"directories":{},"maintainers":[{"name":"armin-eslami","email":"armineslami@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/persian-calendar_1.0.16_1759248753858_0.3768150125392291"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-28T07:40:08.576Z","modified":"2025-09-30T16:12:34.690Z","1.0.0":"2025-05-19T10:44:02.344Z","1.0.1":"2025-05-19T16:50:32.037Z","1.0.2":"2025-05-19T17:14:50.657Z","1.0.3":"2025-05-20T06:04:19.249Z","1.0.4":"2025-05-20T06:18:48.443Z","1.0.5":"2025-05-20T06:23:19.164Z","1.0.6":"2025-05-20T06:24:54.314Z","1.0.7":"2025-05-20T13:20:46.353Z","1.0.8":"2025-05-20T13:23:50.872Z","1.0.9":"2025-05-20T13:32:52.531Z","1.0.10":"2025-05-20T17:51:07.463Z","1.0.11":"2025-05-22T10:16:41.040Z","1.0.12":"2025-05-22T10:53:12.082Z","1.0.13":"2025-05-22T10:53:48.553Z","1.0.14":"2025-05-28T07:40:08.858Z","1.0.15":"2025-09-30T16:08:39.693Z","1.0.16":"2025-09-30T16:12:34.041Z"},"bugs":{"url":"https://github.com/armineslami/persian-calendar/issues"},"author":{"name":"Armin Eslami"},"license":"MIT","homepage":"https://github.com/armineslami/persian-calendar#readme","keywords":["calendar","persian","react","component","year","month","big","jalali","jalalli"],"repository":{"type":"git","url":"git+https://github.com/armineslami/persian-calendar.git"},"description":"Big persian calendar component made by react.","maintainers":[{"name":"armin-eslami","email":"armineslami@hotmail.com"}],"readme":"# Persian Calendar\n\n
\n \n \n \n \n \n
\n \"Wheel\n
Year View
\n 		\n \"Wheel\n
Month View
\n
\n
\n\nBig **Persian Calendar** component built with React, Typescript and Tailwindcss.\n\n## Features\n\n- Supports year and month view\n- Customizable theme\n- Supports events\n- Supports custom off dates\n- Supports controlled vs uncontrolled mode\n\n## Installation\n\n```bash\nnpm install @armin-eslami/persian-calendar\n```\n\n## Example Usage\n\n### 1. Uncontrolled component\n\n#### Basic\n\n```ts\nimport PersianCalendar from '@armin-eslami/persian-calendar';\n\nfunction App() {\n return (\n PersianCalendar\n year={year}\n />\n );\n}\n```\n\n#### Advanced\n\n```ts\nimport PersianCalendar, {\n PersianCalendarTheme,\n PersianCalendarEvent,\n Day,\n} from \"@armin-eslami/persian-calendar\";\n\nfunction App() {\n // Override the default theme\n const theme: PersianCalendarTheme = {\n fontFamily: \"Vazir\",\n background: \"#fff\",\n };\n\n // Set which days of week are off\n const offDaysOfWeek: number[] = [6]; // 6 is friday\n\n // Set off dates of the year\n const offDates: string[] = [\n \"1404/01/01\",\n \"1404/01/02\",\n \"1404/01/03\",\n \"1404/01/04\",\n \"1404/01/12\",\n \"1404/01/13\",\n ...\n ];\n\n // Set events\n const events: PersianCalendarEvent[] = [\n { title: \"بدون عنوان\", date: \"1404/02/05\", color: \"#ef4444\" },\n { title: \"بدون عنوان\", date: \"1404/02/13\", color: \"#10b981\" },\n { title: \"بدون عنوان\", date: \"1404/02/20\", color: \"#d946ef\" },\n ];\n\n // Gets called when a day is clicked\n const onDayClick = (day: Day) => {\n console.log(day);\n };\n\n return (\n \n );\n}\n\nexport default App;\n```\n\n### 2. Controlled component\n\n```ts\nimport PersianCalendar, {\n PersianCalendarMode,\n Day,\n getCurrentYear\n getCurrentMonthIndex,\n} from \"@armin-eslami/persian-calendar\";\n\nfunction App() {\n // Track the active mode\n const [activeMode, setActiveMode] = useState(\n PersianCalendarMode.YEAR\n );\n\n // Track the active year\n const [year, setYear] = useState(\"1404\");\n\n // Track active month\n const [month, setMonth] = useState(\n getCurrentMonthIndex()\n );\n\n // Gets called when a day is clicked\n const onDayClick = (day: Day) => {\n console.log(day);\n };\n\n const onNext = () => {\n if (activeMode === PersianCalendarMode.YEAR) {\n setYear((prev) => String(Number(prev) + 1));\n } else {\n const curretnMonth = month ?? getCurrentMonthIndex();\n if (curretnMonth + 1 > 12) {\n setMonth(() => 1);\n setYear((prev) => String(Number(prev) + 1));\n } else {\n setMonth((prev) => Number(prev) + 1);\n }\n }\n };\n\n const onPrevious = () => {\n if (activeMode === PersianCalendarMode.YEAR) {\n setYear((prev) => String(Number(prev) - 1));\n } else {\n const curretnMonth = month ?? getCurrentMonthIndex();\n if (curretnMonth - 1 < 1) {\n setMonth(() => 12);\n setYear((prev) => String(Number(prev) - 1));\n } else {\n setMonth((prev) => Number(prev) - 1);\n }\n }\n };\n\n const onToday = () => {\n setJYear(getCurrentYear());\n setMonth(getCurrentMonthIndex());\n };\n\n const onModeChange = (mode: PersianCalendarMode) => {\n setActiveMode(mode);\n };\n\n return (\n \n );\n}\n\nexport default App;\n```\n\n## PersianCalendar Props\n\n| Name | Type | Default | Required | Description |\n| ----------------------- | ------------------------------------- | ------------------------ | -------- | --------------------------------------------------------------------------- |\n| `year` | `string` | `getCurrentYear()` | Yes | Initial year to render. |\n| `month` | `number` | `getCurrentMonthIndex()` | No | Initial month index. |\n| `mode` | `PersianCalendarMode` | `'year'` | No | Display mode of the calendar. |\n| `theme` | `PersianCalendarTheme` | `defaultTheme` | No | Custom theme object for styling the calendar. |\n| `className` | `string` | — | No | Custom class names for the root container. |\n| `events` | `PersianCalendarEvent[]` | `[]` | No | List of event objects to mark on the calendar. |\n| `offDates` | `string[]` | `[]` | No | List of off-day date strings. The format must be jYYYY/jMM/jDD (1404/02/01) |\n| `offDaysOfWeek` | `number[]` | `[6]` | No | Array of weekday indices to mark as off days (0 = Saturday, 6 = Friday). |\n| `monthTitleFormat` | `string` | `\"jMMMM\"` | No | Format string for month title display. |\n| `hasNavbar` | `boolean` | `true` | No | Whether to show the navbar header. |\n| `hasModeSwitch` | `boolean` | `true` | No | Whether to show the mode switch. |\n| `gridColumnCount` | `1` → `12` | `4` | No | Number of columns used in year view grid. |\n| `showEventsOnDay` | `boolean` | `false` | No | Whether to show the day events on day iteself or below it on year mode. |\n| `multiEventsInDayColor` | `string` | `#f43f5e (accent)` | No | The Color to use if a day has more than one event on year mode. |\n| `onNext` | `() => void` | — | No | Callback when navigating forward. |\n| `onPrevious` | `() => void` | — | No | Callback when navigating backward. |\n| `onToday` | `() => void` | — | No | Callback for jumping to current date. |\n| `onModeChange` | `(mode: PersianCalendarMode) => void` | — | No | Callback when view mode is toggled. |\n| `onDayClick` | `(day: Day) => void` | — | No | Callback when a day is clicked. |\n\n## PersianCalendarTheme\n\n| Property | Type | Default Value | Required |\n| ------------------------- | ------ | -------------------- | -------- |\n| `primary` | string | `\"#6366f1\"` | No |\n| `secondary` | string | `\"#818cf8\"` | No |\n| `accent` | string | `\"#f43f5e\"` | No |\n| `background` | string | `\"#ffffff\"` | No |\n| `textPrimary` | string | `\"#1f2937\"` | No |\n| `textSecondary` | string | `\"#6b7280\"` | No |\n| `borderColor` | string | `\"#f3f4f6\"` | No |\n| `disabledMonthBackground` | string | `\"#e5e7eb\"` | No |\n| `fontSize.header` | string | `\"4rem\"` | No |\n| `fontSize.subHeader` | string | `\"3rem\"` | No |\n| `fontSize.title` | string | `\"1rem\"` | No |\n| `fontSize.body` | string | `\"0.875rem\"` | No |\n| `fontSize.footer` | string | `\"0.75rem\"` | No |\n| `fontFamily` | string | `\"monospace, Arial\"` | No |\n| `colors.monthTitleColor` | string | `\"#6366f1\"` | No |\n| `colors.offDayColor` | string | `\"#ef4444\"` | No |\n| `colors.hoverColor` | string | `\"#6366f1\"` | No |\n\n## PersianCalendarEvent\n\n| Property | Type | Required | Description |\n| -------- | ------ | -------- | -------------------------------------- |\n| `id` | number | No | Optional unique ID of the event. |\n| `title` | string | No | Optional title of the event. |\n| `date` | string | Yes | Date of the event (e.g. \"1404/02/05\"). |\n| `color` | string | No | Optional hex color for the event dot. |\n\n## Day\n\n| Property | Type | Required | Description |\n| ---------- | ---------------------- | -------- | ---------------------------------------------- |\n| `id` | string | Yes | Unique identifier, usually the formatted date. |\n| `title` | string | Yes | Display title for the day (e.g. \"۱\", \"۲\"). |\n| `active` | boolean | No | Whether this day is today. |\n| `enabled` | boolean | No | Whether this day is selectable. |\n| `isOffDay` | boolean | No | Whether this day is an off day. |\n| `event` | PersianCalendarEvent[] | No | Array of events assigned to this day. |\n| `month` | number | No | The month number this day belongs to. |\n\n## PersianCalendarMode\n\n```ts\nenum PersianCalendarMode {\n YEAR = \"1\",\n MONTH = \"2\",\n}\n```\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","readmeFilename":"README.md"}