Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
📆 A Streamlit component to show callendar using FullCalendar (https://fullcalendar.io)
A Streamlit component to show calendar view using FullCalendar with support for Streamlit light/dark theme, callbacks, and custom CSS
pip install streamlit-calendar
from streamlit_calendar import calendar
calendar_options = {
"editable": "true",
"selectable": "true",
"headerToolbar": {
"left": "today prev,next",
"center": "title",
"right": "resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth",
},
"slotMinTime": "06:00:00",
"slotMaxTime": "18:00:00",
"initialView": "resourceTimelineDay",
"resourceGroupField": "building",
"resources": [
{"id": "a", "building": "Building A", "title": "Building A"},
{"id": "b", "building": "Building A", "title": "Building B"},
{"id": "c", "building": "Building B", "title": "Building C"},
{"id": "d", "building": "Building B", "title": "Building D"},
{"id": "e", "building": "Building C", "title": "Building E"},
{"id": "f", "building": "Building C", "title": "Building F"},
],
}
calendar_events = [
{
"title": "Event 1",
"start": "2023-07-31T08:30:00",
"end": "2023-07-31T10:30:00",
"resourceId": "a",
},
{
"title": "Event 2",
"start": "2023-07-31T07:30:00",
"end": "2023-07-31T10:30:00",
"resourceId": "b",
},
{
"title": "Event 3",
"start": "2023-07-31T10:40:00",
"end": "2023-07-31T12:30:00",
"resourceId": "a",
}
]
custom_css="""
.fc-event-past {
opacity: 0.8;
}
.fc-event-time {
font-style: italic;
}
.fc-event-title {
font-weight: 700;
}
.fc-toolbar-title {
font-size: 2rem;
}
"""
calendar = calendar(events=calendar_events, options=calendar_options, custom_css=custom_css)
st.write(calendar)
For complete event
object properties, check out: https://fullcalendar.io/docs/event-object
For complete options
object properties, check out: https://fullcalendar.io/docs
For complete custom_css
options, check out: https://fullcalendar.io/docs/css-customization
The component value, i.e. the return value of the calendar(...)
instance, is a dict which properties depends on the current called callback.
For example, when the user clicked on an event, the component value would be:
st.write(calendar)
# {
# "callback": "eventClick",
# "eventClick": {
# "event": {
# "allDay": true,
# "title": "Event 1",
# "start": "2023-07-03",
# "end": "2023-07-05",
# "backgroundColor": "#FF6C6C",
# "borderColor": "#FF6C6C"
# },
# "view": {
# "type": "dayGridMonth",
# "title": "July 2023",
# "activeStart": "2023-06-24T17:00:00.000Z",
# "activeEnd": "2023-08-05T17:00:00.000Z",
# "currentStart": "2023-06-30T17:00:00.000Z",
# "currentEnd": "2023-07-31T17:00:00.000Z"
# }
# },
# }
The properties of each callback is explained as follows:
dateClick
Triggered when the user clicks on a date or a time.
Source: https://fullcalendar.io/docs/dateClick
Property | Type | Description |
---|---|---|
allDay | boolean | true or false whether the click happened on an all-day cell. |
date | string | a date for the clicked day/time in ISO8601 string format. |
view | View | The current view. |
resource | Resource | If the current view is a resource-view, the resource that owns this date. |
eventClick
Triggered when the user clicks an event.
Source: https://fullcalendar.io/docs/eventClick
Property | Type | Description |
---|---|---|
event | Event | The associated event. |
view | View | The current view. |
eventChange
Called after an event has been modified in some way.
Source: https://fullcalendar.io/docs/eventChange
Property | Type | Description |
---|---|---|
oldEvent | Event | An event with data prior to the change. |
event | Event | An Event Object with the updated changed data. |
relatedEvents | Event[] | 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 . |
eventsSet
Called after event data is initialized OR changed in any way.
Source: https://fullcalendar.io/docs/eventsSet
Property | Type | Description |
---|---|---|
events | Event[] | An array of events. It contains every event in memory. |
select
Triggered when a date/time selection is made.
Source: https://fullcalendar.io/docs/select-callback
Property | Type | Description |
---|---|---|
allDay | boolean | true or false whether the selection happened on all-day cells. |
start | string | a date indicating the beginning of the selection in ISO8601 string format. |
end. | string | a date indicating the end of the selection in ISO8601 string format. |
view | View | The current view. |
resource | Resource | If the current view is a resource-view, the resource that owns this selection. |
Event
Source: https://fullcalendar.io/docs/event-object
Property | Type | Description |
---|---|---|
id | string | A unique identifier of an event. |
groupId | string | Events that share a groupId will be dragged and resized together automatically. |
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. |
start | string | An ISO8601 string representation of the start date. If the event is all-day, there will not be a time part. |
end | string | An ISO8601 string representation of the end date. If the event is all-day, there will not be a time part. |
title | string | The text that will appear on an event. |
url | string | A URL that will be visited when this event is clicked by the user. |
classNames | string[] | An array of strings like [ 'myclass1', myclass2' ] . Determines which HTML classNames will be attached to the rendered event. |
display | string | The rendering type of this event. Can be 'auto' , 'block' , 'list-item' , 'background' , 'inverse-background' , or 'none' . |
backgroundColor | string | The eventBackgroundColor override for this specific event. |
borderColor | string | The eventBorderColor override for this specific event. |
textColor | string | The eventTextColor override for this specific event. |
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. |
resourceId | string | The unique string identifier for the resource of the event (if any). |
Resource
Source: https://fullcalendar.io/docs/resource-object
Property | Type | Description |
---|---|---|
id | string | The unique string identifier for this resource. |
title | string | The title of this resource. |
eventBackgroundColor | string | Same as Event.backgroundColor . |
eventBorderColor | string | Same as Event.borderColor . |
eventTextColor | string | Same as Event.textColor . |
eventClassNames | string[] | Same as Event.ClassNames . |
extendedProps | Dictionary | A hash of non-standard props that were specified during parsing |
View
Source: https://fullcalendar.io/docs/view-object
Property | Type | Description |
---|---|---|
type | string | Name of one of the available views. |
title | string | Title text that is displayed at the top of the headerToolbar . |
activeStart | string | An ISO8601 string that is the first visible day. |
activeEnd | string | An ISO8601 string that is the last visible day. |
currentStart | string | An ISO8601 string that is the start of the interval the view is trying to represent. |
currentEnd | string | An ISO8601 string that is the end of the interval the view is trying to represent. |
Note: you only need to run these steps if you want to change this component or contribute to its development!
First, clone the repository:
git clone https://github.com/im-perativa/streamlit-calendar.git
cd streamlit-calendar
Install the Python dependencies:
poetry install
And install the frontend dependencies:
cd streamlit_calendar/frontend
npm install
To make changes, first go to streamlit_calendar/__init__.py
and make sure the
variable _RELEASE
is set to False
. This will make the component use the local
version of the frontend code, and not the built project.
Then, start one terminal and run:
cd streamlit_calendar/frontend
npm start
This starts the frontend code on port 3001.
Open another terminal and run:
cd streamlit_calendar
poetry shell
streamlit run __init__.py
This runs the development version on local Streamlit server. Now you can make changes to the Python or Javascript
code in streamlit_calendar
and the demo app should update automatically!
If nothing updates, make sure the variable _RELEASE
in streamlit_calendar/__init__.py
is set to False
.
FAQs
📆 A Streamlit component to show callendar using FullCalendar (https://fullcalendar.io)
We found that streamlit-calendar demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.