working version to add and delete items. essentially just updates the props (which is how the user can modify the element aswell if they'd like) and then just updates the calendar

nicegui/elements/fullcalendar.js

@@ -6,7 +6,6 @@ export default {
   },
   mounted() {
     this.options.eventClick = (info) => {
-      console.log("hi2");
       this.$emit("click", { info: info });
     };
 
@@ -15,11 +14,13 @@ export default {
   },
   methods: {
     update_calendar() {
-      if (this.calendar) {    
-        this.calendar.render()
-      }
+      if (this.calendar) {   
+        this.calendar.setOption('events', this.options.events)
+        this.calendar.render();
+          }
     },
 
 
+
   },
 };

nicegui/elements/fullcalendar.py

@@ -13,7 +13,6 @@ class FullCalendar(Element, component='fullcalendar.js', libraries=['lib/fullcal
         
         if on_click:
             def handle_on_click(e: GenericEventArguments):
-                # print(e)
                 handle_event(on_click, e)
 
             self.on("click", handle_on_click, ['info'])
@@ -25,23 +24,14 @@ class FullCalendar(Element, component='fullcalendar.js', libraries=['lib/fullcal
         self._props['options']['events'].append(event_dict)
         super().update()
         self.run_method('update_calendar')
-        super().update()
 
     def remove_event(self, title, start, end, **args):
-        index_to_remove = None
-        for i, event in enumerate(self._props['options']['events']):
-            if (
-                event["title"] == title
-                and event["start"] == start
-                and event["end"] == end
-                and all(event[key] == args[key] for key in args)
-            ):
-                index_to_remove = i
+
+        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
 
-        # Remove the event if found
-        if index_to_remove is not None:
-            del self._props['options']['events'][index_to_remove]
         super().update()
         self.run_method('update_calendar')
         

website/more_documentation/fullcalendar_test.py

@@ -1,4 +1,10 @@
 from nicegui import app, ui
+from datetime import datetime
+
+def format_date(date_str):
+    # Parse the date string and format it consistently
+    parsed_date = datetime.fromisoformat(date_str)
+    return parsed_date.strftime('%Y-%m-%d %H:%M:%S')
 
 
 
@@ -15,109 +21,41 @@ options = {
 
 
 title= None
+fullcal = None
 def func(e):
-    global title, card
+    
+    global fullcal, title, card
     title = None
-    print(e)
+    # print(e)
     try:
-        print(e.args['info']['event']['title'])
-        title = e.args['info']['event']['title']
+        start = format_date(e.args['info']['event']['start'])
+        end = format_date(e.args['info']['event']['end'])
+        title2 = e.args['info']['event']['title']
     except:
-        pass
+        title2 = None
 
-    if title:
+    if title2:
         card = ui.card().style("background-color: #f0f0f0; position: absolute; z-index: 10000; top: 50%; left: 50%; transform: translate(-50%, -50%);")
         with card:
-            ui.label(title)
+            ui.label(title2)
+            ui.button("Click me to remove the event!", on_click=lambda : (fullcal.remove_event(title=title2.strip(), start=(start), end=(end)), card.delete()))
             ui.button("Close", on_click=lambda e: card.delete())
 
 
 fullcal = ui.fullcalendar(options,  on_click=lambda e: func(e))
-fullcal.addevent('MATH 1B03 - T06 - Linear Algebra I', '2023-10-11 09:30:00', '2023-10-11 10:20:00')
-fullcal.addevent('MATH 1ZA3 - C01 - Engineering Mathematics I', '2023-10-11 11:30:00', '2023-10-11 12:20:00')
-fullcal.addevent('COMPSCI 1MD3 - T05 - Introduction to Programming', '2023-10-11 12:30:00', '2023-10-11 13:20:00')
-fullcal.addevent('MATH 1B03 - C02 - Linear Algebra I', '2023-10-11 14:30:00', '2023-10-11 15:20:00')
-fullcal.addevent('FRENCH 1A06A - C04 - Introduction to French Studies: Advanced Level', '2023-10-11 20:00:00', '2023-10-11 22:00:00')
-fullcal.addevent('COMPSCI 1JC3 - C01 - Introduction to Computational Thinking', '2023-10-12 10:30:00', '2023-10-12 11:20:00')
-fullcal.addevent('MATH 1ZA3 - C01 - Engineering Mathematics I', '2023-10-12 11:30:00', '2023-10-12 12:20:00')
-fullcal.addevent('COMPSCI 1MD3 - C01 - Introduction to Programming', '2023-10-12 13:30:00', '2023-10-12 14:20:00')
-fullcal.addevent('MATH 1B03 - C02 - Linear Algebra I', '2023-10-12 14:30:00', '2023-10-12 15:20:00')
-fullcal.addevent('COMPSCI 1JC3 - C01 - Introduction to Computational Thinking', '2023-10-13 10:30:00', '2023-10-13 11:20:00')
-fullcal.addevent('COMPSCI 1JC3 - T01 - Introduction to Computational Thinking', '2023-10-13 11:30:00', '2023-10-13 13:20:00')
-fullcal.addevent('MATH 1ZA3 - T02 - Engineering Mathematics I', '2023-10-13 14:30:00', '2023-10-13 15:20:00')
-fullcal.addevent('MATH 1ZA3 - C01 - Engineering Mathematics I', '2023-10-16 11:30:00', '2023-10-16 12:20:00')
-fullcal.addevent('COMPSCI 1MD3 - C01 - Introduction to Programming', '2023-10-16 13:30:00', '2023-10-16 14:20:00')
-fullcal.addevent('MATH 1B03 - C02 - Linear Algebra I', '2023-10-16 14:30:00', '2023-10-16 15:20:00')
-fullcal.addevent('FRENCH 1A06A - T07 - Introduction to French Studies: Advanced Level', '2023-10-16 17:30:00', '2023-10-16 18:20:00')
-fullcal.addevent('FRENCH 1A06A - C04 - Introduction to French Studies: Advanced Level', '2023-10-16 19:00:00', '2023-10-16 20:00:00')
-fullcal.addevent('COMPSCI 1JC3 - C01 - Introduction to Computational Thinking', '2023-10-17 10:30:00', '2023-10-17 11:20:00')
-fullcal.addevent('COMPSCI 1MD3 - C01 - Introduction to Programming', '2023-10-17 14:30:00', '2023-10-17 15:20:00')
-fullcal.addevent('MATH 1B03 - T06 - Linear Algebra I', '2023-10-18 09:30:00', '2023-10-18 10:20:00')
-
-
 
 
 def add_event():
     global fullcal
-    fullcal.addevent("Math 1b03", "2023-11-18 09:30:00", "2023-11-18 10:20:00")
+    fullcal.addevent("Math 1b03", format_date("2023-11-18 09:30:00"), format_date("2023-11-18 10:20:00"), color="red")
     
-    print(fullcal._props)
 
 
 def remove_event():
     global fullcal
-    fullcal.remove_event("Math 1b03", "2023-11-18 09:30:00", "2023-10-19 10:20:00")
+    fullcal.remove_event("Math 1b03", format_date("2023-11-18 09:30:00"), format_date("2023-11-18 10:20:00"))
 
 ui.button("click me to add event", on_click=add_event)
-ui.button("Clcik me to delete event", on_click=remove_event)
 ui.run()
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-