Use a good but simple JQuery Calendar for any Custom Post Type

1. Install the „WP FullCalendar“ plugin.

2. Go to the settings Page „Settings – WP FullCalendar“ and set up the following:
   • You do not need to select any post types as we control this with the shortcode and hooks.
   • Just define how the calendar looks.

3. When you use the Total them then you can add some necessary custom meta fields to your custom post type which you wan to use for the calendar.

/**
	 * Register custom fields.
	 *
	 * @link https://total.wpexplorer.com/docs/snippets/add-custom-metaboxes-to-total/
	 */
function my_register_event_metaboxes() {
	if ( ! class_exists( 'WPEX_Meta_Factory' ) ) {
		return;
	}

	$icons_list = [];
	if ( \function_exists( '\wpex_ticons_list' ) ) {
		$ticons = \wpex_ticons_list();
		if ( $ticons && \is_array( $ticons ) ) {
			foreach ( $ticons as $ticon ) {
				if ( \str_contains( $ticon, 'custom/' ) ) {
					continue;
				}
				if ( 'none' === $ticon || '' === $ticon ) {
					$icons_list[] = \esc_html__( 'None', 'total' );
				} else {
					$icons_list['ticon ticon-' . \trim( $ticon )] = \ucwords( \str_replace( '-', ' ', $ticon ) );
				}
			}
		}
	}

	new WPEX_Meta_Factory(  array(
		'id'       => 'event_data',
		'title'    => esc_html__( 'Details des Events', 'text_domain' ),
		'screen'   => array( 'post', 'ausstellung', 'event' ), //post types to add the metabox to
		'context'  => 'normal',
		'priority' => 'default',
		'fields'   => array(


			array(
				'name' => esc_html__( 'Beginn der Veranstaltung', 'enym' ),
				'id'   => 'enym_date',
				'desc' => esc_html__( 'Dies ist der Beginn der Veranstaltung', 'enym' ), //Das Datum, das oben rechts eingestellt werden kann ist lediglich das Erscheinungsdatum des Beitrags
				'type' => 'date',
			),
			array(
				'name' => esc_html__( 'Ende der Veranstaltung', 'enym' ),
				'id'   => 'enym_date_end',
				'desc' => esc_html__( 'Dies ist das Ende der Veranstaltung', 'enym' ),
				'type' => 'date',
			),
			array(
				'name' => esc_html__( 'Startzeit - Veranstaltungsende', 'text_domain' ),
				'id'   => 'enym_beginn_time',
				'desc' => esc_html__( 'Dies ist die Uhrzeit der Veranstaltung. Angabe des Endes ist optional.', 'text_domain' ),
				'type' => 'text',
			),
			array(
				'name' => esc_html__( 'Anmeldeseite', 'text_domain' ),
				'desc' => esc_html__( 'Ergänzt den Hinweis: "Für dieses Event wird eine Anmeldung empfohlen"', 'enym' ),
				'id'   => 'enym_application',
				'type' => 'url',
			),
			array(
				'name' => esc_html__( 'Anhang', 'text_domain' ),
				'id'   => 'enym_invitation_front',
				'type' => 'upload',
				'desc' => esc_html__( 'Einladungsflyer als JPG', 'enym' ),
				'return' => 'id', // return ID or URL
			),
/*
			array(
				'name' => esc_html__( 'Laudatio/ Eröffnungsrede', 'text_domain' ),
				'type' => 'wp_editor',
				'id'   => 'opening-speech',
				'media_buttons' => 'true',
				'quicktags' => 'true',
				'rows' => '10'
				//'textarea_rows' => '25',
				//'textarea_name' => 'enym-laudation-feld',
				//'media_buttons' => 'true'
			),
			
			array(
				'name' => esc_html__( 'Icon Select', 'text_domain' ),
				'id' => 'YOUR_UNIQUE_CUSTOM_FIELD_NAME',
				'type' => 'icon_select',
				'choices' => $icons_list
			),
*/


		)
	) );
}
add_action( 'admin_init', 'my_register_event_metaboxes' );

4. Now let’s use a hook and remove the regular „where“ clause for the events query and set our own query. Make sure to change this code to make it work with your own custom post type.

//CALENDAR: Remove the custom where clause before the calendar query is executed
function hubbubart_calendar_remove_posts_where() {
	remove_filter( 'posts_where', 'wpfc_temp_filter_where' );
}
add_action('wpfc_before_wp_query', 'hubbubart_calendar_remove_posts_where', 10);

//CALENDAR: Filter custom my post type
//wpfc_fullcalendar_args //$args['post_type'] = $post_type;
function change_post_types($args) {
	$args['post_status'] = array('publish'); //'publish'; array('publish', 'pending', 'draft', 'auto-draft', 'future', 'private', 'inherit', 'trash')
	//$args['posts_per_page'] = -1;
	//$args['tax_query'] = 'taxonomy_name';
	$args['post_type'] = array('post', 'ausstellung', 'event'); //$post_type; //enym 'attachment' 
	return $args;
}
add_filter('wpfc_fullcalendar_args', 'change_post_types', 10, 2);

4. Now let’s change what we want to use for date placement in the mini calendar:

//CALENDAR change single event date properties for display
function change_calendar_item_date($item, $post) {
	//$ini = get_post_meta(get_the_ID(), 'enym_date', true); 
	$ini = get_post_meta(get_the_ID(), 'enym_date', true); 
	$fi = get_post_meta(get_the_ID(), 'enym_date_end', true); 
	//$fi = date ("Ymd", strtotime('+1 day', strtotime($fi) ) );

	//$ini = strtotime($ini); //;
	//$ini = date("d/m/Y H:i:s", 1689671689);   date('Y-m-d\TH:i:s', $post_timestamp)
	//$fi = date("d/m/Y H:i:s", strtotime($ini) );//strtotime(get_field('enym_date', $post->ID)));

	//$item['start'] = strtotime($ini); //$ini;
	$item['start'] = date('Y-m-d\TH:i:s', strtotime($ini) ); //$ini;

	//$item['end'] = date( 'Y-m-d\TH:i:s', strtotime($fi) ) //$fi;
	//THIS WORKS GREAT BUT NOT WANTED!!!!!
	//$item['end'] = date ('Y-m-d\TH:i:s', strtotime('+1 day', strtotime($fi) ) );
	$item['end'] = date('Y-m-d\TH:i:s', strtotime($ini) ); //$ini;

	$post_type = get_post_type($post_id);

	if ($post_type === "ausstellung") {
		$item['color'] = "var(--wpex-accent)";
		$item['title'] = "Vernissage";
	}
	if ($post_type === "post") {
		$item['color'] = "var(--wpex-accent-alt)";
	}

	//$item['post_id'] = $post->ID; 
	//$item['url'] = get_permalink($post->ID); 

	return $item;
}
add_filter('wpfc_ajax_post', 'change_calendar_item_date', 10, 2);

5. Now let’s change a translation thing and some design css stuff.

//CALENDAR DESIGN
function my_register_styles() {
	$wpfc_theme_css = get_stylesheet_directory_uri() . '/calendar/enym.css';
	wp_deregister_style('jquery-ui');	
	wp_deregister_style('wp-fullcalendar'); 
	wp_enqueue_style($wpfc_theme_css , WPFC_VERSION);
}
add_action('wp_print_styles', 'my_register_styles');

//CALENDAR TRANSLATE
function change_translation($js_vars) {
	$js_vars['tippy_loading'] = 'Vorschau wird geladen…';
	$js_vars['wpfc_limit_txt'] = 'Mehr';
	return $js_vars;
}
add_filter('wpfc_js_vars', 'change_translation', 10, 2);

5. Now let’s change the ajax loaded tooltip contents

//CALENDAR FILTER THE TOOLTIP MODAL POPUP
//echo apply_filters('wpfc_qtip_content', $content);
//!empty($_REQUEST['post_id'])	
function change_tooltip_content($content) {
	$title = get_post_field( 'post_title', $_REQUEST['post_id'] );
	$excerpt = get_the_excerpt( $_REQUEST['post_id'] );
	$thumbnail = get_the_post_thumbnail_url( $_REQUEST['post_id'], 'thumbnail' );
	$content = '<div class="">';
	if (!empty($thumbnail)) $content .= '<img src="'.$thumbnail.'">';
	$content .= '<div class="tooltip-title">'.$title.'</div><div class="tooltip-excerpt">'.$excerpt.'</div></div>';
	return $content;
}
add_filter('wpfc_qtip_content', 'change_tooltip_content', 10, 2);

5. Now let’s introduce a simple shortcode for the mini calendar with reduced design which takes much less space.

//I CREATE MY OWN SHORTCODE FOR THE SMALL CALENDAR VERSION SO I CAN WRAP IT AND PUT SOME CSS TO IT
function fullcalendar_small_render($atts, $content, $tag) {
	$cal = WP_FullCalendar::calendar($args);
	return '<div class="small-cal">'.$cal.'</div>';
}
add_shortcode( 'fullcalendar_small', 'fullcalendar_small_render' );