Aktuellste Version

2026-08-14 07:59:25 +00:00
parent dac15b9209
commit 9d5cddcbf8
15 changed files with 89 additions and 468 deletions
@@ -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",