{"id":27386243,"url":"https://github.com/dreamcatcher45/fluentui-react-calendar","last_synced_at":"2026-05-05T23:31:56.005Z","repository":{"id":287137386,"uuid":"963695127","full_name":"dreamcatcher45/fluentui-react-calendar","owner":"dreamcatcher45","description":"A read-only calendar component with day, week, and month views for React applications","archived":false,"fork":false,"pushed_at":"2025-04-22T14:22:49.000Z","size":25,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-23T07:16:00.703Z","etag":null,"topics":["calendar","fluentui","fluentui-component","react","react-calendar"],"latest_commit_sha":null,"homepage":"https://fluentui-calendar.pages.dev","language":"JavaScript","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/dreamcatcher45.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2025-04-10T04:32:08.000Z","updated_at":"2025-04-22T14:22:53.000Z","dependencies_parsed_at":"2025-04-10T06:37:51.112Z","dependency_job_id":"b722d89d-b22e-439a-bba2-924991419d89","html_url":"https://github.com/dreamcatcher45/fluentui-react-calendar","commit_stats":null,"previous_names":["dreamcatcher45/fluentui-react-calendar"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dreamcatcher45/fluentui-react-calendar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamcatcher45%2Ffluentui-react-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamcatcher45%2Ffluentui-react-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamcatcher45%2Ffluentui-react-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamcatcher45%2Ffluentui-react-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dreamcatcher45","download_url":"https://codeload.github.com/dreamcatcher45/fluentui-react-calendar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamcatcher45%2Ffluentui-react-calendar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32672575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-05T11:29:49.557Z","status":"ssl_error","status_checked_at":"2026-05-05T11:29:48.587Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["calendar","fluentui","fluentui-component","react","react-calendar"],"created_at":"2025-04-13T17:18:02.374Z","updated_at":"2026-05-05T23:31:55.991Z","avatar_url":"https://github.com/dreamcatcher45.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FluentUI React Calendar\n\nA read-only, view-only calendar component for React applications with day, week, and month views. This lightweight component allows you to display events in a clean, modern interface inspired by the FluentUI design system.\n\n![npm](https://img.shields.io/npm/v/fluentui-react-calendar)\n[![NPM Package](https://img.shields.io/badge/npm-fluentui--react--calendar-blue)](https://www.npmjs.com/package/fluentui-react-calendar)\n\n**Website:** [https://fluentui-calendar.pages.dev/](https://fluentui-calendar.pages.dev/)\n\n\n## Features\n\n- **Multiple Views**: Seamlessly switch between day, week, and month views\n- **Event Display**: Shows events with times and titles in all views\n- **Navigation**: Easily navigate between days, weeks, or months\n- **Clickable Events**: Events can optionally link to URLs when clicked\n- **Current Day Highlighting**: Automatically highlights the current day\n- **Responsive Design**: Works across different screen sizes\n- **Read-Only**: View-only component - no editing capabilities\n- **Lightweight**: Focused on displaying events without unnecessary complexity\n\n## Installation\n\n```bash\nnpm install fluentui-react-calendar\n```\n\n## Usage\n\n```jsx\nimport Calendar from 'fluentui-react-calendar';\n\nfunction App() {\n  // Events object - keys are date strings in DD-MM-YYYY format\n  const events = {\n    \"21-04-2025\": [\n      { \n        \"time\": \"09:00\", \n        \"event\": \"Morning meeting\", \n        \"link\": \"https://meeting.example.com/morning\" // link is optional\n      },\n      { \n        \"time\": \"14:30\", \n        \"event\": \"Client presentation\" \n        // No link provided - will not be clickable\n      }\n    ],\n    \"22-04-2025\": [\n      { \n        \"time\": \"10:00\", \n        \"event\": \"Project kickoff\", \n        \"link\": \"https://projects.example.com/kickoff\" \n      }\n    ]\n  };\n\n  return (\n    \u003cdiv className=\"app\"\u003e\n      \u003cCalendar events={events} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Props\n\n| Prop | Type | Required | Description |\n|------|------|----------|-------------|\n| `events` | Object | Yes | An object containing events organized by date. The key format should be \"DD-MM-YYYY\" (e.g., \"21-04-2025\"). |\n\n### Event Object Properties\n\n| Property | Type | Required | Description |\n|----------|------|----------|-------------|\n| `time` | String | Yes | Time of the event in 24-hour format (e.g., \"09:00\", \"14:30\") |\n| `event` | String | Yes | Title or description of the event |\n| `link` | String | No | Optional URL that will open when the event is clicked |\n\n## Views\n\n### Month View\n- Displays an entire month in a traditional calendar grid\n- Shows up to 2 events per day with a \"+more\" indicator for additional events\n- Clicking on a day navigates to the day view for that date\n\n### Week View\n- Displays 7 days in a row\n- Shows up to 4 events per day with a \"+more\" indicator for additional events\n- Clicking on a day navigates to the day view for that date\n\n### Day View\n- Shows all events for a single day organized by hour\n- Events are placed in their respective time slots\n\n## Design Considerations\n\n- This is a **view-only** calendar - it does not support adding, editing, or deleting events\n- Events are displayed in chronological order\n- The current day is automatically highlighted\n- Time is displayed in 12-hour format with AM/PM indicators\n\n## Example Event Object\n\n```javascript\nconst events = {\n  \"21-04-2025\": [\n    { \n      \"time\": \"09:00\", \n      \"event\": \"Morning meeting\", \n      \"link\": \"https://meeting.example.com/morning\" \n    },\n    { \n      \"time\": \"14:33\", \n      \"event\": \"Client presentation\", \n      \"link\": \"https://presentation.example.com/client\" \n    },\n    { \n      \"time\": \"16:00\", \n      \"event\": \"Project deadline\", \n      \"link\": \"https://projects.example.com/deadline\" \n    }\n  ],\n  \"22-04-2025\": [\n    { \n      \"time\": \"10:00\", \n      \"event\": \"Project kickoff\", \n      \"link\": \"https://projects.example.com/kickoff\" \n    }\n  ]\n}\n```\n\n## Browser Support\n\n- All modern browsers (Chrome, Firefox, Safari, Edge)\n- Internet Explorer 11 (with appropriate polyfills)\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreamcatcher45%2Ffluentui-react-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdreamcatcher45%2Ffluentui-react-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreamcatcher45%2Ffluentui-react-calendar/lists"}