Check https://stackoverflow.com/questions/10940182/change-fullcalendar-event-source-after-render
As the solution is 7 years old check that those methods mentioned are still valid in fullcalendar’s current API.
So, as I said before, I’m not a js coder. Yet… I created a function (on the same script where the calendar is rendered and named it “calendarRefetch”).
The complete code is the following (the calendarStart function works correctly):
<script>
function calendarStart() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid' ],
locale: 'es',
defaultDate: dmx.parse('hoy.datetime.formatDate("yyyy-MM-dd")'),
editable: false,
eventLimit: false, // allow "more" link when too many events
events: dmx.parse('getReservas.data.getReservas'),
eventTextColor: 'white',
selectable: true,
unselectAuto: true,
eventClick: function(info) {
info.jsEvent.preventDefault();
dmx.parse('ModalReserva.show();ModalReserva.dataReservas.select('+ info.event.id +')');
},
dateClick: function(info) {
dmx.parse('fechaReservar.setValue("'+ info.dateStr +'");ModalReservar.show()');
}
});
calendar.render();
}
**function calendarRefetch() {**
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
});
calendar.refetchEvents();
}
</script>
spoiler alert: IT DOESN’T WORK (lol).
So, every time the query changes (and the serverconnect reloads), it supposed to invoke the calendar.refetchEvents() -I’m using fullcalendar v4- and reload (no recreate) the calendar…
I’m having the same problem, and it creates as many calendars as times I update the query…
Why do you have asterisks in declaration of the function?
Where are you calling the refetch function from?
The duplicate is probably coming from the second call for a new calendar.
var calendar = new FullCalendar.Calendar(calendarEl, {
});
The astericks were to demark where the refetch has been called.
I really need to know how to create the function completely.
Oh ok. Well your duplicate calendar happens because you are creating a new one in the refetch function. Just call the refetchEvents().
calendar.refetchEvents();
I did that. But I really can’t make it work. I mean, how do I create the refetchCalendar function correctly and where?
I am not yet that versed in Wappler to know exactly where to call it from. I just know that the duplicate calendar is because you were creating a new one in your refetch function.
1 Like
Ok. I’ll wait for somebody then.
The example of code I copied here before contains the render function. This is the main problem, each time the query updates it renders a new calendar.
Code
<script>
function calendarStart() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid' ],
locale: 'es',
defaultDate: dmx.parse('hoy.datetime.formatDate("yyyy-MM-dd")'),
editable: false,
eventLimit: false, // allow "more" link when too many events
events: dmx.parse('getReservas.data.getReservas'),
eventTextColor: 'white',
selectable: true,
unselectAuto: true,
eventClick: function(info) {
info.jsEvent.preventDefault();
dmx.parse('ModalReserva.show();ModalReserva.dataReservas.select('+ info.event.id +')');
},
dateClick: function(info) {
dmx.parse('fechaReservar.setValue("'+ info.dateStr +'");ModalReservar.show()');
}
});
calendar.render();
}Somebody?
I added the calendar.destroy before rendering, so it first destroys any visible calendar, but it doesn’t work…
<script>
function calendarStart() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid' ],
locale: 'es',
defaultDate: dmx.parse('hoy.datetime.formatDate("yyyy-MM-dd")'),
editable: false,
eventLimit: false, // allow "more" link when too many events
events: dmx.parse('getReservas.data.getReservas'),
eventTextColor: 'white',
selectable: true,
unselectAuto: true,
eventClick: function(info) {
info.jsEvent.preventDefault();
dmx.parse('ModalReserva.show();ModalReserva.dataReservas.select('+ info.event.id +')');
},
dateClick: function(info) {
dmx.parse('fechaReservar.setValue("'+ info.dateStr +'");ModalReservar.show()');
}
});
calendar.destroy();
calendar.render();
}
This is how the calendar renders on the first query I make (it’s ok):
But when I change the query… It render 1 more calendar instead of replacing it…
Try $(’#calendar’).remove();
Ok, I created a new function using the remove you showed me. Like this:
So, it worked, I added a button to invoke that function I named calendarDestroy and the calendar disappeared. But when I touched to change the query and render again a new calendar, this new error appears:
I’m going to cry… I MADE IT WORK. So I used this code:
<script>
function calendarDestroy() {
myNode = document.getElementById('calendar');
myNode.innerHTML = '';
}
</script>
Basically, it doesn’t delete the DIV itself, it deletes it’s content. It worked!
So… When the query changes it first invokes the calendarDestroy() function and afterwords, calendarStart().
Thanks to everybody, especially @JonL
2 Likes
I am glad you found a way. Once I get back on my computer next week I will check out fullcalendar and try to make it work with the rerender function and addsource as that should be the right way instead of manipulating the DOM.
1 Like
Any update on this? I have the same issue. Thanks.
Thanks for that! Even if it’s not the “right” way to do it, at least it’s a working temporary fix!
when wappler will have a calendar plugin this is very used
Can vote here:
1 Like
An Event Calendar based on fullcalendar has been integrated in Wappler 2.7.0
1 Like