javascript php jquery fullcalendar fullcalendar-3

How to pass php array with multiple title and start to fullCalendar 3

I have the following calendar using fullCalendar 3

$(document).ready(function() {
  $('#calendar').fullCalendar({

    defaultDate: '2021-12-02',
    eventLimit: true, // allow "more" link when too many events
    events: [{
        title: 'All Day Event',
        start: '2021-12-02'
      },
      {
        title: 'Long Event',
        start: '2021-12-02',
        end: '2021-12-4'
      },
      {
        title: 'Click for Google',
        url: 'https://google.com/',
        start: '2021-12-24'
      }
    ]
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" crossorigin="anonymous">
  <title>Sample</title>
</head>

<body>
  <div class="ui container">
    <div class="ui grid">
      <div class="ui sixteen column">
        <div id="calendar"></div>
      </div>
    </div>
  </div>
</body>

</html>

Now I have a PHP array as follows

$arrayDate = [
  "title" => "SG-12345-0 : xx, yy", 
  "start" => "2021-12-02"
];

I pass this array to the events by modifying the initial jQuery code as follows

$(document).ready(function() {
    var jArray = <?php echo json_encode($arrayDate); ?>;
    console.log(jArray);

    $('#calendar').fullCalendar({

      defaultDate: '2021-12-02',
      eventLimit: true, // allow "more" link when too many events
      events: [jArray]
    });
    
  });

It is working fine. But what I need to know is how can I pass multiple title and start keys if my php array contains more than one start date and titles?

Eg: For an array like the following

$arrayDate = [
  "2021-12-02" => "SG-12345-0 : xx, yy", 
  "2021-12-03" => "SG-156645-0 : aa, bb", 
  "2021-12-02" => "SG-13435-0 : cc, dd", 
  "2021-12-04" => "SG-76864-0 : ee, ff"
];

Solution

In order to pass events to fullCalendar, your array needs to be in the format which fullCalendar understands - i.e. with the correct property names specified in each event.

So for multiple events, in the PHP this would be something like this:

$arrayDate = [
  ["start" => "2021-12-02", "title" => "SG-12345-0 : xx, yy"], 
  ["start" => "2021-12-03", "title => "SG-156645-0 : aa, bb"], 
  ["start" => "2021-12-02", "title" => "SG-13435-0 : cc, dd"], 
  ["start" => "2021-12-04", "title" => "SG-76864-0 : ee, ff"]
];

When JSON-encoded, this will come out ready-made as a JSON array, and if you're injecting this into the JS code directly, you can just echo it and it'll be treated like a literal in the JS (i.e. as if it was hard-coded) so you don't need to parse it.

e.g. in your calendar config you can just write:

events: <?php echo json_encode($arrayDate); ?>

However I would always recommend using fullCalendar's more sophisticated event feed approach instead of injecting the data directly. See https://fullcalendar.io/docs/v3/events-json-feed for details. In this approach you simply give fullCalendar a URL where it can go to fetch events whenever it needs them. It will make a request to the URL (via AJAX) automatically when the calendar is first loaded, and again later if the user changes the calendar's date range to a date for which no events have yet been downloaded. The PHP script at that URL should fetch the relevant events and just echo the JSON-encoded event data. FullCalendar will send start and end dates in the request so your server can efficiently provide only events which are relevant to the dates the user is looking at.