Bastianallgeier's calendar plugin

Hey there,

I’m trying to work with @bastianallgeier’s calendar plugin and got a little bit lost. Any help would be highly appreciated !

The calendar will have maximum of one post per day, but not every day will have posts. The days that don’t have posts can get the same class inactive to keep the day structure. I attached a sketch from the design for visual reference.

— The first thing I’m trying to do is some sort of if / foreach that checks if there are posts in the month and if so, display a new month on the page (if posts in July > show July month. If no posts in the month > don’t show). Each new month will go on top (flip() somehow?).

— The second thing I’m trying to do is when hover a date to change the background of the page with an image from that day post. A little bit lost how to fetch the data from the custom field in panel. I’m getting contents using something like this:

<?php foreach($page->children()->filterBy('template', 'calendar')->children() as $item): ?>
    <?php echo $item->featuredimage() ?>
<?php endforeach ?>

This is the snippet I’m using:

<?php
date_default_timezone_set('UTC');
setlocale(LC_ALL, 'en_US');

$residencyyear = $page->year()->int();
$month = filter_input(INPUT_GET, 'month', FILTER_VALIDATE_INT);
$calendar = new calendar();
$currentMonth = $calendar->month($residencyyear, $month);
?>

<div class="calendar-wrapper">
<div class="month-wrapper">

    <div class="month-container">
        <div class="border month times"><?php echo $currentMonth->name() ?>, <?php echo $residencyyear ?></div>
    </div>

    <?php foreach($currentMonth->weeks(6) as $week): ?>
    <div class="month-container">   

      <?php foreach($week->days() as $day): ?>
          <div data-timestamp="<?php echo $residencyyear ?>" class="day<?php if($day->month() != $currentMonth) echo ' inactive' ?>"><?php echo $day->int() ?></div>
      <?php endforeach ?>  

    </div>
    <?php endforeach ?>

</div>
</div>

this is the result I’m trying to achieve as sketch. Green block would be the background image.

I also tried to use this recently to drive an events calendar, and struggled to get it to do what I wanted. I ended up using JQuery based (https://fullcalendar.io) and populating it dynamically with Kirby. Should be easy enough to use the plugins options and CSS to get the design you want.

Once you’ve got that calendar setup and working on you page, you can populate it like this:

This is an events calendar, so i had custom fields set in my blue print to capture start and end dates. The events are simply sub-pages to the events section. When you click on the event on the calendar, it will take you through to that page:

	<?php
	$events = $site->find('events')->children()->visible();
	?>
	<div id='calendar'></div>
	<script>
		$(document).ready(function() {

			$('#calendar').fullCalendar({
				header: {
					center: 'title',
					right: 'today',
					left: 'prev,next'

				},
				defaultDate: '<?php echo date('Y-m-d') ?>',
				navLinks: false,
				editable: false,
				eventLimit: true,
				events: [
				<?php foreach($events as $event): ?>
					{
						<?php
						$startdate = $event->startdate();
						$starttime = $event->starttime();
						$enddate = $event->enddate();
						$endtime = $event->endtime();

						$startisoDate = date('Y-m-d\TH:i:s', strtotime("$startdate $starttime"));
						$endisoDate = date('Y-m-d\TH:i:s', strtotime("$enddate $endtime"));
						?>
						title: '<?php echo $event->title() ?>',
						url: '<?php echo $event->url() ?>',
						start: '<?php echo $startisoDate ?>',
						end: '<?php echo $endisoDate ?>',
					},
				<?php endforeach ?>
				]
			});

		});
	</script>

You need a loop that goes through all the months you want to show on the page (from - to). Then you need a function that filters all pages for that month and checks if there are any. If so, the month is shown.

$item->featuredimage() only get’s the name of the image file, you need to create an image object:

$img = $item->featuredimage()->toFile();

But I doubt that loop makes sense here, because you don’t want to get all images, do you? What you want to do is fetch that image via Ajax on hover event.