@htmlbricks/hb-calendar-appointments
Version:
Month agenda view: events for the current month are grouped by calendar day and listed chronologically with weekday, day number, time, and colored markers. Optional header with month navigation; changing month or selecting a day dispatches `changeCalendar
295 lines • 7.89 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": "Month agenda view: events for the current month are grouped by calendar day and listed chronologically with weekday, day number, time, and colored markers. Optional header with month navigation; changing month or selecting a day dispatches `changeCalendarDate`, `changeSelectedDate`, and clicking a row dispatches `calendarEventClick`. Uses Italian public holidays metadata and accepts `events` as JSON.",
"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": "Color for the event marker icon (Bootstrap Icon) in each row; host default on `:host` maps to `--bulma-link`."
},
{
"name": "--bulma-radius",
"valueType": "number",
"defaultValue": "0.375rem",
"description": "Corner radius for interactive event rows on hover."
},
{
"name": "--bulma-border",
"valueType": "color",
"defaultValue": "(theme)",
"description": "Outline color for hovered event rows."
}
],
"parts": [
{
"name": "calendar-header",
"description": "Outer header strip (month navigation and title); style layout and chrome of the top bar."
},
{
"name": "calendar-current-time-header",
"description": "Inner header row showing the current month label and controls next to the navigation slots."
}
]
},
"contributors": [],
"htmlSlots": [
{
"name": "header_month_icon_prev",
"description": "Previous-month control inside the header (e.g. custom chevron or icon button)."
},
{
"name": "header_month_icon_next",
"description": "Next-month control inside the header (e.g. custom chevron or icon button)."
},
{
"name": "header",
"description": "Optional content above the month line; wraps the default title when empty."
},
{
"name": "calendar_month",
"description": "Replace or wrap the visible month / year label in the header row."
}
],
"i18n": [],
"examples": [
{
"name": "CalendarWithEvents",
"description": "Sample appointments on the current and adjacent month.",
"data": {
"events": [
{
"date": "2026-04-30T22:22:07.112Z",
"id": "test",
"label": "thetest"
},
{
"date": "2026-04-29T22:22:07.112Z",
"id": "test2",
"label": "thetest start",
"color": "red"
}
]
}
},
{
"name": "TotallyEmpty",
"description": "No rows; header and navigation still available.",
"data": {
"events": []
}
},
{
"name": "noHeader",
"description": "Agenda list without the month navigation chrome.",
"data": {
"events": [
{
"date": "2026-04-30T22:22:07.112Z",
"id": "test",
"label": "thetest"
},
{
"date": "2026-04-29T22:22:07.112Z",
"id": "test2",
"label": "thetest start",
"color": "red"
}
],
"disable_header": true
}
},
{
"name": "withSelectedDay",
"description": "Pre-selected calendar day alongside event data.",
"data": {
"events": [
{
"date": "2026-04-30T22:22:07.112Z",
"id": "test",
"label": "thetest"
},
{
"date": "2026-04-29T22:22:07.112Z",
"id": "test2",
"label": "thetest start",
"color": "red"
}
],
"selected": "2026-04-30T22:22:07.112Z"
}
}
],
"iifeIntegrity": "sha384-VAyKNxbvbvQt7wrvpkHYjhUuYxDcZLC37TGXNA3nP9YDu1KWR74WVhpp7iiwk38T",
"dependencies": [],
"screenshots": [],
"licenses": [
{
"type": "Apache-2.0",
"path": "LICENSE.md",
"cost": 0,
"currency": "EUR"
}
],
"readmePath": "README.md",
"name": "hb-calendar-appointments",
"category": "calendar",
"tags": [
"calendar",
"appointments"
],
"size": {},
"iifePath": "main.iife.js",
"repoName": "@htmlbricks/hb-calendar-appointments",
"version": "0.76.5"
}