Reservation system

Wappler General How To
#1

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

This is the current reservation system:

image
image.png1150×1304 80.5 KB

Use Server Connect as data source for fullcalendar
#2

This is the same Date Picker that is available in Wappler: https://www.dmxzone.com/go/33393/app-connect-date-picker-2/

Have a look at the first video at the bottom of the page.

#3

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.

#4

Hello ,

I have already written the integration steps.
But it is easy

1 Like
#5

@salvuccicarlos

Calendar/Schedule

1 Like
#6

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.

#7

Wappler is not complex .
If you checked my code. Just create 1 database table in your mysql service ( you have to make same process in buble ! )

Then copy paste other codes ! Thats it

2 Likes
#8

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.

Pouco a pouco :slight_smile:

4 Likes
#9

Ok, I managed to implement it on the page and change the event color, get the data, etc.

image
image.png1412×1452 125 KB

Now I want to know how to:

  • On click on the event, see more information

  • Show other information (than the title) on the event shown in the calendar

  • On click on the date, open a modal

And a plus one that I believe it will be more complex: to change the event color depending on the state of that event (if it’s approved or not).

Thanks!

#10

Event Color :

Add new new table field ( name must be color )
Then write color code or name ( white or #f2f2f2 )

You can use fullcalender onclick events …
https://fullcalendar.io/docs/v3/eventClick

#11

This is actually very easy just use a hex value in the color column of your database for example #587ca3.

Fullcalendar will interpret this and set the background of the event to represent this color.

#12

I’ve already read the docs on the fullcalendar webpage. I couldn’t make it work.

Could you show me how would you add to the on click of the calendar the: dmx on click

El El lun, 16 sep. 2019 a las 08:11, Dave via Wappler Community noreply@community.wappler.io escribió:

#13

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.

#14

I am currently working on the project / tasks. If this is urgent for you.
Maybe the @patrick or @Teodor could help.

#15

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.

See a tutorial on how to create a data detail here: https://docs.wappler.io/t/displaying-record-details-with-the-data-view-component/11416

6 Likes
#16

Thanks!! It worked perfectly.

Now I’m having trouble using de dateClick action.

This is mi code:

  dateClick: function(info) {
		dmx.parse('fechaParaReservar.setValue('+ info.dateStr +') +;ModalParaReservar.show()');
  }

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:

image
image.png1454×552 104 KB

Any help? Thanks :slight_smile:

#17

I solved it, I was missing some " before de info.dateStr value.

The code is:dmx.parse('fechaReservar.setValue("'+ info.dateStr +'")')

1 Like
#18

Ok, so… Now I’m having other problem.

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

Any help on this? I’m quite bad writing js.

#19

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.

#20

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…