Reservation system

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.

Have you tried using render instead? https://fullcalendar.io/docs/render

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