@htmlbricks/hb-calendar-events
Version:
Classic month grid (7-day week header and variable rows) with selectable cells, “today” styling, and event chips inside each day. Supports adjacent-month padding cells, Italian holidays, JSON `events`, and the same navigation/selection events as the appoi
313 lines • 8.48 kB
JSON
{
"definitions": {
"events": {
"$ref": "#/definitions/Events",
"$schema": "http://json-schema.org/draft-07/schema#",
"definitions": {
"Events": {
"additionalProperties": false,
"properties": {
"calendarEventClick": {
"additionalProperties": false,
"properties": {
"eventId": {
"type": "string"
}
},
"required": [
"eventId"
],
"type": "object"
},
"changeCalendarDate": {
"additionalProperties": false,
"properties": {
"date": {
"format": "date-time",
"type": "string"
}
},
"required": [
"date"
],
"type": "object"
},
"changeSelectedDate": {
"additionalProperties": false,
"properties": {
"selectedDate": {
"format": "date-time",
"type": "string"
}
},
"required": [
"selectedDate"
],
"type": "object"
}
},
"required": [
"calendarEventClick",
"changeCalendarDate",
"changeSelectedDate"
],
"type": "object"
}
}
},
"component": {
"$ref": "#/definitions/Component",
"$schema": "http://json-schema.org/draft-07/schema#",
"definitions": {
"Component": {
"additionalProperties": false,
"properties": {
"date": {
"format": "date-time",
"type": "string"
},
"disable_header": {
"type": "boolean"
},
"events": {
"items": {
"$ref": "#/definitions/IEvent"
},
"type": "array"
},
"id": {
"type": "string"
},
"selected": {
"format": "date-time",
"type": "string"
}
},
"type": "object"
},
"IEvent": {
"additionalProperties": false,
"properties": {
"color": {
"type": "string"
},
"date": {
"format": "date-time",
"type": "string"
},
"icon": {
"type": "string"
},
"id": {
"type": "string"
},
"label": {
"type": "string"
},
"link": {
"type": "string"
}
},
"required": [
"date",
"label",
"id"
],
"type": "object"
}
}
}
},
"description": "Classic month grid (7-day week header and variable rows) with selectable cells, “today” styling, and event chips inside each day. Supports adjacent-month padding cells, Italian holidays, JSON `events`, and the same navigation/selection events as the appointments calendar (`changeCalendarDate`, `changeSelectedDate`, `calendarEventClick`).",
"storybookArgs": {
"disable_header": {
"control": {
"type": "boolean"
}
},
"events": {
"control": {
"type": "object"
}
},
"date": {
"control": {
"type": "text"
}
},
"selected": {
"control": {
"type": "text"
}
},
"calendarEventClick": {
"action": "calendarEventClickEvent"
},
"changeCalendarDate": {
"action": "changeCalendarDateEvent"
},
"changeSelectedDate": {
"action": "changeSelectedDateEvent"
}
},
"styleSetup": {
"vars": [
{
"name": "--hb-calendar-event-button-color",
"valueType": "color",
"defaultValue": "(from `--bulma-link`)",
"description": "Background for event chips inside day cells; defaults to `--bulma-link` on `:host`."
},
{
"name": "--hb-calendar-cell-border",
"valueType": "color",
"defaultValue": "(from `--bulma-border`)",
"description": "1px border around each day cell in the month grid."
},
{
"name": "--hb-calendar-hover",
"valueType": "color",
"defaultValue": "(from `--bulma-background-lighter`)",
"description": "Background when hovering a selectable day cell."
},
{
"name": "--hb-calendar-selected",
"valueType": "color",
"defaultValue": "(from `--bulma-info`)",
"description": "Background for the currently selected day cell."
},
{
"name": "--hb-calendar-today",
"valueType": "color",
"defaultValue": "(from `--bulma-primary`)",
"description": "Accent color for the “today” day number in the grid."
},
{
"name": "--bulma-radius",
"valueType": "number",
"defaultValue": "0.375rem",
"description": "Corner radius for event chips inside cells."
},
{
"name": "--bulma-white-bis",
"valueType": "color",
"defaultValue": "(theme)",
"description": "Chip text color on top of `--hb-calendar-event-button-color`."
},
{
"name": "--bulma-text-weak",
"valueType": "color",
"defaultValue": "(theme)",
"description": "Muted weekday labels in the week header row."
}
],
"parts": [
{
"name": "calendar-header",
"description": "Outer header strip (month navigation and title); same part name as the appointments calendar."
},
{
"name": "calendar-current-time-header",
"description": "Month label row and navigation slot targets."
},
{
"name": "cell",
"description": "Individual day cell in the grid (padding days, current month, today, and selected states)."
}
]
},
"contributors": [],
"htmlSlots": [
{
"name": "header_month_icon_prev",
"description": "Custom “previous month” control in the header."
},
{
"name": "header_month_icon_next",
"description": "Custom “next month” control in the header."
},
{
"name": "header",
"description": "Optional content above the month line in the header."
},
{
"name": "calendar_month",
"description": "Custom month / year label next to navigation controls."
}
],
"i18n": [],
"examples": [
{
"name": "BasicCalendar",
"description": "Month grid with defaults and no event chips.",
"data": {}
},
{
"name": "CalendarWithEvents",
"description": "Dots and labels from JSON event objects.",
"data": {
"events": [
{
"date": "2026-04-30T22:22:05.432Z",
"id": "test",
"label": "thetest"
},
{
"date": "2026-04-29T22:22:05.432Z",
"id": "test2",
"label": "thetest start",
"color": "red"
}
]
}
},
{
"name": "emptyEvents",
"description": "Explicit empty list; grid behaves like a plain month view.",
"data": {
"events": []
}
},
{
"name": "noHeader",
"description": "Eventful month without top navigation.",
"data": {
"events": [
{
"date": "2026-04-30T22:22:05.432Z",
"id": "test",
"label": "thetest"
},
{
"date": "2026-04-29T22:22:05.432Z",
"id": "test2",
"label": "thetest start",
"color": "red"
}
],
"disable_header": true
}
}
],
"iifeIntegrity": "sha384-q+BqinJqRPkAfVu5M8NG3sc1rSoqC5MdjVPqjuE1+jtDX47IpooaNOEe2QHhDd+m",
"dependencies": [],
"screenshots": [],
"licenses": [
{
"type": "Apache-2.0",
"path": "LICENSE.md",
"cost": 0,
"currency": "EUR"
}
],
"readmePath": "README.md",
"name": "hb-calendar-events",
"category": "calendar",
"tags": [
"calendar"
],
"size": {},
"iifePath": "main.iife.js",
"repoName": "@htmlbricks/hb-calendar-events",
"version": "0.76.5"
}