new
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
"borderColor": "#E0DEDE",
|
||||
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
|
||||
"borderWidth": "1",
|
||||
"bottomRow": 51,
|
||||
"bottomRow": 54,
|
||||
"boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}",
|
||||
"defaultModel": "{{\n {\n events: GetSeats.data || [],\n seatId: appsmith.store.selectedSeatId,\n seatName: appsmith.store.selectedSeatName\n }\n}}",
|
||||
"dynamicBindingPathList": [
|
||||
@@ -54,7 +54,7 @@
|
||||
"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});"
|
||||
},
|
||||
"theme": "{{appsmith.theme}}",
|
||||
"topRow": 4,
|
||||
"topRow": 7,
|
||||
"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}",
|
||||
|
||||
Reference in New Issue
Block a user