skinnycal

A lightweight Plotly Dash wrapper around @fullcalendar/react, with the FullCalendar Premium (Scheduler) plugins statically bundled so resource views work out of the box.

Forked from dash-fullcalendar. See PREMIUM_FORK_CHANGES.md for the full rationale and diff notes.

Installation

pip install skinnycal

PyPI distribution and Python import name are both skinnycal.

Quick start

from dash import Dash, html
import skinnycal as dcal

app = Dash(__name__)

app.layout = html.Div([
    dcal.FullCalendar(
        id="cal",
        initialView="dayGridMonth",
        editable=True,
        selectable=True,
        events=[
            {"title": "Audit", "date": "2025-08-01"},
            {"title": "Go-Live", "date": "2025-08-10"},
        ],
    )
])

if __name__ == "__main__":
    app.run(debug=True)

Open http://127.0.0.1:8050 in your browser.

Premium (Scheduler) views

Pass a valid schedulerLicenseKey and request a resource view — the premium plugins are already in the bundle, no async chunk fetch:

dcal.FullCalendar(
    id="cal",
    schedulerLicenseKey="GPL-My-Project-Is-Open-Source",  # or your commercial key
    plugins=["resourceTimeline", "interaction"],
    initialView="resourceTimelineWeek",
    resources=[{"id": "a", "title": "Room A"}, {"id": "b", "title": "Room B"}],
    events=[{"resourceId": "a", "title": "Kickoff", "start": "2025-08-01"}],
)

Per-event decoration

Every event block gets data-event-id="<event id>" on its .fc-event root, so your own JS can address one block without reaching into FullCalendar internals. Per-block CSS classes and data-* attributes are driven by data — no JS callbacks needed:

dcal.FullCalendar(
    id="cal",
    events=[{
        "id": "bead-42",
        "title": "Module 3",
        "start": "2025-08-01",
        "extendedProps": {
            "classNames": ["is-conflict-hard"],   # -> classes on this block
            "trainer": "AB",                      # -> data-trainer, see below
        },
    }],
    eventDataAttributes=["trainer"],   # mirror these extendedProps keys as data-*
)

document.querySelector('[data-event-id="bead-42"]').dataset.trainer  // "AB"

Then style it however you like:

.fc-event.is-conflict-hard { border-color: #c0392b; }

Because FullCalendar re-evaluates event classes when an event's data changes, you can toggle state by returning an updated events list from a callback — no page reload, and no need to re-render the whole calendar yourself. eventDataAttributes keys are kebab-cased (courseCode → data-course-code → el.dataset.courseCode) and are applied when a block mounts; see PREMIUM_FORK_CHANGES.md for the caveat about imperative command mutations. usage.py is a runnable demo of all of this.

Repository layout

Development

1. Clone and install dependencies

   git clone https://github.com/PepijnWissing/skinnyCal.git
   cd skinnyCal
   npm install
   python -m venv .venv && . .venv/Scripts/activate   # POSIX: source .venv/bin/activate
   pip install -r requirements.txt
   

2. Build and run the example

   npm run build        # webpack + dash-generate-components
   pip install -e .
   python usage.py      # open http://localhost:8050
   

3. Run tests

   pytest -q
   

Releasing

Publishing is automated: any push to main triggers .github/workflows/publish.yml, which builds an sdist + wheel and uploads to PyPI via Trusted Publishing (OIDC). Pushes that don't bump the version are no-ops (skip-existing: true).

To cut a release, bump the version in all three places (they must stay in sync — __version__ is read from package-info.json at import time):

• pyproject.toml → [project].version
• skinnycal/package-info.json → version
• package.json → version

Then commit and push to main.

License

MIT © Scott Kilgore (upstream wrapper). Bundled @fullcalendar premium plugin code is governed by FullCalendar's own license — commercial production use requires a purchased Scheduler license.