Adding Featured Images To Month Grid View

Use the below snippet to add post featured images directly into the classic dayGridMonth view ("Month - Classic").

// Include featured-image data for calendar events.
add_filter( 'piecal_event_array_filter', function ( $event ) {
	if ( ! empty( $event['postId'] ) ) {
		$event['piecalGridImage'] = get_the_post_thumbnail_url(
			$event['postId'],
			'medium_large'
		);
	}

	return $event;
} );

// Add the image without replacing FullCalendar's event markup.
add_action( 'piecal_additional_event_did_mount_js', function () {
	echo <<<'JS'
if (
    info?.view?.type === 'dayGridMonth' &&
    info.isStart !== false &&
    !['background', 'inverse-background', 'none'].includes(info.event.display)
) {
    const source = info.event.extendedProps.piecalGridImage ||
        info.event.extendedProps.featuredimage;

    if (source && !info.el.querySelector('.piecal-month-image')) {
        const image = document.createElement('img');

        image.className = 'piecal-month-image';
        image.src = source;
        image.alt = '';
        image.loading = 'lazy';
        image.decoding = 'async';

        image.addEventListener('error', () => {
            image.remove();
            info.view.calendar.updateSize();
        }, { once: true });

        info.el.prepend(image);
    }
}
JS;
} );

// Style only the classic month grid.
add_action( 'piecal_inline_styles', function () {
	echo <<<'CSS'
<style>
.fc .fc-dayGridMonth-view .fc-daygrid-day-frame {
    min-height: 130px;
}

.fc .fc-dayGridMonth-view .fc-daygrid-event {
    white-space: normal;
}

.fc .fc-dayGridMonth-view .fc-daygrid-dot-event {
    flex-wrap: wrap;
    row-gap: 4px;
}

.fc .fc-dayGridMonth-view .piecal-month-image {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 2.25;
    object-fit: cover;
    border-radius: 4px;
    margin: 0 0 4px;
}

.fc .fc-dayGridMonth-view .fc-event-title {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Keep the seven day columns readable on phones. */
@media (max-width: 640px) {
    .piecal-wrapper[data-view="dayGridMonth"] #calendar {
        overflow-x: auto;
    }

    .fc .fc-dayGridMonth-view {
        min-width: 700px;
    }
}
</style>
CSS;
} );