{"id":15288072,"url":"https://github.com/im-perativa/streamlit-calendar","last_synced_at":"2025-05-16T02:07:21.876Z","repository":{"id":185019580,"uuid":"672831104","full_name":"im-perativa/streamlit-calendar","owner":"im-perativa","description":"A Streamlit component to show calendar view using FullCalendar","archived":false,"fork":false,"pushed_at":"2025-05-12T22:04:45.000Z","size":6094,"stargazers_count":160,"open_issues_count":22,"forks_count":20,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-12T23:20:25.369Z","etag":null,"topics":["calendar","fullcalendar","streamlit","streamlit-component"],"latest_commit_sha":null,"homepage":"https://calendar-component.streamlit.app/","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/im-perativa.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2023-07-31T09:09:08.000Z","updated_at":"2025-05-07T03:26:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"5b57d716-c377-4f89-ab95-5834a0f0bbcd","html_url":"https://github.com/im-perativa/streamlit-calendar","commit_stats":{"total_commits":46,"total_committers":7,"mean_commits":6.571428571428571,"dds":0.5869565217391304,"last_synced_commit":"81b93c555b9519a0a859acc90ba6a3d03c99ed17"},"previous_names":["im-perativa/streamlit-calendar"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/im-perativa%2Fstreamlit-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/im-perativa%2Fstreamlit-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/im-perativa%2Fstreamlit-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/im-perativa%2Fstreamlit-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/im-perativa","download_url":"https://codeload.github.com/im-perativa/streamlit-calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254453652,"owners_count":22073617,"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":["calendar","fullcalendar","streamlit","streamlit-component"],"created_at":"2024-09-30T15:44:02.253Z","updated_at":"2025-05-16T02:07:21.868Z","avatar_url":"https://github.com/im-perativa.png","language":"Python","funding_links":["https://www.buymeacoffee.com/imperativa"],"categories":[],"sub_categories":[],"readme":"# streamlit-calendar 📆\n\n[![PyPI](https://img.shields.io/pypi/v/streamlit-calendar)](https://pypi.org/project/streamlit-calendar/)\n[![Supported Python versions](https://img.shields.io/pypi/pyversions/pypistats.svg?logo=python\u0026logoColor=FFE873)](https://pypi.org/project/streamlit-calendar/)\n[![PyPI downloads](https://img.shields.io/pypi/dm/streamlit-calendar.svg)](https://pypistats.org/packages/streamlit-calendar)\n[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/im-perativa/streamlit-calendar/ci.yml)](https://github.com/im-perativa/streamlit-calendar/actions)\n[![Code style: Black](https://img.shields.io/badge/code%20style-Black-000000.svg)](https://github.com/psf/black)\n\n**A Streamlit component to show calendar view using [FullCalendar](https://fullcalendar.io/) with support for Streamlit light/dark theme, callbacks, and custom CSS**\n\n\u003ca href=\"https://www.buymeacoffee.com/imperativa\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/arial-orange.png\" alt=\"Buy Me A Coffee\" height=\"28\" width=\"105\"\u003e\u003c/a\u003e\n\n## 🌏Demo [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://calendar-component.streamlit.app/)\n\n![](https://github.com/im-perativa/streamlit-calendar-demo/blob/main/demo.gif)\n\n## ⚙️Installation\n\n```bash\npip install streamlit-calendar\n```\n\n## 💻Usage\n\n```python\nimport streamlit as st\nfrom streamlit_calendar import calendar\n\ncalendar_options = {\n    \"editable\": True,\n    \"selectable\": True,\n    \"headerToolbar\": {\n        \"left\": \"today prev,next\",\n        \"center\": \"title\",\n        \"right\": \"resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth\",\n    },\n    \"slotMinTime\": \"06:00:00\",\n    \"slotMaxTime\": \"18:00:00\",\n    \"initialView\": \"resourceTimelineDay\",\n    \"resourceGroupField\": \"building\",\n    \"resources\": [\n        {\"id\": \"a\", \"building\": \"Building A\", \"title\": \"Building A\"},\n        {\"id\": \"b\", \"building\": \"Building A\", \"title\": \"Building B\"},\n        {\"id\": \"c\", \"building\": \"Building B\", \"title\": \"Building C\"},\n        {\"id\": \"d\", \"building\": \"Building B\", \"title\": \"Building D\"},\n        {\"id\": \"e\", \"building\": \"Building C\", \"title\": \"Building E\"},\n        {\"id\": \"f\", \"building\": \"Building C\", \"title\": \"Building F\"},\n    ],\n}\ncalendar_events = [\n    {\n        \"title\": \"Event 1\",\n        \"start\": \"2023-07-31T08:30:00\",\n        \"end\": \"2023-07-31T10:30:00\",\n        \"resourceId\": \"a\",\n    },\n    {\n        \"title\": \"Event 2\",\n        \"start\": \"2023-07-31T07:30:00\",\n        \"end\": \"2023-07-31T10:30:00\",\n        \"resourceId\": \"b\",\n    },\n    {\n        \"title\": \"Event 3\",\n        \"start\": \"2023-07-31T10:40:00\",\n        \"end\": \"2023-07-31T12:30:00\",\n        \"resourceId\": \"a\",\n    }\n]\ncustom_css=\"\"\"\n    .fc-event-past {\n        opacity: 0.8;\n    }\n    .fc-event-time {\n        font-style: italic;\n    }\n    .fc-event-title {\n        font-weight: 700;\n    }\n    .fc-toolbar-title {\n        font-size: 2rem;\n    }\n\"\"\"\n\ncalendar = calendar(\n    events=calendar_events,\n    options=calendar_options,\n    custom_css=custom_css,\n    key='calendar', # Assign a widget key to prevent state loss\n    )\nst.write(calendar)\n```\n\n## 📝API References\n\n### Initialization Args\n\nFor complete `events` object properties, check out: [https://fullcalendar.io/docs/event-object](https://fullcalendar.io/docs/event-object)\nFor complete `options` object properties, check out: [https://fullcalendar.io/docs](https://fullcalendar.io/docs)\nFor complete `custom_css` options, check out: [https://fullcalendar.io/docs/css-customization](https://fullcalendar.io/docs/css-customization)\nFor information about `key`, check out: [Streamlit Widget Behavior](https://docs.streamlit.io/develop/concepts/architecture/widget-behavior)\n\n\u003e [!IMPORTANT]\n\u003e If using `st.session_state[\"events\"]` as `events` (see [demo](https://github.com/im-perativa/streamlit-calendar-demo)), provide a string value for `key` to prevent unintended calendar refreshes because of state loss.\n\n### Component Values\n\nThe component value, i.e. the return value of the `calendar(...)` instance, is a dict which properties depends on the current called callback.\n\nFor example, when the user clicked on an event, the component value would be:\n\n```python\nst.write(calendar)\n# {\n#   \"callback\": \"eventClick\",\n#   \"eventClick\": {\n#     \"event\": {\n#       \"allDay\": true,\n#       \"title\": \"Event 1\",\n#       \"start\": \"2023-07-03\",\n#       \"end\": \"2023-07-05\",\n#       \"backgroundColor\": \"#FF6C6C\",\n#       \"borderColor\": \"#FF6C6C\"\n#     },\n#     \"view\": {\n#       \"type\": \"dayGridMonth\",\n#       \"title\": \"July 2023\",\n#       \"activeStart\": \"2023-06-24T17:00:00.000Z\",\n#       \"activeEnd\": \"2023-08-05T17:00:00.000Z\",\n#       \"currentStart\": \"2023-06-30T17:00:00.000Z\",\n#       \"currentEnd\": \"2023-07-31T17:00:00.000Z\"\n#     }\n#   },\n# }\n```\n\nThe properties of each callback is explained as follows:\n\n#### `dateClick`\n\nTriggered when the user clicks on a date or a time.\n\nSource: [https://fullcalendar.io/docs/dateClick](https://fullcalendar.io/docs/dateClick)\n\n| Property |            Type            | Description                                                                                         |\n| -------- | :------------------------: | --------------------------------------------------------------------------------------------------- |\n| allDay   |         `boolean`          | `true` or `false` whether the click happened on an all-day cell.                                    |\n| date     |          `string`          | a date for the clicked day/time in [ISO8601 string](https://en.wikipedia.org/wiki/ISO_8601) format. |\n| view     |     [`View`](#ViewApi)     | The current view.                                                                                   |\n| resource | [`Resource`](#ResourceApi) | If the current view is a resource-view, the resource that owns this date.                           |\n\n#### `eventClick`\n\nTriggered when the user clicks an event.\n\nSource: [https://fullcalendar.io/docs/eventClick](https://fullcalendar.io/docs/eventClick)\n\n| Property |         Type         | Description           |\n| -------- | :------------------: | --------------------- |\n| event    | [`Event`](#EventApi) | The associated event. |\n| view     |  [`View`](#ViewApi)  | The current view.     |\n\n#### `eventChange`\n\nCalled after an event has been modified in some way.\n\nSource: [https://fullcalendar.io/docs/eventChange](https://fullcalendar.io/docs/eventChange)\n\n| Property      |          Type          | Description                                                                                                                                                               |\n| ------------- | :--------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| oldEvent      |  [`Event`](#EventApi)  | An event with data prior to the change.                                                                                                                                   |\n| event         |  [`Event`](#EventApi)  | An Event Object with the updated changed data.                                                                                                                            |\n| relatedEvents | [`Event[]`](#EventApi) | An array of other related events that were also affected. An event might have other recurring event instances or might be linked to other events with the same `groupId`. |\n\n#### `eventsSet`\n\nCalled after event data is initialized **OR** changed in any way.\n\nSource: [https://fullcalendar.io/docs/eventsSet](https://fullcalendar.io/docs/eventsSet)\n\n| Property |          Type          | Description                                            |\n| -------- | :--------------------: | ------------------------------------------------------ |\n| events   | [`Event[]`](#EventApi) | An array of events. It contains every event in memory. |\n| view     | [`View`](#ViewApi)     | The current view.                                                                                   |\n\n#### `select`\n\nTriggered when a date/time selection is made.\n\nSource: [https://fullcalendar.io/docs/select-callback](https://fullcalendar.io/docs/select-callback)\n\n| Property |            Type            | Description                                                                                                          |\n| -------- | :------------------------: | -------------------------------------------------------------------------------------------------------------------- |\n| allDay   |         `boolean`          | `true` or `false` whether the selection happened on all-day cells.                                                   |\n| start    |          `string`          | a date indicating the beginning of the selection in [ISO8601 string](https://en.wikipedia.org/wiki/ISO_8601) format. |\n| end.     |          `string`          | a date indicating the end of the selection in [ISO8601 string](https://en.wikipedia.org/wiki/ISO_8601) format.       |\n| view     |     [`View`](#ViewApi)     | The current view.                                                                                                    |\n| resource | [`Resource`](#ResourceApi) | If the current view is a resource-view, the resource that owns this selection.                                       |\n\n### Types\n\n#### \u003ca name=\"EventApi\"\u003e\u003c/a\u003e`Event`\n\nSource: [https://fullcalendar.io/docs/event-object](https://fullcalendar.io/docs/event-object)\n\n| Property        |     Type     | Description                                                                                                                                                                                |\n| --------------- | :----------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| id              |   `string`   | A unique identifier of an event.                                                                                                                                                           |\n| groupId         |   `string`   | Events that share a `groupId` will be dragged and resized together automatically.                                                                                                          |\n| allDay          |  `boolean`   | Determines if the event is shown in the “all-day” section of relevant views. In addition, if `true` the time text is not displayed with the event.                                         |\n| start           |   `string`   | An [ISO8601 string](https://en.wikipedia.org/wiki/ISO_8601) representation of the start date. If the event is all-day, there will not be a time part.                                      |\n| end             |   `string`   | An [ISO8601 string](https://en.wikipedia.org/wiki/ISO_8601) representation of the end date. If the event is all-day, there will not be a time part.                                        |\n| title           |   `string`   | The text that will appear on an event.                                                                                                                                                     |\n| url             |   `string`   | A URL that will be visited when this event is clicked by the user.                                                                                                                         |\n| classNames      |  `string[]`  | An array of strings like `[ 'myclass1', myclass2' ]`. Determines which HTML classNames will be attached to the rendered event.                                                             |\n| display         |   `string`   | The rendering type of this event. Can be `'auto'`, `'block'`, `'list-item'`, `'background'`, `'inverse-background'`, or `'none'`.                                                          |\n| backgroundColor |   `string`   | The `eventBackgroundColor` override for this specific event.                                                                                                                               |\n| borderColor     |   `string`   | The `eventBorderColor` override for this specific event.                                                                                                                                   |\n| textColor       |   `string`   | The `eventTextColor` override for this specific event.                                                                                                                                     |\n| extendedProps   | `Dictionary` | A plain object holding miscellaneous other properties specified during parsing. Receives properties in the explicitly given `extendedProps` hash as well as other non-standard properties. |\n| resourceId      |   `string`   | The unique string identifier for the resource of the event (if any).                                                                                                                       |\n\n#### \u003ca name=\"ResourceApi\"\u003e\u003c/a\u003e`Resource`\n\nSource: [https://fullcalendar.io/docs/resource-object](https://fullcalendar.io/docs/resource-object)\n\n| Property             |     Type     | Description                                                     |\n| -------------------- | :----------: | --------------------------------------------------------------- |\n| id                   |   `string`   | The unique string identifier for this resource.                 |\n| title                |   `string`   | The title of this resource.                                     |\n| eventBackgroundColor |   `string`   | Same as `Event.backgroundColor`.                                |\n| eventBorderColor     |   `string`   | Same as `Event.borderColor`.                                    |\n| eventTextColor       |   `string`   | Same as `Event.textColor`.                                      |\n| eventClassNames      |  `string[]`  | Same as `Event.ClassNames`.                                     |\n| extendedProps        | `Dictionary` | A hash of non-standard props that were specified during parsing |\n\n#### \u003ca name=\"ViewApi\"\u003e\u003c/a\u003e`View`\n\nSource: [https://fullcalendar.io/docs/view-object](https://fullcalendar.io/docs/view-object)\n\n| Property     |  Type  | Description                                                                                                                    |\n| ------------ | :----: | ------------------------------------------------------------------------------------------------------------------------------ |\n| type         | string | Name of one of the available views.                                                                                            |\n| title        | string | Title text that is displayed at the top of the `headerToolbar`.                                                                |\n| activeStart  | string | An [ISO8601 string](https://en.wikipedia.org/wiki/ISO_8601) that is the first visible day.                                     |\n| activeEnd    | string | An [ISO8601 string](https://en.wikipedia.org/wiki/ISO_8601) that is the last visible day.                                      |\n| currentStart | string | An [ISO8601 string](https://en.wikipedia.org/wiki/ISO_8601) that is the start of the interval the view is trying to represent. |\n| currentEnd   | string | An [ISO8601 string](https://en.wikipedia.org/wiki/ISO_8601) that is the end of the interval the view is trying to represent.   |\n\n## 🛠️Development\n\nNote: you only need to run these steps if you want to change this component or\ncontribute to its development!\n\n### Setup\n\nFirst, clone the repository:\n\n```bash\ngit clone https://github.com/im-perativa/streamlit-calendar.git\ncd streamlit-calendar\n```\n\nInstall the Python dependencies:\n\n```bash\npoetry install\n```\n\nAnd install the frontend dependencies:\n\n```bash\ncd streamlit_calendar/frontend\nnpm install\n```\n\n### Making changes\n\nTo make changes, first go to `streamlit_calendar/__init__.py` and make sure the\nvariable `_RELEASE` is set to `False`. This will make the component use the local\nversion of the frontend code, and not the built project.\n\nThen, start one terminal and run:\n\n```bash\ncd streamlit_calendar/frontend\nnpm start\n```\n\nThis starts the frontend code on port 3001.\n\nOpen another terminal and run:\n\n```bash\ncd streamlit_calendar\npoetry shell\nstreamlit run __init__.py\n```\n\nThis runs the development version on local Streamlit server. Now you can make changes to the Python or Javascript\ncode in `streamlit_calendar` and the demo app should update automatically!\n\nIf nothing updates, make sure the variable `_RELEASE` in `streamlit_calendar/__init__.py` is set to `False`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fim-perativa%2Fstreamlit-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fim-perativa%2Fstreamlit-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fim-perativa%2Fstreamlit-calendar/lists"}