Pie Calendar

https://docs.piecalendar.com
Admin
Pie Calendar is a tool or plugin designed to integrate, customize, and manage event calendars on...
Tokens:5,520
Snippets:64
Trust Score:7.5
Update:10 months ago
Show doc for...
Tokens:
Raw
### 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;
   ?>
      <p>My new event details.</p>
   <?php
   return ob_get_clean();
});
```

--------------------------------

### Add custom classes to Pie Calendar wrapper div (PHP)

Source: https://docs.piecalendar.com/article/18-available-hooks-filters

The 'piecal_wrapper_class' filter allows adding custom CSS classes to the main 'piecal-wrapper' div. This enables easier styling and targeting of the calendar element with custom CSS.

```php
add_filter('piecal_wrapper_class', function() {
	return "sandwich";
});
```

--------------------------------

### Change 'View <post type>' 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]
```
Tokens:
Raw