I’ve created a custom post type called Events and am displaying the 6 earliest dates on the home page with the closest date at the top of the list.
I want to now create a calendar page with similar code but instead split all events and place them in separate boxes sorted by month with the month name as a header.
Any ideas?
This is the code i used for the home page…
<div class="calendar_box">
<i class="fal fa-calendar-alt"></i>
<h3>
Upcoming Events
</h3>
<?php
$today = date('Ymd');
$posts = get_posts(array(
'posts_per_page' => 6,
'post_type' => 'events',
'order' => 'ASC',
'orderby' => 'meta_value',
'meta_key' => 'event_date',
'meta_type' => 'DATETIME',
'meta_query' => array(
array(
'key' => 'event_date',
'compare' => '>=',
'value' => $today,
)),
));
if( $posts ): ?>
<ul class="upEvents">
<?php foreach( $posts as $p ):
$eventDate = get_field('event_date', $p->ID, false, false);
$eventDate = new DateTime($eventDate);
$Eterms = wp_get_post_terms( $p->ID, 'event-categories');
foreach($Eterms as $Eterm) {
$taxSlug = $Eterm->slug;
}
?>
<li>
<div class="date_box <?php echo $taxSlug; ?>">
<p>
<span>
<?php echo $eventDate->format('M'); ?>
</span>
<?php echo $eventDate->format('j'); ?>
</p>
</div>
<div class="eTitle">
<p>
<?php echo $p->post_title; ?>
</p>
</div>
</li>
<?php endforeach; ?>
</ul>
<?php endif; wp_reset_query(); ?>
<div class="viewEvents">
<a href="#">View all events</a>
</div>
</div>