send fullcalendar variables to php

Question

I have the following code, where I want to send a variable to PHP to filter events on the calendar:

$(document).on('click', '.cons-visitt', function(){
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        initialViews = 'listWeek';
   }else{
        initialViews = 'listWeek';
   }
   var Datavisitt = $("#Datavisitt").val();
 
   var calendarEl = document.getElementById('calendarioo');
 
    var calendar = new FullCalendar.Calendar(calendarEl, {
        
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'listWeek'
        },
        locale: "pt-br",

        buttonText:{
            today:    'Hoje',
            list:     'Lista'
        },
        
        events: '/visitas1.php?Datavisitt',
    });     
    calendar.render();      
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="POST" class="row g-3 vistutentt">
  <div class="col-md-3">
    <label for="Datavisitt" class="form-label">Inicio de Registo </label>
    <input type="date" class="form-control" name="Datavisitt" id="Datavisitt" value="<?php echo date("Y-m-d");?>">
  </div>
  <div class="col-2">
    <button type="button" class="btn btn-info cons-visitt" style="float: right; margin-right: 5%; margin-top: 4%;"><i class="metismenu-icon pe-7s-search"></i> Consultar </button>
  </div>
</form>

<div id='calendarioo'></div>

I want to send the value of this variable to PHP:

var Datavisitt = $("#Datavisitt").val();

and I'm trying it this way:

events: '/visitas1.php?Datavisitt',

But the variable in php is always NULL. Can you help?

Answer 1

In a URL querystring, the parameter format is name=value, so of course if you only have Datavisitt you've just got the name, and there is no value - hence why it's always NULL when the server receives it.

As per the fullCalendar events as a JSON feed documentation you can describe the event source in extended form, and use the extraParams option for your event feed, which enables you to specify

Other GET/POST data you want to send to the server. Can be a plain object or a function that returns an object.

Therefore you should be able to replace

events: '/visitas1.php?Datavisitt',

with

events: {
  "url": "/visitas1.php",
  "extraParams": function() {
    return { "Datavisitt": $("#Datavisitt").val() }
  }
}

to dynamically send the latest value from the Datavisitt field every time the event source data is requested from the server.