Pass PHP values to Jquery Calendar - php

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: '<',
nextIcon: '>',
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>

Answer 1

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,
...
});

Answer 2

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)