Pass PHP values to Jquery Calendar

Question

I am working on a JQuery event calendar that I would like to populate with multiple values from PHP. I've got a foreach pulling all PHP values needed, but I'm not sure how to properly populate the events array in JQuery with the values that I have PHP gathering.

Thanks in advance for any advice here.

Here is the PHP foreach that gathers all of the event data needed.

<?php foreach ($collection as $content) : ?>
                    <?php 
                    $eventTitle = $content->getData('title');
                    $ogDate = $content -> render('mmedia_library_publish_date', array('type' => 'date_short')); 
                    // REFORMAT DATES FROM PHP TO A CALENDAR FRIENDLY FORMAT
                    $newDate = date('Y-d-m', strtotime($ogDate));
                    echo $newDate;
                    ?>
                        

<?php endforeach; ?>

Here is the jQuery that populates the calendar, with some dummy events in-place, for reference on the formatting that is needed.

<script type="text/javascript">
  require([
      'jquery',
      'calendar-gc',
      'domReady!'
   ], function ($) {

require(['jquery'],function(e){
    var calendar = $("#calendar").calendarGC({
      dayBegin: 0,
      prevIcon: '&#x3c;',
      nextIcon: '&#x3e;',
      onPrevMonth: function (e) {
        console.log("prev");
        console.log(e)
      },
      onNextMonth: function (e) {
        console.log("next");
        console.log(e)
      },
      // *********** ADD EVENTS FROM PHP HERE *************
      events: [
        {
          date: new Date("2022-03-15"),
          eventName: "EVENT 1",
          className: "badge bg-danger",
          onclick(e, data) {
            console.log(data);
          },
          dateColor: "red"
        },
        {
          date: new Date("2022-03-20"),
          eventName: "EVENT 2",
          className: "badge bg-danger",
          onclick(e, data) {
            console.log(data);
          },
          dateColor: "red"
        },
        {
          date: new Date("2022-03-22"),
          eventName: "EVENT 3",
          className: "badge bg-success",
          onclick(e, data) {
            console.log(data);
          },
          dateColor: "green"
        }
      ],
      onclickDate: function (e, data) {
        console.log(e, data);
      }
    });
  })


     });

  </script>

Does this answer your question? [How to access PHP variables in JavaScript or jQuery rather than ](https://stackoverflow.com/questions/1808108/how-to-access-php-variables-in-javascript-or-jquery-rather-than-php-echo-vari) — Albert Logic Einstein, Mar 22 '22 at 16:07
Possibly, thanks. I was uncertain about the format that the events array is in, but it appears to be in json format(?). I'll try and use the json_encode method for the values needed. Much Appreciated. — Rich D, Mar 22 '22 at 18:41

score 0 · Answer 1 · edited Mar 22 '22 at 22:08

Not that I recommend this approach but can you try something like

//...
$dateArr = [];
foreach () {
...
$dateArr[] = $newDate;
..
}
echo sprintf('<script>let eventStr = %s;</script>', implode(',', $dateArr));

and then later or at the end of page,


let cal = [];
let dates = eventStr.split(',');
dates.forEach(date => cal.push({
        date: new Date(date),
          eventName: "EVENT 2",
          className: "badge bg-danger",
          onclick(e, data) {
            console.log(data);
          },
          dateColor: "red"
    })
);

haven't tested it but something like this will make values available on the page and then when you initialize the calendar, you can use that array instead.

var calendar = $("#calendar").calendarGC({
    ...
    ...
    events: cal,
    ...
});

Rich D · Accepted Answer · 2022-04-05T12:19:11.593

Just wanted to post my solution to the original question. The comment/post from Adison Masih pointed me in the right direction (thank you), along with extensive searching, trial and error to get the array to display as needed in jquery.

Hopefully, this will help someone else out there that is looking to perform a similar task.

I ended-up building the array in PHP and format the date with the following code:

 <?php $eventData = array(); ?>

<?php 
  $eventTitle = '<a class="eventCalTitle" href="'.$content->getLinkUrl().'">' .$content->getData('title'). '</a>';
  $ogDate = $content -> render('mmedia_library_publish_date', array('type' => 'date_short')); 
  $newDate = date('Y-m-d', strtotime($ogDate));
  $jDate = $newDate;
  $tempArray = array("date" => $jDate, "eventName" => $eventTitle, "className" => "badge", "dateColor" => "#006fba");
  array_push($eventData, $tempArray)
?>

After the PHP array is created, I then pass the array to jQuery, using json_encode, then further modifying the date objects, adding the new Date() function and then populating the events array with my custom event data:

 const jsonData = <?php echo json_encode($eventData); ?>;

  $.each(jsonData, function( i, obj ) {
    var dateOrig = obj.date;
    obj.date = new Date(dateOrig);
  });

  const option = {
    dayBegin: 0,

  };

  option["events"] = jsonData;

$("#calendar").calendarGC(option)

Pass PHP values to Jquery Calendar

2 Answers2