Hello, so I’m working on a Reservation system similar to the one I “developed” on Bubble.
Basically, the calendar shows me the current reservations and when you click on the date you want to book a modal is shown and complete the reservation.
The main problem is: how do I make the calendar get the data from the query and then put the data in the calendar? Is there any tool inside wappler for this (as there was in bubble)? Should I give up (really I wouldn’t be able to make it using a plugin such as fullcalendar)?
As there isn’t a calendar module in Wappler you will need to either build your own or use one like FullCalendar. I think @s.alpaslan has successfully integrated it before. Perhaps he could tell us more? I would be interested in this too.
Thanks, I’ve read the topic but I couldn’t make it work on my page. It’s very complicated to create a booking system using wappler in comparison to bubble.is.
This is something that the team should consider, an interactive calendar that can retrieve information from a query.
My tip would be get your database created and then create a blank page with only the necessary Fullcalendar files included, get this working, then use Wappler to build around it.
You can not use Wappler to do this for you. Will require some custom coding.
Simply use the java onclick event listener within the Fullcalendar script, likewise with event selection, we set a cookie on click with the events unique reference, again using java.
You can use dmx.parse to evaluate App Connect expressions, you can also use it to call the actions on App Connect components.
Lets say your events come from a database query and you want to display an modal with the details from the clicked event. The code would look something like:
var calendar = new Calendar(calendarEl, {
events: dmx.parse('serverconnect1.data.query1'),
eventClick: function(info) {
info.jsEvent.preventDefault();
dmx.parse('dataview1.select(' + info.event.id + ');modal1.show()');
}
});
dmx.parse('serverconnect1.data.query1') will fill the calendar with the events retrieved from the database, make sure the format is correctly according to the calendar documentation.
dmx.parse('dataview1.select(' + info.event.id + ');modal1.show()') will select the correct record for the dataview and display the modal.
Basically, I created a variable to contain the date that is selected (I will use it afterwords) and open the modal. But surprisingly (or not…), nothing happend.
I tried changing de info.dateStr to info.date but the code retrieved me this error:
I have different types of calendars (each for one room). So, when you change the place, the query updates and the calendarStar() function re-renders. The problem? It creates other new calendar…
So, I’ve read everything I could and even tried to create a function named calendarStop() that contained the fullcalendar delete function, so on every query update the calendar would be deleted and a new one is created. I couldn’t make work (the function was bad written)…
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…
