Merge pull request #2054 from frankvp11/main

FullCalendar Element

examples/fullcalendar/fullcalendar.js

@@ -0,0 +1,24 @@
+import { loadResource } from "../../static/utils/resources.js";
+
+export default {
+  template: "<div></div>",
+  props: {
+    options: Array,
+    resource_path: String,
+  },
+  async mounted() {
+    await this.$nextTick(); // NOTE: wait for window.path_prefix to be set
+    await loadResource(window.path_prefix + `${this.resource_path}/index.global.min.js`);
+    this.options.eventClick = (info) => this.$emit("click", { info });
+    this.calendar = new FullCalendar.Calendar(this.$el, this.options);
+    this.calendar.render();
+  },
+  methods: {
+    update_calendar() {
+      if (this.calendar) {
+        this.calendar.setOption("events", this.options.events);
+        this.calendar.render();
+      }
+    },
+  },
+};

examples/fullcalendar/fullcalendar.py

@@ -0,0 +1,55 @@
+from pathlib import Path
+from typing import Any, Callable, Dict, List, Optional
+
+from nicegui.element import Element
+from nicegui.events import handle_event
+
+
+class FullCalendar(Element, component='fullcalendar.js'):
+
+    def __init__(self, options: Dict[str, Any], on_click: Optional[Callable] = None) -> None:
+        """FullCalendar
+
+        An element that integrates the FullCalendar library (https://fullcalendar.io/) to create an interactive calendar display.
+
+        :param options: dictionary of FullCalendar properties for customization, such as "initialView", "slotMinTime", "slotMaxTime", "allDaySlot", "timeZone", "height", and "events".
+        :param on_click: callback function that is called when a calendar event is clicked.
+        """
+        super().__init__()
+        self.add_resource(Path(__file__).parent / 'lib')
+        self._props['options'] = options
+
+        if on_click:
+            self.on('click', lambda e: handle_event(on_click, e))
+
+    def add_event(self, title: str, start: str, end: str, **kwargs) -> None:
+        """Add an event to the calendar.
+
+        :param title: title of the event
+        :param start: start time of the event
+        :param end: end time of the event
+        """
+        event_dict = {'title': title, 'start': start, 'end': end, **kwargs}
+        self._props['options']['events'].append(event_dict)
+        self.update()
+        self.run_method('update_calendar')
+
+    def remove_event(self, title: str, start: str, end: str) -> None:
+        """Remove an event from the calendar.
+
+        :param title: title of the event
+        :param start: start time of the event
+        :param end: end time of the event
+        """
+        for event in self._props['options']['events']:
+            if event['title'] == title and event['start'] == start and event['end'] == end:
+                self._props['options']['events'].remove(event)
+                break
+
+        self.update()
+        self.run_method('update_calendar')
+
+    @property
+    def events(self) -> List[Dict]:
+        """List of events currently displayed in the calendar."""
+        return self._props['options']['events']

examples/fullcalendar/main.py

@@ -0,0 +1,54 @@
+#!/usr/bin/env python3
+from datetime import datetime
+
+from fullcalendar import FullCalendar as fullcalendar
+
+from nicegui import events, ui
+
+options = {
+    'initialView': 'dayGridMonth',
+    'headerToolbar': {'left': 'title', 'right': ''},
+    'footerToolbar': {'right': 'prev,next today'},
+    'slotMinTime': '05:00:00',
+    'slotMaxTime': '22:00:00',
+    'allDaySlot': False,
+    'timeZone': 'local',
+    'height': 'auto',
+    'width': 'auto',
+    'events': [
+        {
+            'title': 'Math',
+            'start': datetime.now().strftime(r'%Y-%m-%d') + ' 08:00:00',
+            'end': datetime.now().strftime(r'%Y-%m-%d') + ' 10:00:00',
+            'color': 'red',
+        },
+        {
+            'title': 'Physics',
+            'start': datetime.now().strftime(r'%Y-%m-%d') + ' 10:00:00',
+            'end': datetime.now().strftime(r'%Y-%m-%d') + ' 12:00:00',
+            'color': 'green',
+        },
+        {
+            'title': 'Chemistry',
+            'start': datetime.now().strftime(r'%Y-%m-%d') + ' 13:00:00',
+            'end': datetime.now().strftime(r'%Y-%m-%d') + ' 15:00:00',
+            'color': 'blue',
+        },
+        {
+            'title': 'Biology',
+            'start': datetime.now().strftime(r'%Y-%m-%d') + ' 15:00:00',
+            'end': datetime.now().strftime(r'%Y-%m-%d') + ' 17:00:00',
+            'color': 'orange',
+        },
+    ],
+}
+
+
+def handle_click(event: events.GenericEventArguments):
+    if 'info' in event.args:
+        ui.notify(event.args['info']['event'])
+
+
+fullcalendar(options, on_click=handle_click)
+
+ui.run()