En este código, se presenta un conjunto de funciones que amplían las capacidades de WordPress para gestionar eventos, específicamente utilizando un tipo de contenido personalizado llamado ‘Evento’. Este código registra un nuevo tipo de contenido llamado ‘Evento’ y utiliza el plugin «Pie Calendar» para agregar funcionalidades avanzadas, como la capacidad de asignar colores a los eventos, una característica generalmente disponible en la versión pro del plugin.
Plugin y Custom Post Type
Comenzaremos instalando un plugin ligero llamado «pCalendar». Este plugin nos permite agregar eventos a nuestro sitio web como si fueran entradas en un calendario. Además, crearemos un nuevo tipo de entrada personalizada (Custom Post Type) llamado «Eventos» para etiquetar nuestros eventos con colores personalizados.
Código Personalizado
Para lograr que cada evento tenga un color diferente en el calendario (funcionalidad de la versión Pro del plugin), utilizaremos un código personalizado. Este código registrará el Custom Post Type de eventos, mostrará la imagen destacada en la vista individual del evento y agregará un campo de selección de color.
Uso del Plugin
Una vez que el plugin y el código personalizado están configurados, creamos nuevos eventos a través del Custom Post Type «Eventos». En la creación de eventos, podemos asignar un color específico a cada uno y configurar detalles como fecha, hora y descripción.
Casos de Uso del Plugin «Pie Calendar»:
- Calendario de Eventos:
- Crea un calendario visual de eventos con colores que indiquen categorías, importancia o cualquier otro criterio.
- Programación de Actividades:
- Organiza y visualiza fácilmente actividades programadas, asignando colores para representar diferentes tipos de actividades.
- Gestión de Proyectos:
- Utiliza el calendario para gestionar proyectos, destacando fechas clave o hitos mediante colores específicos.
- Eventos de la Comunidad:
- Facilita la gestión de eventos comunitarios, etiquetándolos con colores que representen temáticas o ubicaciones específicas.
Registrando CPT de Eventos y Campo de Color
Inicialmente, procedemos a registrar un nuevo tipo de contenido personalizado (custom post type) destinado a los eventos en el entorno de WordPress. Este paso es fundamental para estructurar y organizar la información relacionada con los eventos de manera específica. Al definir un tipo de contenido exclusivo para los eventos, podemos gestionar y presentar estos elementos de manera más efectiva en nuestro sitio.
Además, introducimos una característica esencial: la capacidad de asignar un color representativo a cada evento. Este componente no solo agrega un elemento visualmente atractivo a la presentación de eventos, sino que también cumple una función práctica al permitir la rápida identificación y categorización de eventos mediante la asociación de colores.
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.
<?php
// Función para registrar el tipo de contenido 'evento' con soporte de categorías
function registrar_tipo_evento() {
$labels = array(
'name' => _x('Eventos', 'Nombre general de los eventos'),
'singular_name' => _x('Evento', 'Nombre singular del evento'),
'menu_name' => __('Eventos'),
'add_new' => __('Agregar Nuevo'),
'add_new_item' => __('Agregar Nuevo Evento'),
'edit_item' => __('Editar Evento'),
'new_item' => __('Nuevo Evento'),
'view_item' => __('Ver Evento'),
'search_items' => __('Buscar Eventos'),
'not_found' => __('No se encontraron eventos'),
'not_found_in_trash' => __('No se encontraron eventos en la papelera'),
);
$args = array(
'labels' => $labels,
'public' => true,
'has_archive' => true,
'publicly_queryable' => true,
'query_var' => true,
'rewrite' => array('slug' => 'eventos'),
'capability_type' => 'post',
'hierarchical' => false,
'supports' => array('title', 'editor', 'thumbnail', 'excerpt', 'custom-fields'),
'taxonomies' => array('categoria_evento'), // Agrega las taxonomías aquí
'menu_position' => 5,
'menu_icon' => 'dashicons-calendar',
);
register_post_type('evento', $args);
}
// Registra el tipo de contenido 'evento'
add_action('init', 'registrar_tipo_evento');
// Modificar la salida de la imagen destacada en el contenido del evento
function modificar_salida_imagen_destacada($content) {
// Verificar si estamos en un evento individual y si hay una imagen destacada
if (is_singular('evento') && has_post_thumbnail()) {
// Obtener la imagen destacada con un enlace al archivo adjunto
$imagen_destacada = '<div class="imagen-destacada">' . get_the_post_thumbnail(get_the_ID(), 'large') . '</div>';
// Agregar la imagen destacada antes del contenido del evento
$content = $imagen_destacada . $content;
}
return $content;
}
// Aplicar el filtro al contenido
add_filter('the_content', 'modificar_salida_imagen_destacada');
function agregar_color_evento_metabox() {
add_meta_box(
'color_evento_metabox',
'Color del Evento',
'mostrar_color_evento_metabox',
'evento', // Cambia 'evento' por el nombre de tu tipo de contenido personalizado (CPT)
'normal',
'default'
);
}
function mostrar_color_evento_metabox($post) {
$selectedColor = get_post_meta($post->ID, '_piecal_event_color', true);
wp_nonce_field('color_evento_metabox_nonce', 'color_evento_metabox_nonce');
?>
<label>
Color del Evento
<input type="color" name="piecal_event_color" value="<?php echo esc_attr($selectedColor); ?>">
</label>
<?php
}
function guardar_color_evento_metabox($post_id) {
if (isset($_POST['color_evento_metabox_nonce']) && wp_verify_nonce($_POST['color_evento_metabox_nonce'], 'color_evento_metabox_nonce')) {
$selectedColor = sanitize_text_field($_POST['piecal_event_color']);
update_post_meta($post_id, '_piecal_event_color', $selectedColor);
}
}
add_action('add_meta_boxes', 'agregar_color_evento_metabox');
add_action('save_post', 'guardar_color_evento_metabox');
// Función para mostrar el color del evento en la columna
function piecal_render_color_column($column, $post_id) {
if ($column == 'event_color') {
$event_color = get_post_meta($post_id, '_piecal_event_color', true);
// Verifica si el color está configurado
if ($event_color) {
echo '<div style="width: 20px; height: 20px; background-color: ' . esc_attr($event_color) . ';"></div>';
} else {
echo __('No definido', 'piecal');
}
}
}
// Llama a la función para registrar el tipo de contenido
add_action('init', 'registrar_tipo_evento');
// Añade la columna de color a la página de administración
function piecal_agregar_color_column($columns) {
$columns['event_color'] = __('Color del Evento', 'piecal');
return $columns;
}
// Llama a la función para agregar la columna
add_filter('manage_evento_posts_columns', 'piecal_agregar_color_column');
// Llama a la función para mostrar el color en la columna
add_action('manage_evento_posts_custom_column', 'piecal_render_color_column', 10, 2);
Lenguaje del código: HTML, XML (xml)Entendiendo el Código
- Registro del Tipo de Contenido ‘Evento’:
- Se utiliza la función
register_post_typepara registrar un nuevo tipo de contenido llamado ‘Evento’. - Se definen etiquetas, como el nombre en singular y plural, para la interfaz de usuario.
- Se utiliza la función
- Modificación de la Salida de la Imagen Destacada:
- Se utiliza la función
add_filterpara aplicar la funciónmodificar_salida_imagen_destacadaal contenido del filtrothe_content. - La función verifica si estamos en una página de evento individual y si hay una imagen destacada. Si es así, agrega la imagen antes del contenido del evento.
- Se utiliza la función
- Metabox para el Color del Evento:
- Se utiliza la función
add_meta_boxpara agregar un metabox en la interfaz de edición del evento, permitiendo al usuario seleccionar un color. - Se define la función
mostrar_color_evento_metaboxpara mostrar el campo de color en el metabox. - Se define la función
guardar_color_evento_metaboxpara guardar el valor del color cuando se guarda el evento.
- Se utiliza la función
- Mostrar el Color del Evento en una Columna:
- Se define la función
piecal_render_color_columnpara mostrar el color del evento en una columna personalizada en la página de administración. - Se utiliza la función
add_filterpara añadir la columna ‘Color del Evento’ a la página de administración de eventos.
- Se define la función
- Llamadas a las Funciones:
- Se utilizan las funciones
add_actionyadd_filterpara conectar las funciones definidas a los puntos relevantes de WordPress. - Por ejemplo,
add_action('init', 'registrar_tipo_evento')asegura que la funciónregistrar_tipo_eventose ejecute durante la inicialización de WordPress.
- Se utilizan las funciones
Modificando el Plugin Pie Calendar
Después de completar el proceso de creación del Custom Post Type (CPT) y la implementación del campo de color asociado a cada evento, el siguiente paso consiste en integrar esta funcionalidad en la interfaz frontal del calendario. Para lograrlo, procederemos a modificar la plantilla shortcode.php del plugin Pie Calendar, donde agregaremos líneas de código específicas para incorporar de manera efectiva el campo de color en la representación visual de los eventos en el calendario.
La modificación de la plantilla shortcode.php es esencial para asegurar que la información sobre el color de los eventos se presente de manera cohesiva y se integre adecuadamente con la estructura existente del calendario. Al incorporar estas líneas de código, estamos mejorando la experiencia del usuario al proporcionar una representación visual clara y directa de la diversidad de eventos presentes en el calendario.
El siguiente código tienes que copiarlo y sustituirlo por el del archivo shortcode.php del plugin Pie calendar. Simplemente es una copia del archivo original con el campo de color agregado. (Ten siempre a mano una copia de seguridad por lo que pudiese pasar).
Si tienes cualquier duda, en el video vemos todo el proceso.
<?php
add_shortcode("piecal", "piecal_render_calendar");
if ( ! function_exists( 'piecal_render_calendar' ) ) {
function piecal_render_calendar( $atts ) {
$atts = apply_filters('piecal_shortcode_atts', $atts);
$args = [
'post_type' => $atts['type'] ?? 'any',
'post_status' => 'publish',
'posts_per_page' => -1,
'no_found_rows' => true,
'meta_query' => [
'relation' => 'AND',
[
'key' => '_piecal_is_event',
'value' => '1',
],
[
'key' => '_piecal_start_date',
'value' => '',
'compare' => 'NOT IN'
]
],
];
$events = new WP_Query( apply_filters('piecal_event_query_args', $args, $atts ) );
$eventsArray = [];
// Temporarily remove read more links for our post details
add_filter('excerpt_more', 'piecal_replace_read_more', 99);
while( $events->have_posts() ) {
$events->the_post();
$startDate = get_post_meta(get_the_ID(), apply_filters( 'piecal_start_date_meta_key', '_piecal_start_date' ) );
$endDate = get_post_meta(get_the_ID(), apply_filters( 'piecal_end_date_meta_key', '_piecal_end_date' ) );
$postType = get_post_type_object( get_post_type() );
$allday = get_post_meta(get_the_ID(), '_piecal_is_allday') ? get_post_meta(get_the_ID(), '_piecal_is_allday', true) : "false";
$event = [
"title" => html_entity_decode(get_the_title()),
"start" => $startDate[0],
"end" => $endDate[0] ?? null,
"details" => html_entity_decode(get_the_excerpt()),
"permalink" => get_permalink(),
"postType" => $postType->labels->singular_name ?? null,
"color" => get_post_meta(get_the_ID(), '_piecal_event_color', true),
];
if( $allday == true &&
$allday != "false") {
$event["allDay"] = $allday;
}
$event = apply_filters('piecal_event_array_filter', $event);
if( $event['postType'] != "null" ) {
array_push( $eventsArray, $event );
}
}
remove_filter('excerpt_more', 'piecal_replace_read_more', 99);
$allowedViews = ['dayGridMonth', 'listMonth', 'timeGridWeek', 'listWeek', 'dayGridWeek'];
$initialView = $atts['view'] ?? 'dayGridMonth';
if( !in_array($initialView, $allowedViews) ) {
$initialView = 'dayGridMonth';
}
wp_enqueue_style('piecalCSS');
$theme = $atts['theme'] ?? false;
if( $theme && $theme == 'dark' )
wp_enqueue_style('piecalThemeDarkCSS');
if( $theme && $theme == 'adaptive' )
wp_enqueue_style('piecalThemeDarkCSSAdaptive');
do_action('piecal_before_core_frontend_scripts');
wp_enqueue_script('alpinefocus');
wp_enqueue_script('alpinejs');
wp_enqueue_script('fullcalendar');
do_action('piecal_after_core_frontend_scripts');
$locale = $atts['locale'] ?? get_bloginfo('language');
if( $locale != 'en-US' ) {
wp_enqueue_script('fullcalendar-locales');
}
$localeDateStringFormat = [
'hour' => '2-digit',
'minute' => '2-digit'
];
$localeDateStringFormat = apply_filters( 'piecal_locale_date_string_format', $localeDateStringFormat );
$allDayLocaleDateStringFormat = [];
$allDayLocaleDateStringFormat = apply_filters( 'piecal_allday_locale_date_string_format', $allDayLocaleDateStringFormat );
$wrapperClass = 'piecal-wrapper';
if( isset( $atts['wraptitles'] ) ) {
$wrapperClass .= ' piecal-wrap-event-titles';
}
$wrapperClass .= apply_filters( 'piecal_wrapper_class', null ) ? " " . apply_filters( 'piecal_wrapper_class', null ) : null;
ob_start();
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: "<?php echo esc_attr( $initialView ); ?>",
editable: false,
events: <?php echo json_encode($eventsArray); ?>,
direction: "<?php echo is_rtl() ? 'rtl' : 'ltr'; ?>",
contentHeight: "auto",
locale: "<?php echo $locale; ?>",
eventClick: function( info ) {
Alpine.store("calendarEngine").eventTitle = info.event._def.title;
Alpine.store("calendarEngine").eventStart = info.event.start;
Alpine.store("calendarEngine").eventEnd = info.event.end;
Alpine.store("calendarEngine").eventDetails = info.event._def.extendedProps.details;
Alpine.store("calendarEngine").eventUrl = info.event._def.extendedProps.permalink;
Alpine.store("calendarEngine").eventAllDay = info.event.allDay;
Alpine.store("calendarEngine").eventType = info.event._def.extendedProps.postType;
Alpine.store('calendarEngine').showPopover = true;
Alpine.store('calendarEngine').eventActualEnd = info.event._def.extendedProps.actualEnd;
Alpine.store("calendarEngine").eventColor = info.event._def.extendedProps.color;
<?php do_action('piecal_additional_event_click_js'); ?>
if( info.jsEvent.type == "keydown" ) {
setTimeout( () => {
document.querySelector('.piecal-popover__inner > button').focus();
}, 100);
}
},
eventDataTransform: function(event) {
if(event.allDay && event.end) {
let eventStart = new Date(event.start);
let comparableEventStart = eventStart.toLocaleDateString('en-us');
let eventEnd = new Date(event.end);
let comparableEventEnd = eventEnd.toLocaleDateString('en-us');
if( comparableEventStart == comparableEventEnd ) return;
eventEnd.setDate(eventEnd.getDate());
let extendedEndDate = eventEnd.toISOString();
extendedEndDate = extendedEndDate.substring(0, extendedEndDate.length - 5);
event.actualEnd = event.end; // Save original event end to use in popover
event.end = extendedEndDate; // Change event end to show it extending through the last day
}
return event;
}
});
calendar.render();
window.calendar = calendar;
});
function piecalChangeView( view ) {
window.calendar.changeView(view);
}
document.addEventListener('alpine:init', () => {
Alpine.store('calendarEngine', {
showPopover: false,
locale: "<?php echo $locale; ?>",
localeDateStringFormat: <?php echo json_encode( $localeDateStringFormat ); ?>,
allDayLocaleDateStringFormat: <?php echo json_encode( $allDayLocaleDateStringFormat ); ?>,
calendarView: "<?php echo esc_attr( $initialView ); ?>",
eventTitle: "Loading...",
eventDetails: "Loading...",
eventType: "Loading...",
eventStart: "Loading...",
eventAllDay: false,
eventActualEnd: null,
eventEnd: "Loading...",
eventUrl: "/"
})
})
window.addEventListener('keydown', (e) => {
if( e.keyCode == 27 || e.key == 'Escape' ) Alpine.store('calendarEngine').showPopover = false;
})
</script>
<div
class="<?php echo $wrapperClass; ?>"
x-data
>
<div class="piecal-controls">
<label>
<?php
/* Translators: Label for calendar view chooser. */
_e('Choose View', 'piecal')
?>
<select x-model="$store.calendarEngine.calendarView" @change="piecalChangeView($store.calendarEngine.calendarView)">
<option value="dayGridMonth">
<?php
/* Translators: String for Month - Classic view in view picker dropdown. */
_e( 'Month - Classic', 'piecal' );
?>
</option>
<option value="listMonth">
<?php
/* Translators: String for Month - List view in view picker dropdown. */
_e( 'Month - List', 'piecal' );
?>
</option>
<option value="timeGridWeek">
<?php
/* Translators: String for Week - Time Grid view in view picker dropdown. */
_e( 'Week - Time Grid', 'piecal' );
?>
</option>
<option value="listWeek">
<?php
/* Translators: String for Week - List view in view picker dropdown. */
_e( 'Week - List', 'piecal' );
?>
</option>
<option value="dayGridWeek">
<?php
/* Translators: String for Week - Classic view in view picker dropdown. */
_e( 'Week - Classic', 'piecal' );
?>
</option>
</select>
</label>
</div>
<div id="calendar"></div>
<div
class="piecal-popover"
x-show="$store.calendarEngine.showPopover"
style="display: none;">
<div
class="piecal-popover__inner"
@click.outside="$store.calendarEngine.showPopover = false"
x-trap.noscroll="$store.calendarEngine.showPopover">
<button
class="piecal-popover__close-button"
title="<?php
/* Translators: Label for close button in Pie Calendar popover. */
_e( 'Close event details', 'piecal' )
?>"
@click="$store.calendarEngine.showPopover = false">
</button>
<p class="piecal-popover__title" x-text="$store.calendarEngine.eventTitle">Event Title</p>
<hr>
<div class="piecal-popover__meta">
<p>
<?php
/* Translators: Label for event start date in Pie Calendar popover. */
_e('Starts', 'piecal')
?>
</p>
<p
aria-labelledby="piecal-event-start-date"
x-text="!$store.calendarEngine.eventAllDay ? new Date($store.calendarEngine.eventStart).toLocaleDateString( $store.calendarEngine.locale, $store.calendarEngine.localeDateStringFormat ) : new Date($store.calendarEngine.eventStart).toLocaleDateString( $store.calendarEngine.locale, $store.calendarEngine.allDayLocaleDateStringFormat )"></p>
<p x-show="$store.calendarEngine.eventEnd">
<?php
/* Translators: Label for event end date in Pie Calendar popover. */
_e('Ends', 'piecal')
?>
</p>
<p
x-show="$store.calendarEngine.eventEnd"
x-text="!$store.calendarEngine.eventAllDay ? new Date($store.calendarEngine.eventEnd).toLocaleDateString( $store.calendarEngine.locale, $store.calendarEngine.localeDateStringFormat ) : new Date($store.calendarEngine.eventActualEnd).toLocaleDateString( $store.calendarEngine.locale, $store.calendarEngine.allDayLocaleDateStringFormat )"></p>
<?php do_action('piecal_popover_after_meta'); ?>
</div>
<hr>
<p class="piecal-popover__details" x-text="$store.calendarEngine.eventDetails"></p>
<a :href="$store.calendarEngine.eventUrl">
<?php
$filtered_popover_link = apply_filters( 'piecal_popover_link_text', null );
if( $filtered_popover_link == null ) {
/* Translators: Label for "View <Post Type>" in Pie Calendar popover. */
_e('View ', 'piecal');
?>
<span x-text="$store.calendarEngine.eventType"></span>
<?php
} else {
echo $filtered_popover_link;
}
?>
</a>
<?php
echo apply_filters('piecal_after_popover_link', null);
?>
</div>
</div>
</div>
<?php
wp_reset_postdata();
return ob_get_clean();
}
}
if ( ! function_exists( 'piecal_replace_read_more' ) ) {
function piecal_replace_read_more( $more ) {
return '...';
}
}
// Pie Calendar start & end date shortcode(s)
add_shortcode('piecal-info', 'render_piecal_info');
function render_piecal_info( $atts ) {
if( !get_post_meta( get_the_ID(), '_piecal_is_event', true ) )
return;
/* Translators: This string is used to separate the date and time in the default format output by the piecal-info shortcode. Each letter must be escaped by a backslash. */
$format = $atts['format'] ?? get_option('date_format') . __(' \a\t ', 'piecal') . get_option('time_format');
$format_date_only = $atts['format'] ?? get_option('date_format');
$start = get_post_meta( get_the_ID(), '_piecal_start_date', true ) ? date( $format, strtotime( get_post_meta( get_the_ID(), '_piecal_start_date', true ) ) ) : false;
$start_date_only = get_post_meta( get_the_ID(), '_piecal_start_date', true ) ? date( $format_date_only, strtotime( get_post_meta( get_the_ID(), '_piecal_start_date', true ) ) ) : false;
$end = get_post_meta( get_the_ID(), '_piecal_end_date', true ) ? date( $format, strtotime( get_post_meta( get_the_ID(), '_piecal_end_date', true ) ) ) : false;
$end_date_only = get_post_meta( get_the_ID(), '_piecal_end_date', true ) ? date( $format_date_only, strtotime( get_post_meta( get_the_ID(), '_piecal_end_date', true ) ) ) : false;
$allday = get_post_meta( get_the_ID(), '_piecal_is_allday', true ) ?? false;
/* Translators: The 'Starts on' prepend text for the piecal-info shortcode */
$start_prepend = apply_filters( 'piecal_info_start_prepend', __("Starts on", 'piecal') );
/* Translators: This string is used for the start date/time output by the piecal-info shortcode. %1$s is the 'Starts on' prepend. %2$s is the start date & time. */
$info_string_start = sprintf( esc_html__( '%1$s %2$s.', 'piecal' ), $start_prepend, $start );
$info_string_start_date_only = sprintf( esc_html__( '%1$s %2$s.', 'piecal' ), $start_prepend, $start_date_only );
/* Translators: The 'Ends on' prepend text for the piecal-info shortcode. */
$end_prepend = apply_filters( 'piecal_info_end_prepend', __( "Ends on", 'piecal' ) );
/* Translators: This string is used for the end date/time output by the piecal-info shortcode. Placeholder is the end date & time. */
$info_string_end = sprintf( esc_html__( ' %1$s %2$s.', 'piecal' ), $end_prepend, $end );
$info_string_end_date_only = sprintf( esc_html__( ' %1$s %2$s.', 'piecal' ), $end_prepend, $end_date_only );
/* Translators: This string is output at the end of the start/end date/time output by the piecal-info shortcode if the event is marked as all day. */
$info_string_allday = apply_filters( 'piecal_info_lasts_all_day', __( ' Lasts all day.', 'piecal' ) );
// Start date only
if( $start && !$end && !$allday ) {
return $info_string_start;
}
// Start & end date, not all day
if( $start && $end && !$allday ) {
return $info_string_start . $info_string_end;
}
// Start & end date, all day
if( $start && $end && $allday ) {
return $info_string_start_date_only . $info_string_end_date_only . $info_string_allday;
}
// Start date only, all day
if( $start && !$end && $allday ) {
return $info_string_start_date_only . $info_string_allday;
}
}Lenguaje del código: HTML, XML (xml)¿Qué se ha cambiado del código exactamente?
Se han agregado las lineas de código que están en negrita:
$event = [ "title" => html_entity_decode(get_the_title()), "start" => $startDate[0], "end" => $endDate[0] ?? null, "details" => html_entity_decode(get_the_excerpt()), "permalink" => get_permalink(), "postType" => $postType->labels->singular_name ?? null, "color" => get_post_meta(get_the_ID(), '_piecal_event_color', true),
eventClick: function( info ) {
Alpine.store("calendarEngine").eventTitle = info.event._def.title;
Alpine.store("calendarEngine").eventStart = info.event.start;
Alpine.store("calendarEngine").eventEnd = info.event.end;
Alpine.store("calendarEngine").eventDetails = info.event._def.extendedProps.details;
Alpine.store("calendarEngine").eventUrl = info.event._def.extendedProps.permalink;
Alpine.store("calendarEngine").eventAllDay = info.event.allDay;
Alpine.store("calendarEngine").eventType = info.event._def.extendedProps.postType;
Alpine.store('calendarEngine').showPopover = true;
Alpine.store('calendarEngine').eventActualEnd = info.event._def.extendedProps.actualEnd;
Alpine.store("calendarEngine").eventColor = info.event._def.extendedProps.color;
Hemos explorado cómo crear y personalizar un calendario de eventos con colores de manera sencilla y gratuita. Con estas modificaciones en el plugin Pie Calendar, ahora tienes la capacidad de asignar colores a tus eventos, proporcionando una experiencia visualmente atractiva en tu calendario. La flexibilidad y facilidad de estas personalizaciones permiten adaptar el calendario a tus necesidades específicas sin costos adicionales. ¡Disfruta de tu calendario de eventos personalizado con colores!
Si necesitas adaptar el código a las necesidades de tu proyecto o agregar una funcionalidad específica a tu página web no dudes en contactar conmigo.
Nos vemos en el siguiente tutorial.
Un saludo.
Deja tus opiniones o dudas en los comentarios.