Aktuellste Version

This commit is contained in:
2026-08-14 07:59:25 +00:00
parent dac15b9209
commit 9d5cddcbf8
15 changed files with 89 additions and 468 deletions
@@ -1,9 +1,27 @@
SELECT
id,
platz_id,
titel AS title,
startzeit AS start,
endzeit AS end,
gebucht_von
FROM `buchungen`
WHERE platz_id = '{{appsmith.store.selectedSeatId}}'
ORDER BY startzeit;
ORDER BY startzeit;
INSERT INTO `buchungen`
(
id,
titel,
startzeit,
endzeit,
gebucht_von
)
VALUES
(
'{{appsmith.store.selectedSeatId}}',
'{{InputTitel.text}}',
'{{InputStartzeit.text}}',
'{{InputEndzeit.text}}',
'{{InputGebuchtVon.text}}'
);
@@ -5,7 +5,7 @@
"pluginType": "DB",
"unpublishedAction": {
"actionConfiguration": {
"body": "SELECT\n id,\n titel AS title,\n startzeit AS start,\n endzeit AS end,\n gebucht_von\nFROM `buchungen`\nWHERE platz_id = '{{appsmith.store.selectedSeatId}}'\nORDER BY startzeit;",
"body": "SELECT\n id,\n platz_id,\n titel AS title,\n startzeit AS start,\n endzeit AS end,\n gebucht_von\nFROM `buchungen`\nWHERE platz_id = '{{appsmith.store.selectedSeatId}}'\nORDER BY startzeit;\n\nINSERT INTO `buchungen`\n(\n id,\n titel,\n startzeit,\n endzeit,\n gebucht_von\n)\nVALUES\n(\n '{{appsmith.store.selectedSeatId}}',\n '{{InputTitel.text}}',\n '{{InputStartzeit.text}}',\n '{{InputEndzeit.text}}',\n '{{InputGebuchtVon.text}}'\n);",
"encodeParamsToggle": true,
"paginationType": "NONE",
"pluginSpecifiedTemplates": [
@@ -0,0 +1,10 @@
SELECT
id,
platz_id,
titel AS title,
startzeit AS start,
endzeit AS end,
gebucht_von
FROM `buchungen`
WHERE platz_id = '{{appsmith.store.selectedSeatId}}'
ORDER BY startzeit;
@@ -0,0 +1,35 @@
{
"gitSyncId": "6a6b5b477ebc9edeca96e2f8_e0fcb986-9f0b-4eab-bcee-5d1449214ffa",
"id": "Sitzplätze_GetBookings",
"pluginId": "mysql-plugin",
"pluginType": "DB",
"unpublishedAction": {
"actionConfiguration": {
"body": "SELECT\n id,\n platz_id,\n titel AS title,\n startzeit AS start,\n endzeit AS end,\n gebucht_von\nFROM `buchungen`\nWHERE platz_id = '{{appsmith.store.selectedSeatId}}'\nORDER BY startzeit;",
"encodeParamsToggle": true,
"paginationType": "NONE",
"pluginSpecifiedTemplates": [
{
"value": true
}
],
"timeoutInMillisecond": 10000
},
"confirmBeforeExecute": false,
"datasource": {
"id": "MySQL Bürobuchungen",
"isAutoGenerated": false,
"name": "MySQL Bürobuchungen",
"pluginId": "mysql-plugin"
},
"dynamicBindingPathList": [
{
"key": "body"
}
],
"name": "GetBookings",
"pageId": "Sitzplätze",
"runBehaviour": "AUTOMATIC",
"userSetOnLoad": false
}
}
+6 -2
View File
@@ -24,7 +24,11 @@
}
],
"dynamicHeight": "FIXED",
"dynamicPropertyPathList": [],
"dynamicPropertyPathList": [
{
"key": "seatSelected"
}
],
"dynamicTriggerPathList": [
{
"key": "seatSelected"
@@ -51,7 +55,7 @@
"parentRowSpace": 10,
"renderMode": "CANVAS",
"rightColumn": 64,
"seatSelected": "{{showModal(SeatCalendar.name);}}",
"seatSelected": "{{\n storeValue(\n \"selectedSeatId\",\n Custom4.model.selectedSeat.id\n )\n .then(() =>\n storeValue(\n \"selectedSeatName\",\n Custom4.model.selectedSeat.name\n )\n )\n .then(() => GetBookings.run())\n .then(() => showModal(SeatCalendar.name))\n}}",
"srcDoc": {
"css": "@charset \"UTF-8\";\nhtml,\nbody {\n margin: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n font-family: Arial, sans-serif;\n}\n\n/* Bild + Overlay */\n#imgHolder {\n position: relative;\n width: 100%;\n height: 700px; /* feste Höhe, damit sicher nicht 0 */\n overflow: hidden;\n border-radius: 6px;\n background: #f3f4f6;\n}\n\n#floorplanImage {\n position: absolute;\n inset: 0;\n z-index: 1;\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n#seatLayer {\n position: absolute;\n inset: 0;\n z-index: 2;\n width: 100%;\n height: 100%;\n pointer-events: none; /* Punkte bekommen später pointer-events:auto */\n}\n\n/* Sitzpunkte */\n.seat {\n position: absolute;\n z-index: 3;\n display: block;\n width: 18px;\n height: 18px;\n padding: 0;\n transform: translate(-50%, -50%);\n border: 2px solid #ffffff;\n border-radius: 50%;\n background: #22c55e;\n color: #22c55e;\n cursor: pointer;\n pointer-events: auto;\n appearance: none;\n box-sizing: border-box;\n box-shadow: 0 0 5px currentColor, 0 0 10px currentColor;\n transition: transform 0.15s ease, box-shadow 0.15s ease;\n}\n\n.seat:hover {\n z-index: 10;\n transform: translate(-50%, -50%) scale(1.45);\n box-shadow: 0 0 8px currentColor, 0 0 16px currentColor;\n}\n\n/* Farben nach Status */\n.seat.frei {\n background: #22c55e; /* Grün */\n color: #22c55e;\n}\n\n.seat.belegt {\n background: #ef4444; /* Rot */\n color: #ef4444;\n}\n\n.seat.selected {\n outline: 3px solid #2563eb;\n outline-offset: 3px;\n}\n\n/* Legende */\n#legend {\n display: flex;\n flex-wrap: wrap;\n gap: 14px;\n margin-top: 8px;\n color: #374151;\n font-size: 13px;\n}\n\n.legendItem {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n}\n\n.legendColor {\n display: inline-block;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n}\n\n.legendColor.frei {\n background: #22c55e;\n}\n\n.legendColor.belegt {\n background: #ef4444;\n}",
"html": "<div id=\"seatPlan\">\n\n <div id=\"imgHolder\">\n <!-- Kein src hier, das Bild kommt über JavaScript -->\n <img id=\"floorplanImage\" alt=\"Büroplan\">\n\t\t<div id=\"seatLayer\"></div>\n\t\t\n\t\t\n </div>\n</div>",
@@ -1,64 +0,0 @@
{
"backgroundColor": "#FFFFFF",
"borderColor": "#E0DEDE",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"borderWidth": "1",
"bottomRow": 60,
"boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}",
"defaultModel": "",
"dynamicBindingPathList": [
{
"key": "theme"
},
{
"key": "borderRadius"
},
{
"key": "boxShadow"
}
],
"dynamicHeight": "FIXED",
"dynamicTriggerPathList": [
{
"key": "onResetClick"
}
],
"events": [
"onResetClick"
],
"isCanvas": false,
"isLoading": false,
"isSearchWildcard": true,
"isVisible": true,
"key": "m02i2p2i1e",
"leftColumn": 0,
"maxDynamicHeight": 9000,
"minDynamicHeight": 4,
"mobileBottomRow": 30,
"mobileLeftColumn": 0,
"mobileRightColumn": 23,
"mobileTopRow": 0,
"needsErrorInfo": false,
"onResetClick": "{{showAlert('Successfully reset!!', '');}}",
"parentColumnSpace": 21.40625,
"parentId": "q2rxwqtggc",
"parentRowSpace": 10,
"renderMode": "CANVAS",
"rightColumn": 64,
"srcDoc": {
"css": "",
"html": "<! DOCTYPE html>\n<html>\n\n<head>\n<script src='https://cdn.jsdelivr.net/npm/fullcalendar/index.global.min.js'></script>\n\n</head>\n<body>\n<div id='calendar'></div>\n</body>\n</html>",
"js": "appsmith.onReady(() => {\n const calendarEl = document.getElementById('calendar');\n const calendar = new FullCalendar.Calendar(calendarEl, {\n initialView: 'dayGridMonth'\n });\n calendar.render();\n});"
},
"theme": "{{appsmith.theme}}",
"topRow": 0,
"type": "CUSTOM_WIDGET",
"uncompiledSrcDoc": {
"css": "",
"html": "<! DOCTYPE html>\n<html>\n\n<head>\n<script src='https://cdn.jsdelivr.net/npm/fullcalendar/index.global.min.js'></script>\n\n</head>\n<body>\n<div id='calendar'></div>\n</body>\n</html>",
"js": "appsmith.onReady(()=>{\nconst calendarEl = document.getElementById('calendar')\nconst calendar = new FullCalendar.Calendar(calendarEl, {\ninitialView: 'dayGridMonth'\n})\ncalendar.render()\n})"
},
"version": 1,
"widgetId": "5pq6xcyg78",
"widgetName": "Custom3"
}
@@ -1,85 +0,0 @@
{
"animateLoading": true,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"bottomRow": 271,
"boxShadow": "none",
"canEscapeKeyClose": true,
"canOutsideClickClose": true,
"children": [
{
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"bottomRow": 700,
"boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}",
"canExtend": true,
"detachFromLayout": true,
"dynamicBindingPathList": [
{
"key": "borderRadius"
},
{
"key": "boxShadow"
}
],
"dynamicHeight": "AUTO_HEIGHT",
"flexLayers": [],
"isDisabled": false,
"isLoading": false,
"isVisible": true,
"key": "h3ezoy44rt",
"leftColumn": 0,
"maxDynamicHeight": 9000,
"minDynamicHeight": 4,
"minHeight": 700,
"minWidth": 450,
"mobileBottomRow": 240,
"mobileLeftColumn": 0,
"mobileRightColumn": 609.375,
"mobileTopRow": 0,
"needsErrorInfo": false,
"parentColumnSpace": 1,
"parentId": "8lajbnb6nu",
"parentRowSpace": 1,
"renderMode": "CANVAS",
"responsiveBehavior": "fill",
"rightColumn": 609.375,
"shouldScrollContents": false,
"topRow": 0,
"type": "CANVAS_WIDGET",
"version": 1,
"widgetId": "q2rxwqtggc",
"widgetName": "Canvas5"
}
],
"detachFromLayout": true,
"dynamicBindingPathList": [
{
"key": "borderRadius"
}
],
"dynamicHeight": "FIXED",
"dynamicTriggerPathList": [],
"height": 700,
"isCanvas": true,
"isLoading": false,
"key": "gatb3mw95x",
"leftColumn": 15,
"maxDynamicHeight": 9000,
"minDynamicHeight": 24,
"mobileBottomRow": 55,
"mobileLeftColumn": 15,
"mobileRightColumn": 39,
"mobileTopRow": 31,
"needsErrorInfo": false,
"parentColumnSpace": 25.390625,
"parentId": "0",
"parentRowSpace": 10,
"renderMode": "CANVAS",
"rightColumn": 39,
"shouldScrollContents": false,
"topRow": 31,
"type": "MODAL_WIDGET",
"version": 2,
"widgetId": "8lajbnb6nu",
"widgetName": "Modal1",
"width": 1360
}
@@ -1,45 +0,0 @@
{
"animateLoading": true,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"bottomRow": 7,
"boxShadow": "none",
"buttonColor": "{{appsmith.theme.colors.primaryColor}}",
"buttonVariant": "PRIMARY",
"disabledWhenInvalid": false,
"dynamicBindingPathList": [
{
"key": "buttonColor"
},
{
"key": "borderRadius"
}
],
"dynamicTriggerPathList": [],
"isDefaultClickDisabled": true,
"isDisabled": false,
"isLoading": false,
"isVisible": true,
"key": "ecgxpla2dn",
"leftColumn": 45,
"minWidth": 120,
"mobileBottomRow": 7,
"mobileLeftColumn": 42,
"mobileRightColumn": 58,
"mobileTopRow": 3,
"needsErrorInfo": false,
"parentColumnSpace": 9.1875,
"parentId": "ekq4ry46pv",
"parentRowSpace": 10,
"placement": "CENTER",
"recaptchaType": "V3",
"renderMode": "CANVAS",
"resetFormOnClick": false,
"responsiveBehavior": "hug",
"rightColumn": 58,
"text": "Speichern",
"topRow": 2,
"type": "BUTTON_WIDGET",
"version": 1,
"widgetId": "0a20eja5yr",
"widgetName": "ButtonBuchen"
}
@@ -3,9 +3,9 @@
"borderColor": "#E0DEDE",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"borderWidth": "1",
"bottomRow": 54,
"bottomRow": 53,
"boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}",
"defaultModel": "{{\n {\n events: GetSeats.data || [],\n seatId: appsmith.store.selectedSeatId,\n seatName: appsmith.store.selectedSeatName\n }\n}}",
"defaultModel": "{{\n {\n events: GetBookings.data || [],\n seatId: appsmith.store.selectedSeatId,\n seatName: appsmith.store.selectedSeatName\n }\n}}",
"dynamicBindingPathList": [
{
"key": "theme"
@@ -21,13 +21,18 @@
}
],
"dynamicHeight": "FIXED",
"dynamicPropertyPathList": [
{
"key": "seatSelected"
}
],
"dynamicTriggerPathList": [
{
"key": "onResetClick"
"key": "seatSelected"
}
],
"events": [
"onResetClick"
"seatSelected"
],
"isCanvas": false,
"isLoading": false,
@@ -42,24 +47,24 @@
"mobileRightColumn": 26,
"mobileTopRow": 10,
"needsErrorInfo": false,
"onResetClick": "{{showAlert('Successfully reset!!', '');}}",
"parentColumnSpace": 7.40625,
"parentId": "ekq4ry46pv",
"parentRowSpace": 10,
"renderMode": "CANVAS",
"rightColumn": 64,
"seatSelected": "{{\n storeValue(\n \"selectedSeatId\",\n Custom4.model.selectedSeat.id\n )\n .then(() =>\n storeValue(\n \"selectedSeatName\",\n Custom4.model.selectedSeat.name\n )\n )\n .then(() => GetBookings.run())\n .then(() => showModal(SeatCalendar.name))\n}}",
"srcDoc": {
"css": "html,\nbody {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n font-family: Arial, sans-serif;\n overflow: auto;\n}\n\n#calendarWrapper {\n width: 100%;\n min-height: 620px;\n box-sizing: border-box;\n padding: 10px;\n background: #ffffff;\n}\n\n#calendarHeader {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 10px;\n padding: 8px 10px;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n background: #f9fafb;\n}\n\n#calendarSeatTitle {\n font-size: 15px;\n font-weight: 600;\n color: #374151;\n}\n\n#calendarViewButtons {\n display: flex;\n gap: 6px;\n}\n\n#calendarViewButtons button {\n padding: 6px 10px;\n border: 1px solid #9ca3af;\n border-radius: 5px;\n background: #ffffff;\n color: #374151;\n cursor: pointer;\n}\n\n#calendarViewButtons button:hover {\n background: #e5e7eb;\n}\n\n#calendar {\n width: 100%;\n min-height: 520px;\n}\n\n#calendarSelection {\n margin-top: 10px;\n padding: 8px 10px;\n border: 1px solid #d1d5db;\n border-radius: 5px;\n background: #f9fafb;\n color: #374151;\n font-size: 13px;\n}\n\n/* FullCalendar-Anpassungen */\n.fc {\n font-size: 13px;\n}\n\n.fc .fc-button {\n background: #374151;\n border-color: #374151;\n}\n\n.fc .fc-button:hover,\n.fc .fc-button-active {\n background: #111827;\n border-color: #111827;\n}\n\n.fc .fc-daygrid-day.fc-day-today,\n.fc .fc-timegrid-col.fc-day-today {\n background: #eff6ff;\n}\n\n.fc .fc-event {\n cursor: pointer;\n}",
"html": "<div id=\"calendarWrapper\">\n <div id=\"calendarHeader\">\n <div id=\"calendarSeatTitle\">\n Kalender\n </div>\n\n <div id=\"calendarViewButtons\">\n <button id=\"monthButton\" type=\"button\">\n Monat\n </button>\n\n <button id=\"dayButton\" type=\"button\">\n Tag\n </button>\n </div>\n </div>\n\n <div id=\"calendar\"></div>\n\n <div id=\"calendarSelection\">\n Kein Zeitraum ausgewählt\n </div>\n\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js\"></script>\n</div>",
"js": "let calendar = null;\nfunction getModel() {\n const model = appsmith.model || {};\n if (typeof model === \"string\") {\n try {\n return JSON.parse(model);\n } catch (error) {\n return {};\n }\n }\n return model;\n}\nfunction getEvents() {\n const model = getModel();\n if (!Array.isArray(model.events)) {\n return [];\n }\n return model.events;\n}\nfunction getSeatName() {\n const model = getModel();\n return model.seatName || model.seatId || \"kein Platz ausgewählt\";\n}\nfunction updateSeatTitle() {\n const titleElement = document.getElementById(\"calendarSeatTitle\");\n if (!titleElement) {\n return;\n }\n titleElement.textContent = `Kalender für ${getSeatName()}`;\n}\nfunction updateSelectionText(text) {\n const selectionElement = document.getElementById(\"calendarSelection\");\n if (!selectionElement) {\n return;\n }\n selectionElement.textContent = text;\n}\nfunction createCalendar() {\n const calendarElement = document.getElementById(\"calendar\");\n if (!calendarElement) {\n return;\n }\n if (typeof FullCalendar === \"undefined\") {\n calendarElement.textContent = \"FullCalendar konnte nicht geladen werden.\";\n return;\n }\n if (calendar) {\n calendar.destroy();\n }\n calendar = new FullCalendar.Calendar(calendarElement, {\n initialView: \"dayGridMonth\",\n locale: \"de\",\n firstDay: 1,\n navLinks: true,\n selectable: true,\n selectMirror: true,\n editable: false,\n eventStartEditable: false,\n eventDurationEditable: false,\n height: \"auto\",\n headerToolbar: {\n left: \"prev,next today\",\n center: \"title\",\n right: \"\"\n },\n buttonText: {\n today: \"Heute\"\n },\n slotDuration: \"00:30:00\",\n snapDuration: \"00:30:00\",\n slotMinTime: \"07:00:00\",\n slotMaxTime: \"20:00:00\",\n allDaySlot: true,\n nowIndicator: true,\n events: getEvents(),\n dateClick(info) {\n if (info.view.type === \"dayGridMonth\") {\n calendar.changeView(\"timeGridDay\", info.date);\n return;\n }\n updateSelectionText(`Ausgewählter Zeitpunkt: ${info.dateStr}`);\n },\n navLinkDayClick(date) {\n calendar.changeView(\"timeGridDay\", date);\n },\n select(info) {\n const start = formatDateTime(info.start);\n const end = formatDateTime(info.end);\n updateSelectionText(`Ausgewählt: ${start} bis ${end}`);\n appsmith.updateModel({\n selectedRange: {\n start: info.startStr,\n end: info.endStr,\n allDay: info.allDay\n }\n });\n },\n eventClick(info) {\n const event = info.event;\n const start = event.start ? formatDateTime(event.start) : \"\";\n const end = event.end ? formatDateTime(event.end) : \"\";\n const rangeText = event.allDay ? \"Ganztägig\" : `${start} bis ${end}`;\n updateSelectionText(`${event.title || \"Buchung\"} ${rangeText}`);\n }\n });\n calendar.render();\n}\nfunction formatDateTime(date) {\n if (!date) {\n return \"\";\n }\n return new Intl.DateTimeFormat(\"de-DE\", {\n dateStyle: \"short\",\n timeStyle: \"short\"\n }).format(date);\n}\nfunction registerButtons() {\n const monthButton = document.getElementById(\"monthButton\");\n const dayButton = document.getElementById(\"dayButton\");\n if (monthButton) {\n monthButton.addEventListener(\"click\", () => {\n if (calendar) {\n calendar.changeView(\"dayGridMonth\");\n }\n });\n }\n if (dayButton) {\n dayButton.addEventListener(\"click\", () => {\n if (calendar) {\n calendar.changeView(\"timeGridDay\", calendar.getDate());\n }\n });\n }\n}\nfunction refreshCalendarEvents() {\n if (!calendar) {\n createCalendar();\n return;\n }\n calendar.removeAllEventSources();\n calendar.addEventSource(getEvents());\n}\nappsmith.onReady(() => {\n updateSeatTitle();\n registerButtons();\n createCalendar();\n appsmith.onModelChange(() => {\n updateSeatTitle();\n refreshCalendarEvents();\n });\n});"
"js": "let calendar = null;\nfunction getModel() {\n const model = appsmith.model || {};\n if (typeof model === \"string\") {\n try {\n return JSON.parse(model);\n } catch (error) {\n return {};\n }\n }\n return model;\n}\nfunction getEvents() {\n const model = getModel();\n if (Array.isArray(model.events)) {\n return model.events;\n }\n return [];\n}\nfunction getSeatName() {\n const model = getModel();\n return model.seatName || model.seatId || \"kein Platz ausgewählt\";\n}\nfunction updateSeatTitle() {\n const titleElement = document.getElementById(\"calendarSeatTitle\");\n if (!titleElement) {\n return;\n }\n titleElement.textContent = `Kalender für ${getSeatName()}`;\n}\nfunction createCalendar() {\n const calendarElement = document.getElementById(\"calendar\");\n if (!calendarElement) {\n return;\n }\n if (typeof FullCalendar === \"undefined\") {\n calendarElement.textContent = \"FullCalendar konnte nicht geladen werden.\";\n return;\n }\n if (calendar) {\n calendar.destroy();\n }\n calendar = new FullCalendar.Calendar(calendarElement, {\n initialView: \"dayGridMonth\",\n locale: \"de\",\n firstDay: 1,\n navLinks: true,\n navLinkDayClick(date) {\n calendar.changeView(\"timeGridDay\", date);\n },\n selectable: false,\n editable: false,\n eventStartEditable: false,\n eventDurationEditable: false,\n height: \"auto\",\n headerToolbar: {\n left: \"prev,next today\",\n center: \"title\",\n right: \"dayGridMonth,timeGridDay\"\n },\n buttonText: {\n today: \"Heute\",\n month: \"Monat\",\n day: \"Tag\"\n },\n slotDuration: \"00:30:00\",\n snapDuration: \"00:30:00\",\n slotMinTime: \"07:00:00\",\n slotMaxTime: \"20:00:00\",\n allDaySlot: false,\n nowIndicator: true,\n events: getEvents(),\n eventClick(info) {\n const event = info.event;\n const start = event.start ? formatDateTime(event.start) : \"\";\n const end = event.end ? formatDateTime(event.end) : \"\";\n const rangeText = end ? `${start} bis ${end}` : start;\n updateSelectionText(`${event.title || \"Buchung\"} ${rangeText}`);\n }\n });\n calendar.render();\n}\nfunction formatDateTime(date) {\n if (!date) {\n return \"\";\n }\n return new Intl.DateTimeFormat(\"de-DE\", {\n dateStyle: \"short\",\n timeStyle: \"short\"\n }).format(date);\n}\nfunction updateSelectionText(text) {\n const selectionElement = document.getElementById(\"calendarSelection\");\n if (!selectionElement) {\n return;\n }\n selectionElement.textContent = text;\n}\nfunction registerButtons() {\n const monthButton = document.getElementById(\"monthButton\");\n const dayButton = document.getElementById(\"dayButton\");\n if (monthButton) {\n monthButton.addEventListener(\"click\", () => {\n if (!calendar) {\n return;\n }\n calendar.changeView(\"dayGridMonth\");\n });\n }\n if (dayButton) {\n dayButton.addEventListener(\"click\", () => {\n if (!calendar) {\n return;\n }\n calendar.changeView(\"timeGridDay\", calendar.getDate());\n });\n }\n}\nfunction refreshCalendarEvents() {\n if (!calendar) {\n createCalendar();\n return;\n }\n calendar.removeAllEvents();\n calendar.addEventSource(getEvents());\n}\nappsmith.onReady(() => {\n registerButtons();\n updateSeatTitle();\n createCalendar();\n appsmith.onModelChange(() => {\n updateSeatTitle();\n refreshCalendarEvents();\n });\n});"
},
"theme": "{{appsmith.theme}}",
"topRow": 7,
"topRow": 0,
"type": "CUSTOM_WIDGET",
"uncompiledSrcDoc": {
"css": "html,\nbody {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n font-family: Arial, sans-serif;\n overflow: auto;\n}\n\n#calendarWrapper {\n width: 100%;\n min-height: 620px;\n box-sizing: border-box;\n padding: 10px;\n background: #ffffff;\n}\n\n#calendarHeader {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 10px;\n padding: 8px 10px;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n background: #f9fafb;\n}\n\n#calendarSeatTitle {\n font-size: 15px;\n font-weight: 600;\n color: #374151;\n}\n\n#calendarViewButtons {\n display: flex;\n gap: 6px;\n}\n\n#calendarViewButtons button {\n padding: 6px 10px;\n border: 1px solid #9ca3af;\n border-radius: 5px;\n background: #ffffff;\n color: #374151;\n cursor: pointer;\n}\n\n#calendarViewButtons button:hover {\n background: #e5e7eb;\n}\n\n#calendar {\n width: 100%;\n min-height: 520px;\n}\n\n#calendarSelection {\n margin-top: 10px;\n padding: 8px 10px;\n border: 1px solid #d1d5db;\n border-radius: 5px;\n background: #f9fafb;\n color: #374151;\n font-size: 13px;\n}\n\n/* FullCalendar-Anpassungen */\n\n.fc {\n font-size: 13px;\n}\n\n.fc .fc-button {\n background: #374151;\n border-color: #374151;\n}\n\n.fc .fc-button:hover,\n.fc .fc-button-active {\n background: #111827;\n border-color: #111827;\n}\n\n.fc .fc-daygrid-day.fc-day-today,\n.fc .fc-timegrid-col.fc-day-today {\n background: #eff6ff;\n}\n\n.fc .fc-event {\n cursor: pointer;\n}",
"html": "<div id=\"calendarWrapper\">\n <div id=\"calendarHeader\">\n <div id=\"calendarSeatTitle\">\n Kalender\n </div>\n\n <div id=\"calendarViewButtons\">\n <button id=\"monthButton\" type=\"button\">\n Monat\n </button>\n\n <button id=\"dayButton\" type=\"button\">\n Tag\n </button>\n </div>\n </div>\n\n <div id=\"calendar\"></div>\n\n <div id=\"calendarSelection\">\n Kein Zeitraum ausgewählt\n </div>\n\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js\"></script>\n</div>",
"js": "let calendar = null;\n\nfunction getModel() {\n const model = appsmith.model || {};\n\n if (typeof model === \"string\") {\n try {\n return JSON.parse(model);\n } catch (error) {\n return {};\n }\n }\n\n return model;\n}\n\nfunction getEvents() {\n const model = getModel();\n\n if (!Array.isArray(model.events)) {\n return [];\n }\n\n return model.events;\n}\n\nfunction getSeatName() {\n const model = getModel();\n\n return model.seatName ||\n model.seatId ||\n \"kein Platz ausgewählt\";\n}\n\nfunction updateSeatTitle() {\n const titleElement = document.getElementById(\"calendarSeatTitle\");\n\n if (!titleElement) {\n return;\n }\n\n titleElement.textContent =\n `Kalender für ${getSeatName()}`;\n}\n\nfunction updateSelectionText(text) {\n const selectionElement =\n document.getElementById(\"calendarSelection\");\n\n if (!selectionElement) {\n return;\n }\n\n selectionElement.textContent = text;\n}\n\nfunction createCalendar() {\n const calendarElement =\n document.getElementById(\"calendar\");\n\n if (!calendarElement) {\n return;\n }\n\n if (typeof FullCalendar === \"undefined\") {\n calendarElement.textContent =\n \"FullCalendar konnte nicht geladen werden.\";\n return;\n }\n\n if (calendar) {\n calendar.destroy();\n }\n\n calendar = new FullCalendar.Calendar(calendarElement, {\n initialView: \"dayGridMonth\",\n\n locale: \"de\",\n firstDay: 1,\n\n navLinks: true,\n selectable: true,\n selectMirror: true,\n\n editable: false,\n eventStartEditable: false,\n eventDurationEditable: false,\n\n height: \"auto\",\n\n headerToolbar: {\n left: \"prev,next today\",\n center: \"title\",\n right: \"\"\n },\n\n buttonText: {\n today: \"Heute\"\n },\n\n slotDuration: \"00:30:00\",\n snapDuration: \"00:30:00\",\n\n slotMinTime: \"07:00:00\",\n slotMaxTime: \"20:00:00\",\n\n allDaySlot: true,\n nowIndicator: true,\n\n events: getEvents(),\n\n dateClick(info) {\n if (info.view.type === \"dayGridMonth\") {\n calendar.changeView(\"timeGridDay\", info.date);\n return;\n }\n\n updateSelectionText(\n `Ausgewählter Zeitpunkt: ${info.dateStr}`\n );\n },\n\n navLinkDayClick(date) {\n calendar.changeView(\"timeGridDay\", date);\n },\n\n select(info) {\n const start = formatDateTime(info.start);\n const end = formatDateTime(info.end);\n\n updateSelectionText(\n `Ausgewählt: ${start} bis ${end}`\n );\n\n appsmith.updateModel({\n selectedRange: {\n start: info.startStr,\n end: info.endStr,\n allDay: info.allDay\n }\n });\n },\n\n eventClick(info) {\n const event = info.event;\n const start = event.start\n ? formatDateTime(event.start)\n : \"\";\n\n const end = event.end\n ? formatDateTime(event.end)\n : \"\";\n\n const rangeText = event.allDay\n ? \"Ganztägig\"\n : `${start} bis ${end}`;\n\n updateSelectionText(\n `${event.title || \"Buchung\"} ${rangeText}`\n );\n }\n });\n\n calendar.render();\n}\n\nfunction formatDateTime(date) {\n if (!date) {\n return \"\";\n }\n\n return new Intl.DateTimeFormat(\"de-DE\", {\n dateStyle: \"short\",\n timeStyle: \"short\"\n }).format(date);\n}\n\nfunction registerButtons() {\n const monthButton =\n document.getElementById(\"monthButton\");\n\n const dayButton =\n document.getElementById(\"dayButton\");\n\n if (monthButton) {\n monthButton.addEventListener(\"click\", () => {\n if (calendar) {\n calendar.changeView(\"dayGridMonth\");\n }\n });\n }\n\n if (dayButton) {\n dayButton.addEventListener(\"click\", () => {\n if (calendar) {\n calendar.changeView(\n \"timeGridDay\",\n calendar.getDate()\n );\n }\n });\n }\n}\n\nfunction refreshCalendarEvents() {\n if (!calendar) {\n createCalendar();\n return;\n }\n\n calendar.removeAllEventSources();\n calendar.addEventSource(getEvents());\n}\n\nappsmith.onReady(() => {\n updateSeatTitle();\n registerButtons();\n createCalendar();\n\n appsmith.onModelChange(() => {\n updateSeatTitle();\n refreshCalendarEvents();\n });\n});"
"js": "let calendar = null;\n\nfunction getModel() {\n const model = appsmith.model || {};\n\n if (typeof model === \"string\") {\n try {\n return JSON.parse(model);\n } catch (error) {\n return {};\n }\n }\n\n return model;\n}\n\nfunction getEvents() {\n const model = getModel();\n\n if (Array.isArray(model.events)) {\n return model.events;\n }\n\n return [];\n}\n\nfunction getSeatName() {\n const model = getModel();\n\n return model.seatName ||\n model.seatId ||\n \"kein Platz ausgewählt\";\n}\n\nfunction updateSeatTitle() {\n const titleElement =\n document.getElementById(\"calendarSeatTitle\");\n\n if (!titleElement) {\n return;\n }\n\n titleElement.textContent =\n `Kalender für ${getSeatName()}`;\n}\n\nfunction createCalendar() {\n const calendarElement =\n document.getElementById(\"calendar\");\n\n if (!calendarElement) {\n return;\n }\n\n if (typeof FullCalendar === \"undefined\") {\n calendarElement.textContent =\n \"FullCalendar konnte nicht geladen werden.\";\n return;\n }\n\n if (calendar) {\n calendar.destroy();\n }\n\n calendar = new FullCalendar.Calendar(calendarElement, {\n initialView: \"dayGridMonth\",\n\n locale: \"de\",\n firstDay: 1,\n\n navLinks: true,\n navLinkDayClick(date) {\n calendar.changeView(\"timeGridDay\", date);\n },\n\n selectable: false,\n editable: false,\n eventStartEditable: false,\n eventDurationEditable: false,\n\n height: \"auto\",\n\n headerToolbar: {\n left: \"prev,next today\",\n center: \"title\",\n right: \"dayGridMonth,timeGridDay\"\n },\n\n buttonText: {\n today: \"Heute\",\n month: \"Monat\",\n day: \"Tag\"\n },\n\n slotDuration: \"00:30:00\",\n snapDuration: \"00:30:00\",\n\n slotMinTime: \"07:00:00\",\n slotMaxTime: \"20:00:00\",\n\n allDaySlot: false,\n nowIndicator: true,\n\n events: getEvents(),\n\n eventClick(info) {\n const event = info.event;\n\n const start = event.start\n ? formatDateTime(event.start)\n : \"\";\n\n const end = event.end\n ? formatDateTime(event.end)\n : \"\";\n\n const rangeText = end\n ? `${start} bis ${end}`\n : start;\n\n updateSelectionText(\n `${event.title || \"Buchung\"} ${rangeText}`\n );\n }\n });\n\n calendar.render();\n}\n\nfunction formatDateTime(date) {\n if (!date) {\n return \"\";\n }\n\n return new Intl.DateTimeFormat(\"de-DE\", {\n dateStyle: \"short\",\n timeStyle: \"short\"\n }).format(date);\n}\n\nfunction updateSelectionText(text) {\n const selectionElement =\n document.getElementById(\"calendarSelection\");\n\n if (!selectionElement) {\n return;\n }\n\n selectionElement.textContent = text;\n}\n\nfunction registerButtons() {\n const monthButton =\n document.getElementById(\"monthButton\");\n\n const dayButton =\n document.getElementById(\"dayButton\");\n\n if (monthButton) {\n monthButton.addEventListener(\"click\", () => {\n if (!calendar) {\n return;\n }\n\n calendar.changeView(\"dayGridMonth\");\n });\n }\n\n if (dayButton) {\n dayButton.addEventListener(\"click\", () => {\n if (!calendar) {\n return;\n }\n\n calendar.changeView(\n \"timeGridDay\",\n calendar.getDate()\n );\n });\n }\n}\n\nfunction refreshCalendarEvents() {\n if (!calendar) {\n createCalendar();\n return;\n }\n\n calendar.removeAllEvents();\n calendar.addEventSource(getEvents());\n}\n\nappsmith.onReady(() => {\n registerButtons();\n updateSeatTitle();\n createCalendar();\n\n appsmith.onModelChange(() => {\n updateSeatTitle();\n refreshCalendarEvents();\n });\n});"
},
"version": 1,
"widgetId": "ad7fob2vs9",
@@ -1,54 +0,0 @@
{
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"animateLoading": true,
"autoFocus": false,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"bottomRow": 7,
"boxShadow": "none",
"defaultText": "",
"dynamicBindingPathList": [
{
"key": "accentColor"
},
{
"key": "borderRadius"
}
],
"dynamicHeight": "FIXED",
"dynamicTriggerPathList": [],
"iconAlign": "left",
"inputType": "TEXT",
"isDisabled": false,
"isLoading": false,
"isRequired": false,
"isVisible": true,
"key": "ta0c6wkf1z",
"label": "Endzeit",
"labelAlignment": "left",
"labelPosition": "Top",
"labelStyle": "",
"labelTextSize": "0.875rem",
"labelWidth": 5,
"leftColumn": 21,
"maxDynamicHeight": 9000,
"minDynamicHeight": 4,
"minWidth": 450,
"mobileBottomRow": 7,
"mobileLeftColumn": 26,
"mobileRightColumn": 46,
"mobileTopRow": 0,
"needsErrorInfo": false,
"parentColumnSpace": 9.1875,
"parentId": "ekq4ry46pv",
"parentRowSpace": 10,
"renderMode": "CANVAS",
"resetOnSubmit": true,
"responsiveBehavior": "fill",
"rightColumn": 32,
"showStepArrows": false,
"topRow": 0,
"type": "INPUT_WIDGET_V2",
"version": 2,
"widgetId": "ta8xd32gsh",
"widgetName": "InputEndzeit"
}
@@ -1,54 +0,0 @@
{
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"animateLoading": true,
"autoFocus": false,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"bottomRow": 7,
"boxShadow": "none",
"defaultText": "",
"dynamicBindingPathList": [
{
"key": "accentColor"
},
{
"key": "borderRadius"
}
],
"dynamicHeight": "FIXED",
"dynamicTriggerPathList": [],
"iconAlign": "left",
"inputType": "TEXT",
"isDisabled": false,
"isLoading": false,
"isRequired": false,
"isVisible": true,
"key": "ta0c6wkf1z",
"label": "Gebucht von",
"labelAlignment": "left",
"labelPosition": "Top",
"labelStyle": "",
"labelTextSize": "0.875rem",
"labelWidth": 5,
"leftColumn": 32,
"maxDynamicHeight": 9000,
"minDynamicHeight": 4,
"minWidth": 450,
"mobileBottomRow": 7,
"mobileLeftColumn": 36,
"mobileRightColumn": 56,
"mobileTopRow": 0,
"needsErrorInfo": false,
"parentColumnSpace": 9.1875,
"parentId": "ekq4ry46pv",
"parentRowSpace": 10,
"renderMode": "CANVAS",
"resetOnSubmit": true,
"responsiveBehavior": "fill",
"rightColumn": 45,
"showStepArrows": false,
"topRow": 0,
"type": "INPUT_WIDGET_V2",
"version": 2,
"widgetId": "gdgks90sqi",
"widgetName": "InputGebuchtVon"
}
@@ -1,54 +0,0 @@
{
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"animateLoading": true,
"autoFocus": false,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"bottomRow": 7,
"boxShadow": "none",
"defaultText": "",
"dynamicBindingPathList": [
{
"key": "accentColor"
},
{
"key": "borderRadius"
}
],
"dynamicHeight": "FIXED",
"dynamicTriggerPathList": [],
"iconAlign": "left",
"inputType": "TEXT",
"isDisabled": false,
"isLoading": false,
"isRequired": false,
"isVisible": true,
"key": "ta0c6wkf1z",
"label": "Startzeit",
"labelAlignment": "left",
"labelPosition": "Top",
"labelStyle": "",
"labelTextSize": "0.875rem",
"labelWidth": 5,
"leftColumn": 9,
"maxDynamicHeight": 9000,
"minDynamicHeight": 4,
"minWidth": 450,
"mobileBottomRow": 7,
"mobileLeftColumn": 14,
"mobileRightColumn": 34,
"mobileTopRow": 0,
"needsErrorInfo": false,
"parentColumnSpace": 9.1875,
"parentId": "ekq4ry46pv",
"parentRowSpace": 10,
"renderMode": "CANVAS",
"resetOnSubmit": true,
"responsiveBehavior": "fill",
"rightColumn": 21,
"showStepArrows": false,
"topRow": 0,
"type": "INPUT_WIDGET_V2",
"version": 2,
"widgetId": "fp4jilo4ey",
"widgetName": "InputStartzeit"
}
@@ -1,53 +0,0 @@
{
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"animateLoading": true,
"autoFocus": false,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"bottomRow": 7,
"boxShadow": "none",
"defaultText": "",
"dynamicBindingPathList": [
{
"key": "accentColor"
},
{
"key": "borderRadius"
}
],
"dynamicHeight": "FIXED",
"iconAlign": "left",
"inputType": "TEXT",
"isDisabled": false,
"isLoading": false,
"isRequired": false,
"isVisible": true,
"key": "ta0c6wkf1z",
"label": "Label",
"labelAlignment": "left",
"labelPosition": "Top",
"labelStyle": "",
"labelTextSize": "0.875rem",
"labelWidth": 5,
"leftColumn": 0,
"maxDynamicHeight": 9000,
"minDynamicHeight": 4,
"minWidth": 450,
"mobileBottomRow": 7,
"mobileLeftColumn": 1,
"mobileRightColumn": 21,
"mobileTopRow": 0,
"needsErrorInfo": false,
"parentColumnSpace": 9.1875,
"parentId": "ekq4ry46pv",
"parentRowSpace": 10,
"renderMode": "CANVAS",
"resetOnSubmit": true,
"responsiveBehavior": "fill",
"rightColumn": 9,
"showStepArrows": false,
"topRow": 0,
"type": "INPUT_WIDGET_V2",
"version": 2,
"widgetId": "0k8djo34h7",
"widgetName": "InputTitel"
}
@@ -1,44 +0,0 @@
{
"animateLoading": true,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"bottomRow": 4,
"boxShadow": "none",
"buttonColor": "{{appsmith.theme.colors.primaryColor}}",
"buttonVariant": "TERTIARY",
"dynamicBindingPathList": [
{
"key": "buttonColor"
},
{
"key": "borderRadius"
}
],
"dynamicTriggerPathList": [
{
"key": "onClick"
}
],
"iconName": "cross",
"iconSize": 24,
"isDisabled": false,
"isLoading": false,
"isVisible": true,
"key": "0h513i0hp4",
"leftColumn": 58,
"minWidth": 50,
"mobileBottomRow": 4,
"mobileLeftColumn": 58,
"mobileRightColumn": 64,
"mobileTopRow": 0,
"needsErrorInfo": false,
"onClick": "{{closeModal(SeatCalendar.name);}}",
"parentId": "ekq4ry46pv",
"renderMode": "CANVAS",
"responsiveBehavior": "hug",
"rightColumn": 64,
"topRow": 0,
"type": "ICON_BUTTON_WIDGET",
"version": 1,
"widgetId": "djgr636dvq",
"widgetName": "Schliessen"
}
@@ -1,14 +1,14 @@
{
"animateLoading": true,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"bottomRow": 585,
"bottomRow": 575,
"boxShadow": "none",
"canEscapeKeyClose": true,
"canOutsideClickClose": true,
"children": [
{
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"bottomRow": 560,
"bottomRow": 550,
"boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}",
"canExtend": true,
"detachFromLayout": true,
@@ -57,7 +57,9 @@
}
],
"dynamicHeight": "AUTO_HEIGHT",
"height": 560,
"dynamicPropertyPathList": [],
"dynamicTriggerPathList": [],
"height": 550,
"isCanvas": true,
"isLoading": false,
"key": "u2wwvtyano",