{"id":4541,"date":"2024-08-05T21:41:04","date_gmt":"2024-08-05T19:41:04","guid":{"rendered":"https:\/\/www.knowboard.de\/?p=4541"},"modified":"2024-08-05T23:51:18","modified_gmt":"2024-08-05T21:51:18","slug":"use-a-good-but-simple-jquery-calendar-for-any-custom-post-type","status":"publish","type":"post","link":"https:\/\/www.knowboard.de\/use-a-good-but-simple-jquery-calendar-for-any-custom-post-type\/","title":{"rendered":"Use a good but simple JQuery Calendar for any Custom Post Type"},"content":{"rendered":"\n<ol class=\"wp-block-list\">\n<li>Install the &#8222;WP FullCalendar&#8220; plugin.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-wp-embed is-provider-plugin-directory wp-block-embed-plugin-directory\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"OQiUajrNSQ\"><a href=\"https:\/\/wordpress.org\/plugins\/wp-fullcalendar\/\">WP FullCalendar<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;WP FullCalendar&#8221; &#8212; Plugin Directory\" src=\"https:\/\/wordpress.org\/plugins\/wp-fullcalendar\/embed\/#?secret=d1OZfvogDE#?secret=OQiUajrNSQ\" data-secret=\"OQiUajrNSQ\" width=\"600\" height=\"338\"  marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Go to the settings Page &#8222;Settings &#8211; WP FullCalendar&#8220; and set up the following:\n<ul class=\"wp-block-list\">\n<li>You do not need to select any post types as we control this with the shortcode and hooks.<\/li>\n\n\n\n<li>Just define how the calendar looks.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1374\" src=\"https:\/\/www.knowboard.de\/wp-content\/uploads\/2024\/08\/CleanShot-2024-08-05-at-21.12.10@2x.png\" alt=\"\" class=\"wp-image-4544\" srcset=\"https:\/\/www.knowboard.de\/wp-content\/uploads\/2024\/08\/CleanShot-2024-08-05-at-21.12.10@2x.png 1920w, https:\/\/www.knowboard.de\/wp-content\/uploads\/2024\/08\/CleanShot-2024-08-05-at-21.12.10@2x-768x550.png 768w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>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. <\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n\t * Register custom fields.\n\t *\n\t * @link https:\/\/total.wpexplorer.com\/docs\/snippets\/add-custom-metaboxes-to-total\/\n\t *\/\nfunction my_register_event_metaboxes() {\n\tif ( ! class_exists( 'WPEX_Meta_Factory' ) ) {\n\t\treturn;\n\t}\n\n\t$icons_list = &#91;];\n\tif ( \\function_exists( '\\wpex_ticons_list' ) ) {\n\t\t$ticons = \\wpex_ticons_list();\n\t\tif ( $ticons &amp;&amp; \\is_array( $ticons ) ) {\n\t\t\tforeach ( $ticons as $ticon ) {\n\t\t\t\tif ( \\str_contains( $ticon, 'custom\/' ) ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\tif ( 'none' === $ticon || '' === $ticon ) {\n\t\t\t\t\t$icons_list&#91;] = \\esc_html__( 'None', 'total' );\n\t\t\t\t} else {\n\t\t\t\t\t$icons_list&#91;'ticon ticon-' . \\trim( $ticon )] = \\ucwords( \\str_replace( '-', ' ', $ticon ) );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tnew WPEX_Meta_Factory(  array(\n\t\t'id'       => 'event_data',\n\t\t'title'    => esc_html__( 'Details des Events', 'text_domain' ),\n\t\t'screen'   => array( 'post', 'ausstellung', 'event' ), \/\/post types to add the metabox to\n\t\t'context'  => 'normal',\n\t\t'priority' => 'default',\n\t\t'fields'   => array(\n\n\n\t\t\tarray(\n\t\t\t\t'name' => esc_html__( 'Beginn der Veranstaltung', 'enym' ),\n\t\t\t\t'id'   => 'enym_date',\n\t\t\t\t'desc' => esc_html__( 'Dies ist der Beginn der Veranstaltung', 'enym' ), \/\/Das Datum, das oben rechts eingestellt werden kann ist lediglich das Erscheinungsdatum des Beitrags\n\t\t\t\t'type' => 'date',\n\t\t\t),\n\t\t\tarray(\n\t\t\t\t'name' => esc_html__( 'Ende der Veranstaltung', 'enym' ),\n\t\t\t\t'id'   => 'enym_date_end',\n\t\t\t\t'desc' => esc_html__( 'Dies ist das Ende der Veranstaltung', 'enym' ),\n\t\t\t\t'type' => 'date',\n\t\t\t),\n\t\t\tarray(\n\t\t\t\t'name' => esc_html__( 'Startzeit - Veranstaltungsende', 'text_domain' ),\n\t\t\t\t'id'   => 'enym_beginn_time',\n\t\t\t\t'desc' => esc_html__( 'Dies ist die Uhrzeit der Veranstaltung. Angabe des Endes ist optional.', 'text_domain' ),\n\t\t\t\t'type' => 'text',\n\t\t\t),\n\t\t\tarray(\n\t\t\t\t'name' => esc_html__( 'Anmeldeseite', 'text_domain' ),\n\t\t\t\t'desc' => esc_html__( 'Erg\u00e4nzt den Hinweis: \"F\u00fcr dieses Event wird eine Anmeldung empfohlen\"', 'enym' ),\n\t\t\t\t'id'   => 'enym_application',\n\t\t\t\t'type' => 'url',\n\t\t\t),\n\t\t\tarray(\n\t\t\t\t'name' => esc_html__( 'Anhang', 'text_domain' ),\n\t\t\t\t'id'   => 'enym_invitation_front',\n\t\t\t\t'type' => 'upload',\n\t\t\t\t'desc' => esc_html__( 'Einladungsflyer als JPG', 'enym' ),\n\t\t\t\t'return' => 'id', \/\/ return ID or URL\n\t\t\t),\n\/*\n\t\t\tarray(\n\t\t\t\t'name' => esc_html__( 'Laudatio\/ Er\u00f6ffnungsrede', 'text_domain' ),\n\t\t\t\t'type' => 'wp_editor',\n\t\t\t\t'id'   => 'opening-speech',\n\t\t\t\t'media_buttons' => 'true',\n\t\t\t\t'quicktags' => 'true',\n\t\t\t\t'rows' => '10'\n\t\t\t\t\/\/'textarea_rows' => '25',\n\t\t\t\t\/\/'textarea_name' => 'enym-laudation-feld',\n\t\t\t\t\/\/'media_buttons' => 'true'\n\t\t\t),\n\t\t\t\n\t\t\tarray(\n\t\t\t\t'name' => esc_html__( 'Icon Select', 'text_domain' ),\n\t\t\t\t'id' => 'YOUR_UNIQUE_CUSTOM_FIELD_NAME',\n\t\t\t\t'type' => 'icon_select',\n\t\t\t\t'choices' => $icons_list\n\t\t\t),\n*\/\n\n\n\t\t)\n\t) );\n}\nadd_action( 'admin_init', 'my_register_event_metaboxes' );\n<\/code><\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Now let&#8217;s use a hook and remove the regular &#8222;where&#8220; 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.<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/CALENDAR: Remove the custom where clause before the calendar query is executed\nfunction hubbubart_calendar_remove_posts_where() {\n\tremove_filter( 'posts_where', 'wpfc_temp_filter_where' );\n}\nadd_action('wpfc_before_wp_query', 'hubbubart_calendar_remove_posts_where', 10);\n\n\/\/CALENDAR: Filter custom my post type\n\/\/wpfc_fullcalendar_args \/\/$args&#91;'post_type'] = $post_type;\nfunction change_post_types($args) {\n\t$args&#91;'post_status'] = array('publish'); \/\/'publish'; array('publish', 'pending', 'draft', 'auto-draft', 'future', 'private', 'inherit', 'trash')\n\t\/\/$args&#91;'posts_per_page'] = -1;\n\t\/\/$args&#91;'tax_query'] = 'taxonomy_name';\n\t$args&#91;'post_type'] = array('post', 'ausstellung', 'event'); \/\/$post_type; \/\/enym 'attachment' \n\treturn $args;\n}\nadd_filter('wpfc_fullcalendar_args', 'change_post_types', 10, 2);<\/code><\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Now let&#8217;s change what we want to use for date placement in the mini calendar:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/CALENDAR change single event date properties for display\nfunction change_calendar_item_date($item, $post) {\n\t\/\/$ini = get_post_meta(get_the_ID(), 'enym_date', true); \n\t$ini = get_post_meta(get_the_ID(), 'enym_date', true); \n\t$fi = get_post_meta(get_the_ID(), 'enym_date_end', true); \n\t\/\/$fi = date (\"Ymd\", strtotime('+1 day', strtotime($fi) ) );\n\n\t\/\/$ini = strtotime($ini); \/\/;\n\t\/\/$ini = date(\"d\/m\/Y H:i:s\", 1689671689);   date('Y-m-d\\TH:i:s', $post_timestamp)\n\t\/\/$fi = date(\"d\/m\/Y H:i:s\", strtotime($ini) );\/\/strtotime(get_field('enym_date', $post->ID)));\n\n\t\/\/$item&#91;'start'] = strtotime($ini); \/\/$ini;\n\t$item&#91;'start'] = date('Y-m-d\\TH:i:s', strtotime($ini) ); \/\/$ini;\n\n\t\/\/$item&#91;'end'] = date( 'Y-m-d\\TH:i:s', strtotime($fi) ) \/\/$fi;\n\t\/\/THIS WORKS GREAT BUT NOT WANTED!!!!!\n\t\/\/$item&#91;'end'] = date ('Y-m-d\\TH:i:s', strtotime('+1 day', strtotime($fi) ) );\n\t$item&#91;'end'] = date('Y-m-d\\TH:i:s', strtotime($ini) ); \/\/$ini;\n\n\t$post_type = get_post_type($post_id);\n\n\tif ($post_type === \"ausstellung\") {\n\t\t$item&#91;'color'] = \"var(--wpex-accent)\";\n\t\t$item&#91;'title'] = \"Vernissage\";\n\t}\n\tif ($post_type === \"post\") {\n\t\t$item&#91;'color'] = \"var(--wpex-accent-alt)\";\n\t}\n\n\t\/\/$item&#91;'post_id'] = $post->ID; \n\t\/\/$item&#91;'url'] = get_permalink($post->ID); \n\n\treturn $item;\n}\nadd_filter('wpfc_ajax_post', 'change_calendar_item_date', 10, 2);<\/code><\/pre>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li>Now let&#8217;s change a translation thing and some design css stuff.<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/CALENDAR DESIGN\nfunction my_register_styles() {\n\t$wpfc_theme_css = get_stylesheet_directory_uri() . '\/calendar\/enym.css';\n\twp_deregister_style('jquery-ui');\t\n\twp_deregister_style('wp-fullcalendar'); \n\twp_enqueue_style($wpfc_theme_css , WPFC_VERSION);\n}\nadd_action('wp_print_styles', 'my_register_styles');\n\n\/\/CALENDAR TRANSLATE\nfunction change_translation($js_vars) {\n\t$js_vars&#91;'tippy_loading'] = 'Vorschau wird geladen&amp;hellip;';\n\t$js_vars&#91;'wpfc_limit_txt'] = 'Mehr';\n\treturn $js_vars;\n}\nadd_filter('wpfc_js_vars', 'change_translation', 10, 2);<\/code><\/pre>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li>Now let&#8217;s change the ajax loaded tooltip contents<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/CALENDAR FILTER THE TOOLTIP MODAL POPUP\n\/\/echo apply_filters('wpfc_qtip_content', $content);\n\/\/!empty($_REQUEST&#91;'post_id'])\t\nfunction change_tooltip_content($content) {\n\t$title = get_post_field( 'post_title', $_REQUEST&#91;'post_id'] );\n\t$excerpt = get_the_excerpt( $_REQUEST&#91;'post_id'] );\n\t$thumbnail = get_the_post_thumbnail_url( $_REQUEST&#91;'post_id'], 'thumbnail' );\n\t$content = '&lt;div class=\"\">';\n\tif (!empty($thumbnail)) $content .= '&lt;img src=\"'.$thumbnail.'\">';\n\t$content .= '&lt;div class=\"tooltip-title\">'.$title.'&lt;\/div>&lt;div class=\"tooltip-excerpt\">'.$excerpt.'&lt;\/div>&lt;\/div>';\n\treturn $content;\n}\nadd_filter('wpfc_qtip_content', 'change_tooltip_content', 10, 2);<\/code><\/pre>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li>Now let&#8217;s introduce a simple shortcode for the mini calendar with reduced design which takes much less space.<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/I CREATE MY OWN SHORTCODE FOR THE SMALL CALENDAR VERSION SO I CAN WRAP IT AND PUT SOME CSS TO IT\nfunction fullcalendar_small_render($atts, $content, $tag) {\n\t$cal = WP_FullCalendar::calendar($args);\n\treturn '&lt;div class=\"small-cal\">'.$cal.'&lt;\/div>';\n}\nadd_shortcode( 'fullcalendar_small', 'fullcalendar_small_render' );<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Install the \"WP FullCalendar\" plugin. https:\/\/wordpress.org\/plugins\/wp-fullcalendar\/ 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. When you use the Total them then you can add some&hellip;","protected":false},"author":1,"featured_media":4545,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-4541","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein","entry","has-media"],"_links":{"self":[{"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/posts\/4541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/comments?post=4541"}],"version-history":[{"count":1,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/posts\/4541\/revisions"}],"predecessor-version":[{"id":4547,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/posts\/4541\/revisions\/4547"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/media\/4545"}],"wp:attachment":[{"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/media?parent=4541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/categories?post=4541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/tags?post=4541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}