Adding Pie Calendar controls to the calendar footer

If you're displaying events in a list view, and there are a lot of events, it may be helpful to show the calendar's navigation controls at the bottom of the calendar as well as the top. The following snippet is an example of how to do that.

add_filter( 'piecal-footer', function( $footer_text ) {
	$footer_text .= '<br>';

	ob_start();
	echo $footer_text . '<br>';
	?>
	<div class="piecal-controls fc">
                <label class="piecal-controls__view-chooser">
                    <?php
                    /* Translators: Label for calendar view chooser. */
                    _e('Choose View', 'piecal')
                    ?>
                    <select x-model="$store.calendarEngine.calendarView" @change="piecalChangeView($store.calendarEngine.calendarView)">
                        <option value="dayGridMonth">
                            <?php 
                                /* Translators: String for Month - Classic view in view picker dropdown. */
                                _e( 'Month - Classic', 'piecal' ); 
                            ?>
                        </option>
                        <option value="listMonth">
                            <?php 
                                /* Translators: String for Month - List view in view picker dropdown. */
                                _e( 'Month - List', 'piecal' ); 
                            ?>
                        </option>
                        <option value="timeGridWeek">
                            <?php 
                                /* Translators: String for Week - Time Grid view in view picker dropdown. */
                                _e( 'Week - Time Grid', 'piecal' ); 
                            ?>
                        </option>
                        <option value="listWeek">
                            <?php 
                                /* Translators: String for Week - List view in view picker dropdown. */
                                _e( 'Week - List', 'piecal' ); 
                            ?>
                        </option>
                        <option value="dayGridWeek">
                            <?php 
                                /* Translators: String for Week - Classic view in view picker dropdown. */
                                _e( 'Week - Classic', 'piecal' ); 
                            ?>
                        </option>
                        <option value="listDay">
                            <?php 
                                /* Translators: String for Day - Classic view in view picker dropdown. */
                                _e( 'Day', 'piecal' ); 
                            ?>
                        </option>
                    </select>
                </label>
                <div class="piecal-controls__navigation-button-group">
                    <button 
                    class="fc-button fc-button-primary piecal-controls__today-button"
                    @click="window.calendar.today(); $store.calendarEngine.viewTitle = window.calendar.currentData.viewTitle"
                    x-text="$store.calendarEngine.buttonText.today ?? 'Today'">
                    </button>
                    <button 
                    class="fc-button fc-button-primary piecal-controls__prev-button"
                    @click="window.calendar.prev(); $store.calendarEngine.viewTitle = window.calendar.currentData.viewTitle"
                    :aria-label="$store.calendarEngine.buttonText.prev + ' ' + $store.calendarEngine.viewSpec"><</button>
                    <button 
                    class="fc-button fc-button-primary piecal-controls__next-button"
                    @click="window.calendar.next(); $store.calendarEngine.viewTitle = window.calendar.currentData.viewTitle" 
                    :aria-label="$store.calendarEngine.buttonText.next + ' ' + $store.calendarEngine.viewSpec">></button>
                </div>
            </div>
	<?php
	
	return ob_get_clean();
}, 20);