72 lines
16 KiB
JSON
72 lines
16 KiB
JSON
{
|
||
"backgroundColor": "#FFFFFF",
|
||
"borderColor": "#E0DEDE",
|
||
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
|
||
"borderWidth": "1",
|
||
"bottomRow": 71,
|
||
"boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}",
|
||
"defaultModel": "{{\n {\n events: GetBookings.data || [],\n seatId: appsmith.store.selectedSeatId,\n seatName: appsmith.store.selectedSeatName\n }\n}}",
|
||
"dynamicBindingPathList": [
|
||
{
|
||
"key": "theme"
|
||
},
|
||
{
|
||
"key": "borderRadius"
|
||
},
|
||
{
|
||
"key": "boxShadow"
|
||
},
|
||
{
|
||
"key": "defaultModel"
|
||
}
|
||
],
|
||
"dynamicHeight": "FIXED",
|
||
"dynamicPropertyPathList": [
|
||
{
|
||
"key": "seatSelected"
|
||
}
|
||
],
|
||
"dynamicTriggerPathList": [
|
||
{
|
||
"key": "seatSelected"
|
||
}
|
||
],
|
||
"events": [
|
||
"seatSelected"
|
||
],
|
||
"isCanvas": false,
|
||
"isLoading": false,
|
||
"isSearchWildcard": true,
|
||
"isVisible": true,
|
||
"key": "3r58ovsolf",
|
||
"leftColumn": 0,
|
||
"maxDynamicHeight": 9000,
|
||
"minDynamicHeight": 4,
|
||
"mobileBottomRow": 40,
|
||
"mobileLeftColumn": 3,
|
||
"mobileRightColumn": 26,
|
||
"mobileTopRow": 10,
|
||
"needsErrorInfo": false,
|
||
"parentColumnSpace": 7.40625,
|
||
"parentId": "ekq4ry46pv",
|
||
"parentRowSpace": 10,
|
||
"renderMode": "CANVAS",
|
||
"rightColumn": 63,
|
||
"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 min-height: 100%;\n font-family: Arial, sans-serif;\n overflow: hidden;\n}\n\n#calendarWrapper {\n width: 100%;\n box-sizing: border-box;\n padding: 10px;\n background: #ffffff;\n overflow: visible;\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#calendar {\n width: 100%;\n min-height: 520px;\n}\n\n/* Text unterhalb des Kalenders */\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-Grundformatierung */\n.fc {\n width: 100%;\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}\n\n/* Samstage und Sonntage grau hinterlegen */\n#calendar td.fc-day-sat,\n#calendar td.fc-day-sun,\n#calendar .fc-timegrid-col.fc-day-sat,\n#calendar .fc-timegrid-col.fc-day-sun {\n background-color: #eeeeee !important;\n}\n\n/* Kopfzeile von Samstag und Sonntag */\n#calendar .fc-col-header-cell.fc-day-sat,\n#calendar .fc-col-header-cell.fc-day-sun {\n background-color: #d6d6d6 !important;\n}\n\n/* Monatsansicht: keine interne Scrollbar */\n#calendar .fc-daygrid .fc-scroller {\n overflow: visible !important;\n}\n\n/* Tagesansicht: vertikale Scrollbar */\n#calendar .fc-timegrid .fc-scroller {\n overflow-y: auto !important;\n overflow-x: hidden !important;\n}",
|
||
"html": "<div id=\"calendarWrapper\">\n <div id=\"calendarHeader\">\n <div id=\"calendarSeatTitle\">\n Kalender\n </div>\n </div>\n\n <div id=\"calendar\"></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 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 updateCalendarViewSettings(viewType) {\n if (!calendar) {\n return;\n }\n if (viewType === \"timeGridDay\") {\n // Tagesansicht: übersichtliche Zeilen und interne Scrollbar\n calendar.setOption(\"height\", 620);\n calendar.setOption(\"contentHeight\", 540);\n calendar.setOption(\"expandRows\", false);\n } else {\n // Monatsansicht: kompletter Monat ohne interne Scrollbar\n calendar.setOption(\"height\", \"auto\");\n calendar.setOption(\"contentHeight\", \"auto\");\n calendar.setOption(\"expandRows\", true);\n }\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 const day = date.getDay();\n\n // Samstag und Sonntag nicht öffnen\n if (day === 0 || day === 6) {\n updateSelectionText(\"Samstag und Sonntag sind nicht buchbar.\");\n return;\n }\n calendar.changeView(\"timeGridDay\", date);\n },\n dateClick(info) {\n const day = info.date.getDay();\n\n // Samstag und Sonntag nicht öffnen\n if (day === 0 || day === 6) {\n updateSelectionText(\"Samstag und Sonntag sind nicht buchbar.\");\n return;\n }\n\n // Klick auf eine Tageszahl in der Monatsansicht\n if (info.view.type === \"dayGridMonth\") {\n calendar.changeView(\"timeGridDay\", info.date);\n }\n },\n selectable: false,\n editable: false,\n eventStartEditable: false,\n eventDurationEditable: false,\n height: 650,\n contentHeight: 560,\n expandRows: false,\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": 0,
|
||
"type": "CUSTOM_WIDGET",
|
||
"uncompiledSrcDoc": {
|
||
"css": "html,\nbody {\n margin: 0;\n padding: 0;\n width: 100%;\n min-height: 100%;\n font-family: Arial, sans-serif;\n overflow: hidden;\n}\n\n#calendarWrapper {\n width: 100%;\n box-sizing: border-box;\n padding: 10px;\n background: #ffffff;\n overflow: visible;\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#calendar {\n width: 100%;\n min-height: 520px;\n}\n\n/* Text unterhalb des Kalenders */\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-Grundformatierung */\n\n.fc {\n width: 100%;\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}\n\n/* Samstage und Sonntage grau hinterlegen */\n\n#calendar td.fc-day-sat,\n#calendar td.fc-day-sun,\n#calendar .fc-timegrid-col.fc-day-sat,\n#calendar .fc-timegrid-col.fc-day-sun {\n background-color: #eeeeee !important;\n}\n\n/* Kopfzeile von Samstag und Sonntag */\n\n#calendar .fc-col-header-cell.fc-day-sat,\n#calendar .fc-col-header-cell.fc-day-sun {\n background-color: #d6d6d6 !important;\n}\n\n/* Monatsansicht: keine interne Scrollbar */\n\n#calendar .fc-daygrid .fc-scroller {\n overflow: visible !important;\n}\n\n/* Tagesansicht: vertikale Scrollbar */\n\n#calendar .fc-timegrid .fc-scroller {\n overflow-y: auto !important;\n overflow-x: hidden !important;\n}",
|
||
"html": "<div id=\"calendarWrapper\">\n <div id=\"calendarHeader\">\n <div id=\"calendarSeatTitle\">\n Kalender\n </div>\n </div>\n\n <div id=\"calendar\"></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 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 updateCalendarViewSettings(viewType) {\n if (!calendar) {\n return;\n }\n\n if (viewType === \"timeGridDay\") {\n // Tagesansicht: übersichtliche Zeilen und interne Scrollbar\n calendar.setOption(\"height\", 620);\n calendar.setOption(\"contentHeight\", 540);\n calendar.setOption(\"expandRows\", false);\n } else {\n // Monatsansicht: kompletter Monat ohne interne Scrollbar\n calendar.setOption(\"height\", \"auto\");\n calendar.setOption(\"contentHeight\", \"auto\");\n calendar.setOption(\"expandRows\", true);\n }\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\nnavLinkDayClick(date) {\n const day = date.getDay();\n\n // Samstag und Sonntag nicht öffnen\n if (day === 0 || day === 6) {\n updateSelectionText(\n \"Samstag und Sonntag sind nicht buchbar.\"\n );\n return;\n }\n\n calendar.changeView(\"timeGridDay\", date);\n},\n\ndateClick(info) {\n const day = info.date.getDay();\n\n // Samstag und Sonntag nicht öffnen\n if (day === 0 || day === 6) {\n updateSelectionText(\n \"Samstag und Sonntag sind nicht buchbar.\"\n );\n return;\n }\n\n // Klick auf eine Tageszahl in der Monatsansicht\n if (info.view.type === \"dayGridMonth\") {\n calendar.changeView(\"timeGridDay\", info.date);\n }\n},\n\nselectable: false,\n editable: false,\n eventStartEditable: false,\n eventDurationEditable: false,\n\n height: 650,\n contentHeight: 560,\n expandRows: false,\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",
|
||
"widgetName": "Custom5"
|
||
} |