How to disable the modal on FullCalendar if a event is set to no-show in MySQL DB?

Question

I am currently trying to insert a function in my fullcalendar where I want the modal not to be displayed due to a variable set to the event in the database.

My goal is as follows:

Event is marked as no-show
Event is displayed in the calendar
If you click on the event does not happen or there is an error message that the event is not selectable
Events which are not marked as no-show should open the modal normally

My calendar.js:

var calendar = new FullCalendar.Calendar(calendarEl, {
    locale: 'de',
    defaultView: 'timeGridWeek',
    plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'timeGridWeek,listMonth'
    },
    navLinks: false, // can click day/week names to navigate views
    businessHours: false, // display business hours
    editable: true,
    //uncomment to have a default date
    //defaultDate: currentTime,
    defaultDate: '2020-11-16',
    events: url+'api/load.php',
    eventClick: function(arg) {
        var id = arg.event.id;
        var eventOpen = arg.event.open;
        
        $('#editEventId').val(id);
        $('#editOpen').val(eventOpen);

        $.ajax({
          url:url+"api/getevent.php",
          type:"POST",
          dataType: 'json',
          data:{id:id},
          success: function(data) {
                $('#editEventTitle').val(data.title);
                $('#editStartDate').val(data.start);
                $('#editEndDate').val(data.end);
                $('#editColor').val(data.color);
                $('#editTextColor').val(data.textColor);
                $('#editOpen').val(data.open);
                $('#editeventmodal').modal();
            }
        });

        if (eventOpen == 'no') {
            $('#editeventmodal').modal('hide');
        }

        calendar.refetchEvents();
    }
});

My get event.php (open is the no-show value with "no" or "yes"):

<?php
include("../config.php");
if (isset($_POST['id'])) {
  $row = $db->row("SELECT * FROM tbl_events where id=?", [$_POST['id']]);
  $data = [
    'id'        => $row->id,
    'title'     => $row->title,
    'start'     => date('d-m-Y H:i:s', strtotime($row->start_event)),
    'end'       => date('d-m-Y H:i:s', strtotime($row->end_event)),
    'color'     => $row->color,
    'textColor' => $row->text_color,
    'open'      => $row->open
  ];
  echo json_encode($data);
 }
 ?>

Beginning of my index.php form:

<div class="modal fade" id="editeventmodal" tabindex="-1" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">

        <div class="modal-header">
            <h5 class="modal-title">Für Event eintragen</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">

            <div class="container-fluid">

                <form id="editEvent" class="form-horizontal">
                <input type="hidden" id="editEventId" name="editEventId" value="">
                <input type="hidden" id="editOpen" name="editOpen" value="">

Thanks for your help.

score 1 · Accepted Answer · answered Oct 08 '20 at 00:31

This bit:

if (eventOpen == 'no') {
            $('#editeventmodal').modal('hide');
}

makes no sense because

a) it relies on eventOpen which is attempting to use a value on the fullCalendar event object which

won't exist because custom properties are stored in the extendedProps collection of the event, and
isn't using the value from the database, as you say you want.

Also because

b) it's not waiting for the AJAX call to complete before making the check - so even if it relied on the correct property from the database, the value wouldn't exist yet, and neither would the modal - it would attempt to hide the modal before it had been shown!

Also what's the point of even showing the modal if you don't want to? Showing and then immediately hiding again is just a waste of code and time.

This would make more logical sense and looks like it should work:

eventClick: function(arg) {
    var id = arg.event.id;

    $.ajax({
      url: url+"api/getevent.php",
      type: "POST",
      dataType: "json",
      data: { id: id },
      success: function(data) {
        //only populate and show the modal if the event was a "show"
        if (data.open == "yes")
        {
            $('#editEventId').val(id);
            $('#editOpen').val(data.open);
            $('#editEventTitle').val(data.title);
            $('#editStartDate').val(data.start);
            $('#editEndDate').val(data.end);
            $('#editColor').val(data.color);
            $('#editTextColor').val(data.textColor);
            $('#editOpen').val(data.open);
            $('#editeventmodal').modal();
        }
        else {
          alert("Event is a no-show");
        }
      }
    });
}

It was also unclear why calendar.refetchEvents() would be helpful in this scenario, since by the time that runs, you can't have changed any data in the calendar or the database. So I removed that.

How to disable the modal on FullCalendar if a event is set to no-show in MySQL DB?

1 Answers1