I am using https://kylestetz.github.io/CLNDR/ with a http://olado.github.io/ template, and the events array doesn't appear to be returning for Safari and Firefox browsers. I verified this using console.log(day), and the events array is empty for these browsers only. Chrome works perfectly though.
Here is my DOT template:
<script id="dot-template" type="text/template">
<div id="clndr-3">
<div class="clndr-grid">
<div class="days-of-the-week">
<div class="days">
{{~it.days :day:index}}
{{? day.events.length }}
<a href="{{= day.events[0].url }}">
<div class="{{= day.classes }}">{{= day.day }}</div>
</a>
{{??}}
<div class="{{= day.classes }}">{{= day.day }}</div>
{{?}}
{{~}}
</div>
</div>
</div>
</div>
</script>
Here is my JS:
<script type="text/javascript">
jQuery(document).ready(function($){
let clndrTemplate = doT.template($('#dot-template').html()),
events = <?= json_encode($calendar_array); ?>,
let theCalendarInstance = jQuery('#clndr').clndr({
template: jQuery("#clndr-template"),
events: events,
render: function (data) {
return clndrTemplate(data);
},
});
});
</script>
My events array is building with PHP:
<?php
$calendar_array = array();
foreach( $events as $event ) :
$event_id = $event->ID;
$event_title = $event->post_title;
$event_date = tribe_get_start_date($event_id, false, 'l, F j, Y');
$calendar_array[] = array(
'date' => date('m-d-Y', strtotime($event_date)),
'title' => $event_title,
'url' => get_the_permalink($event_id)
);
endforeach;
?>
The calendar will initiate for all browsers, however, the events aren't being passed to the DOT template in Safari and Firefox.