{
  "backgroundColor": "#FFFFFF",
  "borderColor": "#E0DEDE",
  "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
  "borderWidth": "1",
  "bottomRow": 53,
  "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": 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/fullcalendar@6.1.10/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 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": 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/fullcalendar@6.1.10/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 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",
  "widgetName": "Custom5"
}