Sort custom posts via date picker (month) and then by day

• markfeltwell

• July 16, 2018 at 8:22 pm

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>