{"id":46649637,"url":"https://github.com/jaganath-msj/calendarsimple","last_synced_at":"2026-03-08T06:01:46.387Z","repository":{"id":220893456,"uuid":"752862259","full_name":"Jaganath-MSJ/CalendarSimple","owner":"Jaganath-MSJ","description":"This calendar app provides a user-friendly interface to view, select, and manage dates. Users can navigate through months and years, add or subtract months, and view/add data for each date.","archived":false,"fork":false,"pushed_at":"2026-02-28T10:59:53.000Z","size":922,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2026-02-28T13:43:57.064Z","etag":null,"topics":["momentjs","reactjs","styles-components","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/calendar-simple","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/Jaganath-MSJ.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-02-05T01:25:42.000Z","updated_at":"2026-02-16T16:48:50.000Z","dependencies_parsed_at":"2025-12-27T17:07:43.420Z","dependency_job_id":null,"html_url":"https://github.com/Jaganath-MSJ/CalendarSimple","commit_stats":{"total_commits":12,"total_committers":1,"mean_commits":12.0,"dds":0.0,"last_synced_commit":"633b0caa5dfe9630b4fd5ac43e3d94e4b18a78da"},"previous_names":["jaganath-msj/simple-calendar"],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/Jaganath-MSJ/CalendarSimple","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jaganath-MSJ%2FCalendarSimple","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jaganath-MSJ%2FCalendarSimple/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jaganath-MSJ%2FCalendarSimple/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jaganath-MSJ%2FCalendarSimple/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jaganath-MSJ","download_url":"https://codeload.github.com/Jaganath-MSJ/CalendarSimple/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jaganath-MSJ%2FCalendarSimple/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30246872,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-08T05:41:50.788Z","status":"ssl_error","status_checked_at":"2026-03-08T05:41:39.075Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["momentjs","reactjs","styles-components","typescript"],"created_at":"2026-03-08T06:01:44.341Z","updated_at":"2026-03-08T06:01:46.378Z","avatar_url":"https://github.com/Jaganath-MSJ.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Calendar Simple\n\n![npm](https://img.shields.io/npm/v/calendar-simple)\n![npm unpacked size](https://img.shields.io/npm/unpacked-size/calendar-simple)\n![npm downloads](https://img.shields.io/npm/dm/calendar-simple)\n![license](https://img.shields.io/npm/l/calendar-simple)\n\nA lightweight, customizable, and responsive calendar component for React applications. Built with TypeScript and Day.js, `calendar-simple` provides a flexible solution for date selection and event management in your React projects.\n\n**[Live Demo](http://calendarsimple.netlify.app)**\n\n## Features\n\n- **🗓️ Multiple Views**: Support for Month, Week, Day, and Schedule views, giving users different perspectives of their events.\n- **✨ Event Handling**: Built-in support for displaying and managing events with custom colors.\n- **📱 Responsive**: Automatically adjusts layout based on container dimensions.\n- **🎨 Theming \u0026 Customization**: Fully customizable colors via the `theme` prop and individual element styling via `classNames`.\n- **🕒 Time Formatting**: Options for 12-hour (AM/PM) and 24-hour time formats.\n- **👆 Interactive**: Granular control with click handlers for dates, specific events, view changes, and \"more\" indicators.\n- **🕒 Current Time \u0026 Timezone**: Display a real-time indicator with automatic local timezone GMT offset, and optionally auto-scroll to the current time on load.\n- **🛡️ TypeScript**: Written in TypeScript for robust type safety and developer experience.\n\n## Installation\n\nInstall using your preferred package manager:\n\n```bash\nnpm install calendar-simple\n# or\nyarn add calendar-simple\n# or\npnpm add calendar-simple\n```\n\n## Usage\n\n### Basic Example\n\nImport the component and its styles to get started:\n\n```tsx\nimport React, { useState } from \"react\";\nimport Calendar from \"calendar-simple\";\nimport \"calendar-simple/dist/styles.css\";\n\nconst App = () =\u003e {\n  const [selectedDate, setSelectedDate] = useState(new Date());\n\n  return (\n    \u003cdiv style={{ height: \"600px\", padding: \"20px\" }}\u003e\n      \u003cCalendar\n        selectedDate={selectedDate}\n        onDateClick={setSelectedDate}\n        selectable\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### Advanced Usage with Events \u0026 Views\n\n```tsx\nimport React, { useState } from \"react\";\nimport Calendar, { CalendarEvent, ECalendarViewType } from \"calendar-simple\";\nimport \"calendar-simple/dist/styles.css\";\n\nconst MyCalendar = () =\u003e {\n  const [selectedDate, setSelectedDate] = useState(new Date());\n  const [view, setView] = useState\u003cECalendarViewType\u003e(\"month\");\n\n  const events: CalendarEvent[] = [\n    {\n      id: \"1\",\n      startDate: \"2024-02-14\",\n      title: \"Valentine's Day\",\n      color: \"#ffcccc\",\n    },\n    {\n      id: \"2\",\n      startDate: \"2024-02-20\",\n      endDate: \"2024-02-22\",\n      title: \"Tech Conference\",\n      color: \"#e6f7ff\",\n    },\n    {\n      id: \"3\",\n      startDate: \"2024-02-21T10:00:00\",\n      endDate: \"2024-02-21T12:00:00\",\n      title: \"Team Meeting\",\n      color: \"#cce5ff\",\n    },\n  ];\n\n  return (\n    \u003cCalendar\n      events={events}\n      selectedDate={selectedDate}\n      view={view}\n      onDateClick={setSelectedDate}\n      onViewChange={setView}\n      selectable\n      is12Hour\n      showCurrentTime\n      autoScrollToCurrentTime\n      theme={{\n        selected: { color: \"#fff\", bgColor: \"#007bff\" },\n        today: { color: \"#007bff\", bgColor: \"#e6f2ff\" },\n      }}\n      onEventClick={(event) =\u003e alert(`Clicked: ${event.title}`)}\n    /\u003e\n  );\n};\n```\n\n### Schedule View Example\n\nThe Schedule view displays a continuous scrollable list of events, grouped by date.\n\n```tsx\nimport React from \"react\";\nimport Calendar, { CalendarEvent } from \"calendar-simple\";\n\nconst upcomingEvents: CalendarEvent[] = [\n  // ... your events ...\n];\n\nconst ScheduleApp = () =\u003e (\n  \u003cCalendar events={upcomingEvents} view=\"schedule\" is12Hour={true} /\u003e\n);\n```\n\n## API Reference\n\n### Props\n\n| Prop                      | Type                                                   | Description                                                                       | Default           |\n| ------------------------- | ------------------------------------------------------ | --------------------------------------------------------------------------------- | ----------------- |\n| `events`                  | `CalendarEvent[]`                                      | Array of event data objects to display.                                           | `[]`              |\n| `selectedDate`            | `Date`                                                 | The currently selected date object.                                               | `undefined`       |\n| `view`                    | `ECalendarViewType`                                    | The current view: `\"month\"`, `\"week\"`, `\"day\"`, or `\"schedule\"`.                  | `\"month\"`         |\n| `selectable`              | `boolean`                                              | Enables visual selection state.                                                   | `false`           |\n| `is12Hour`                | `boolean`                                              | Display time in 12-hour AM/PM format instead of 24-hour format.                   | `false`           |\n| `onDateClick`             | `(date: Date) =\u003e void`                                 | Callback function fired when a date is clicked.                                   | `undefined`       |\n| `onEventClick`            | `(event: CalendarEvent) =\u003e void`                       | Callback function fired when an event is clicked.                                 | `undefined`       |\n| `onMoreClick`             | `(date: Date, hiddenEvents?: CalendarEvent[]) =\u003e void` | Callback fired when the \"+X more\" indicator is clicked.                           | `undefined`       |\n| `onNavigate`              | `(date: Date) =\u003e void`                                 | Callback fired when the calendar date range is changed (e.g. next month).         | `undefined`       |\n| `onViewChange`            | `(view: ECalendarViewType) =\u003e void`                    | Callback fired when the calendar view is changed via header buttons.              | `undefined`       |\n| `width`                   | `number \\| string`                                     | Width of the calendar container.                                                  | `auto-calculated` |\n| `height`                  | `number \\| string`                                     | Height of the calendar container.                                                 | `auto-calculated` |\n| `theme`                   | `CalendarTheme`                                        | Configuration object for custom colors.                                           | `{}`              |\n| `classNames`              | `CalendarClassNames`                                   | Custom CSS classes for various internal elements.                                 | `{}`              |\n| `dayType`                 | `EDayType`                                             | Format for day names: `\"full\"` (Monday) or `\"half\"` (Mon).                        | `\"half\"`          |\n| `pastYearLength`          | `number`                                               | Number of past years to show in the year dropdown.                                | `5`               |\n| `futureYearLength`        | `number`                                               | Number of future years to show in the year dropdown.                              | `5`               |\n| `maxEvents`               | `number`                                               | Maximum events to show per day cell before collapsing.                            | Auto-calc         |\n| `showCurrentTime`         | `boolean`                                              | Displays a line indicating the current time in day and week views.                | `false`           |\n| `autoScrollToCurrentTime` | `boolean`                                              | Automatically scrolls to the current time line when the view is initially loaded. | `false`           |\n\n### Types\n\n#### `CalendarEvent`\n\n```typescript\ninterface CalendarEvent {\n  id?: string;\n  startDate: string; // Format: YYYY-MM-DD or YYYY-MM-DDTHH:mm:ss\n  endDate?: string; // Format: YYYY-MM-DD or YYYY-MM-DDTHH:mm:ss\n  title: string; // Event title or description\n  color?: string; // CSS color string for event background\n  [key: string]: unknown; // Allow any custom metadata fields\n}\n```\n\n#### `ECalendarViewType` \u0026 `EDayType`\n\n```typescript\ntype ECalendarViewType = \"month\" | \"week\" | \"day\" | \"schedule\";\ntype EDayType = \"full\" | \"half\";\n```\n\n#### `CalendarTheme`\n\n```typescript\ninterface CalendarTheme {\n  default?: {\n    color?: string;\n    bgColor?: string;\n  };\n  selected?: {\n    color?: string;\n    bgColor?: string;\n  };\n  today?: {\n    color?: string;\n    bgColor?: string;\n  };\n}\n```\n\n#### `CalendarClassNames`\n\n```typescript\ninterface CalendarClassNames {\n  root?: string;\n  header?: string;\n\n  // Month view\n  table?: string;\n  tableHeader?: string;\n  tableDate?: string;\n\n  // Shared events\n  event?: string;\n  selected?: string;\n  today?: string;\n\n  // Week \u0026 Day view\n  dayHeader?: string;\n  dayName?: string;\n  dayNumber?: string;\n  timeColumn?: string;\n  timeSlot?: string;\n  dayColumn?: string;\n\n  // Schedule view\n  scheduleDateGroup?: string;\n  scheduleDateNumber?: string;\n  scheduleDateSubInfo?: string;\n  scheduleTime?: string;\n  scheduleTitle?: string;\n}\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaganath-msj%2Fcalendarsimple","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaganath-msj%2Fcalendarsimple","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaganath-msj%2Fcalendarsimple/lists"}