How to update Full Calendar Event with Javascript / Python

Anvil Q&A
1

I’m trying to accomplish a update from FullCalendar when a event is updated.

So I have the following configuration

 self.calendarObj = FullCalendar.Calendar(calendar, {
      ...
      'eventClick': self.event_calender_clicked
    })

This is working and all my calendar is created

The events are saved in a table and rendered via a for loop in the _init_ method
The event_calendar_clicked function saves the updated event to the table, when I reload the page the event is updated but what I want is that the event is live updated

def event_calender_clicked(self, info):
      calendar = anvil.js.get_dom_node(self.calendar)
      calendar.fullCalendar("updateEVent", info)
      # self.calendarObj.Calendar.FullCalendar('updateEvent', info)
      # FullCalendar.Calendar('updateEvent', info)
      # self.calendarObj.render()

This is what I need update event docs but for some reason that why I tried above isn’t working.

The event is clicked but I get the error that updateEvent is not a function

Does anyone have a working example with more then the basic javascript? My app is quite complicated and large so I don’t want share my app :slight_smile: If a example is required then I will create a separate project with the problem.

Would love to hear or see possible solutions

2

Hi @joepvdpol1998 and welcome to the forum!

I haven’t looked too much into this yet, but I noticed you have a typo in your function. You have calendar.fullCalendar("updateEVent", info), which should be updateEvent. Does that solve it?

3

Hii @brooke,

Thanks for thinking along, but unfortunately that isn’t the solution.
The error: AttributeError: 'HTMLDivElement' object has no attribute 'FullCalendar'

I’ve tried the following code:

calendar = anvil.js.get_dom_node(self.calendar)
calendar.FullCalendar.fullCalendar("updateEvent", info)

and

calendar = anvil.js.get_dom_node(self.calendar)
calendar.fullCalendar("updateEvent", info)
4

Problem solved

For some reason the refechtEvent is not available on the calendar object. Which seems a bit weird because I import the full library.
I have debugged this by printing the classes / functions of the calendar object.

The print(dir()) shows all the available methods on the python object.

Seeing the available options I have solved this by removing the event and added the new event. event.remove() and self.calendarObj.addEvent({...})

To activate an onclick via python add the following property to your calendar object

...
 'eventClick': self.event_calender_clicked,
...

The self.event_calender_clicked accepts a second parameter which hold all the information about the clicked event. def event_calender_clicked(self, info): ...

printing the classes and functions can be done via print(dir(self.my_javscript_obj))
It’s a very handy debug function the dir() and I’m using it now for every javascript library to see all my options.

1 Like