### Display Pie Calendar using Shortcode Source: https://docs.piecalendar.com/article/4-4-minute-quick-start-guide This shortcode displays the Pie Calendar on a WordPress page or post. Ensure the plugin is installed and configured before using this shortcode. ```html [piecal] ``` -------------------------------- ### Configure Pie Calendar to Use Custom Event Start and End Dates (PHP) Source: https://docs.piecalendar.com/article/23-use-custom-fields-as-event-date-time This code snippet demonstrates how to configure Pie Calendar to use custom fields for event start and end dates. It filters the event query to include only posts with a non-blank custom start date, then tells Pie Calendar to use specified meta keys ('custom_event_start', 'custom_event_end') for the date information. Replace 'custom_event_start' and 'custom_event_end' with your actual meta field names. This code should be added to your theme's functions.php file or a code snippet plugin. ```php // First, we filter the meta_query in our query that fetches events and tell it to look for posts where // the meta field 'custom_event_start' isn't blank. // custom_event_start could be any meta key you want, but it should contain a // properly formatted date/time (e.g. the default date format for ACF date/time // fields works fine) add_filter( "piecal_event_query_args", function ($args, $atts) { $args["meta_query"] = [ "relation" => "AND", [ "key" => "custom_event_start", "value" => "", "compare" => "!=", ], ]; return $args; }, 10, 2 ); // Next, we need to tell Pie Calendar to look at our 'custom_event_start' meta key for the start date. add_filter("piecal_start_date_meta_key", function ($key) { $key = "custom_event_start"; return $key; }); // Finally, we tell Pie Calendar to look at our 'custom_event_end' meta key for the end date. add_filter("piecal_end_date_meta_key", function ($key) { $key = "custom_event_end"; return $key; }); ``` -------------------------------- ### Widget Mode Wrapper Styles - CSS Source: https://docs.piecalendar.com/article/24-css-selectors These CSS selectors are used to style the calendar specifically when it is in widget mode. '.piecal-wrapper--widget' and '.piecal-wrapper--responsive-widget' allow for distinct styling adjustments for widget-based calendar views. ```css .piecal-wrapper--widget {} .piecal-wrapper--responsive-widget {} ``` -------------------------------- ### Style Previous and Next Buttons - CSS Source: https://docs.piecalendar.com/article/24-css-selectors These are placeholder CSS rules for styling the previous and next navigation buttons in the calendar. Developers can add specific properties within these selectors to customize their appearance. ```css .piecal-wrapper .fc .fc-prev-button {} .piecal-wrapper .fc .fc-next-button {} ``` -------------------------------- ### Style Popover View Link - CSS Source: https://docs.piecalendar.com/article/24-css-selectors This CSS targets the link within the popover, specifically the 'view post' link, and applies custom padding, background color, and text color. It uses a combination of element and class selectors for specificity. ```css .piecal-popover__inner a, a.piecal-popover__view-link { padding: 1rem; background-color: blue; color: white; } ``` -------------------------------- ### Style Today Cell Background - CSS Source: https://docs.piecalendar.com/article/24-css-selectors This CSS rule targets the 'today' cell within the calendar grid to apply a custom background color. It uses the '.fc-daygrid-day.fc-day-today' selector within the '.piecal-wrapper' to ensure specificity. ```css .piecal-wrapper .fc .fc-daygrid-day.fc-day-today { background-color: rgba(173, 216, 230, 0.5); } ``` -------------------------------- ### Style Back to Month Button in Widget Mode - CSS Source: https://docs.piecalendar.com/article/24-css-selectors This CSS rule targets the 'Back to Month' button within the calendar controls, but only when the calendar is not in listDay view. This allows for specific styling of this button when operating in a widget context. ```css .piecal-wrapper:not([data-view='listDay']) .piecal-controls__back-to-month {} ``` -------------------------------- ### Style Disabled and Regular Buttons - CSS Source: https://docs.piecalendar.com/article/24-css-selectors This snippet provides styles for both disabled and regular buttons within the calendar. It sets background color, border color, and text color for enhanced visual control, ensuring consistency across button states. ```css .piecal-wrapper .fc .fc-button:disabled { background-color: #141414; border-color: #141414; color: white; } .piecal-wrapper .fc .fc-button { background-color: #000000; border-color: #000000; color: white; } ``` -------------------------------- ### Style Popover Close Button - CSS Source: https://docs.piecalendar.com/article/24-css-selectors These CSS rules provide styling for the close button within the calendar's popover. The first targets the button itself, while the subsequent rules target the '::before' and '::after' pseudo-elements to change the appearance of the 'X' icon. ```css .piecal-wrapper .piecal-popover__close-button {} .piecal-wrapper .piecal-popover__close-button::before {background: black;} .piecal-wrapper .piecal-popover__close-button::after {background: black;} ``` -------------------------------- ### Hide Calendar Controls - CSS Source: https://docs.piecalendar.com/article/24-css-selectors This CSS rule effectively hides the entire 'Choose View' text and dropdown control section of the calendar by setting its display property to 'none'. This is useful for simplifying the calendar's interface. ```css .piecal-wrapper .piecal-controls {display: none;} ``` -------------------------------- ### Hide Timezone Message - CSS Source: https://docs.piecalendar.com/article/24-css-selectors This CSS selector targets the footer element of the Pie Calendar, specifically designed to hide the detected timezone information when using the Pro version. It achieves this by setting the display property to 'none'. ```css .piecal-wrapper .piecal-footer {display: none;} ``` -------------------------------- ### Hide Timezone Info in [piecal-info] Shortcode - CSS Source: https://docs.piecalendar.com/article/24-css-selectors This CSS selector targets the last paragraph element within the '.piecal-info' shortcode output and hides it using 'display: none;'. This is useful for removing the timezone information displayed by this shortcode. ```css .piecal-info p:last-of-type { display: none; } ``` -------------------------------- ### Filter Events by Taxonomy Source: https://docs.piecalendar.com/article/22-shortcode-options-pro-only Use the 'taxonomy' attribute to add a tax_query to the event query by designating a taxonomy slug. This allows filtering events based on specific categories or tags. The 'terms' attribute can be used in conjunction with 'taxonomy' to specify which terms to filter by, and 'operator' defines the query logic. ```shortcode [piecal taxonomy="category"] [piecal taxonomy="category" terms="one, two"] [piecal taxonomy="category" terms="one, two" operator="IN"] [piecal taxonomy="category" terms="" operator="EXISTS"] [piecal taxonomy="category" terms="Concerts"] [piecal taxonomy="category" terms="Outdoors" operator="NOT IN"] ``` -------------------------------- ### Filter Events by Post Type Source: https://docs.piecalendar.com/article/22-shortcode-options-pro-only The 'type' attribute allows specifying a comma-separated list of post types to filter events. This enables the calendar to display posts from custom post types alongside default WordPress posts. Requires Pro version 1.2.1 or later. ```shortcode [piecal type="events, post"] ``` -------------------------------- ### Modify event query arguments for front-end display (PHP) Source: https://docs.piecalendar.com/article/18-available-hooks-filters The 'piecal_event_query_args' filter allows modification of the arguments used to query events displayed on the front-end. It accepts the query arguments array and shortcode attributes, enabling conditional changes to post types or other query parameters. ```php add_filter('piecal_event_query_args', 'my_callback', 10, 2); function my_callback( $args, $atts ) { if( isset($atts['sandwich']) && $atts['sandwich'] == 'salami' ) { $args['post_type'] = 'game_tournaments'; } return $args; } ``` -------------------------------- ### Filter Allowed Post Types for Pie Calendar (Free Version) Source: https://docs.piecalendar.com/article/25-show-pie-calendar-meta-box-only-on-specific-post-types This PHP code snippet allows you to specify which post types will display Pie Calendar's controls in the free version. It filters the 'piecal_explicit_allowed_post_types' hook, accepting an array of post type slugs. The output will only show controls for the post types included in the provided array. ```php add_filter('piecal_explicit_allowed_post_types', function( $array ) { $array = [...$array, 'page','events']; return $array; }); ``` -------------------------------- ### Add or alter content within Pie Calendar popover (PHP) Source: https://docs.piecalendar.com/article/18-available-hooks-filters Several hooks like 'piecal_popover_before_title' and 'piecal_popover_after_details' allow injecting custom content into the event popover. The 'piecal_popover_details' filter provides a way to completely alter or replace the event details section, enabling integration with custom fields like ACF. ```php add_filter('piecal_popover_details', function( $content ) { ob_start(); global $post; ?>

My new event details.

' text in calendar popover (PHP) Source: https://docs.piecalendar.com/article/18-available-hooks-filters Use the 'piecal_popover_link_text' filter to globally change the text displayed for viewing event details in the calendar popover. This filter takes a string and returns the modified text. ```php add_filter('piecal_popover_link_text', 'my_callback'); function my_callback( $text ) { $text = "Buy Tickets"; return $text; } ``` -------------------------------- ### Customize date format in calendar popover (PHP) Source: https://docs.piecalendar.com/article/18-available-hooks-filters The 'piecal_locale_date_string_format' filter customizes the date format for non-all-day events in the popover. It manipulates an options array compatible with toLocaleDateString. Similarly, 'piecal_allday_locale_date_string_format' handles date formatting specifically for all-day events, often omitting time details. ```php add_filter('piecal_locale_date_string_format', 'my_callback'); function my_callback( $format ) { $format['weekday'] = 'short'; // Other possible values: long, short, narrow $format['day'] = 'numeric'; // Other possible values: numeric, 2-digit $format['year'] = 'numeric'; // Other possible values: numeric, 2-digit $format['month'] = 'long'; // Other possible values: numeric, 2-digit, long, short, narrow $format['hour'] = 'numeric'; // Other possible values: numeric, 2-digit $format['minute'] = 'numeric'; // Other possible values: numeric, 2-digit $format['second'] = 'numeric'; // Other possible values: numeric, 2-digit return $format; } add_filter('piecal_allday_locale_date_string_format', 'my_allday_callback'); function my_allday_callback( $format ) { $format['weekday'] = 'short'; // Other possible values: long, short, narrow $format['day'] = 'numeric'; // Other possible values: numeric, 2-digit $format['year'] = 'numeric'; // Other possible values: numeric, 2-digit $format['month'] = 'long'; // Other possible values: numeric, 2-digit, long, short, narrow return $format; } ``` -------------------------------- ### Filter Pie Calendar shortcode attributes (PHP) Source: https://docs.piecalendar.com/article/18-available-hooks-filters Use the 'piecal_shortcode_atts' filter to modify the attributes passed to the Pie Calendar shortcode. This filter receives the attributes array and can alter values based on conditions, such as changing the event type displayed. ```php add_filter('piecal_shortcode_atts', 'my_callback', 10, 1); function my_callback( $atts ) { if( isset($atts['sandwich']) && $atts['sandwich'] == 'salami' ) { $atts['type'] = 'product'; } return $atts; } ``` -------------------------------- ### Disable Adaptive Time Zones Source: https://docs.piecalendar.com/article/22-shortcode-options-pro-only Add the 'adaptiveTimeZone=false' parameter to the shortcode to entirely disable the adaptive time zone feature on the Pie Calendar. This ensures events display according to the server's time zone settings. ```shortcode [piecal adaptiveTimeZone=false] ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.