Reservation system

Wappler General How To
#21

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, {
});

#22

The astericks were to demark where the refetch has been called.

I really need to know how to create the function completely.

#23

Oh ok. Well your duplicate calendar happens because you are creating a new one in the refetch function. Just call the refetchEvents().

calendar.refetchEvents();

#24

I did that. But I really can’t make it work. I mean, how do I create the refetchCalendar function correctly and where?

#25

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
#26

Ok. I’ll wait for somebody then.

#27

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

#28

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();
    }
#29

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):

image
image.png1356×1186 59.5 KB

But when I change the query… It render 1 more calendar instead of replacing it…

image
image.png1428×1590 128 KB

#30

Try $(’#calendar’).remove();

#32

Ok, I created a new function using the remove you showed me. Like this:

image
image.png818×246 24.4 KB

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:

image
image.png1134×358 68 KB

#33

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
#34

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
#35

Any update on this? I have the same issue. Thanks.

#36

Thanks for that! Even if it’s not the “right” way to do it, at least it’s a working temporary fix!

#37

when wappler will have a calendar plugin this is very used

#38

Can vote here:

:slight_smile:

1 Like
#39

An Event Calendar based on fullcalendar has been integrated in Wappler 2.7.0

1 Like