Calendario de eventos de WordPress usando tipos de post personalizados y el calendario detallado

() translation by (you can also view the original English article)

Usamos el Calendario de Eventos de WordPress para mostrar las publicaciones creadas cada día. A los visitantes también les encantaría saber sobre los futuros posts. He visto algunos sitios que proporcionan el título de futuros tutoriales para que los visitantes se mantengan actualizados en los temas que les gustan. También podemos usar WordPress como sistema de gestión de eventos. Los horarios de los eventos son mucho más importantes que las entradas de los blogs. Necesitamos proporcionar la opción de que los usuarios vean los eventos en un calendario. Incluso un sitio como la red Tuts+ puede tener tantos eventos como el lanzamiento de un nuevo sitio Tuts+, el lanzamiento de un libro electrónico, un boletín mensual y muchos más.

Así que en este tutorial voy a usar un plugin de jQuery llamado Verbose Calendar en combinación con Custom Post Types para crear un simple calendario de eventos. El plugin Verbose Calendar ha sido desarrollado por John Patrick Given y está disponible para su descarga en GitHub.

Qué estamos desarrollando hoy

El plugin Verbose Event Calendar permitirá a los propietarios de los sitios crear eventos en el panel de administración y mostrarlos a los usuarios mediante un calendario.

Creando un tipo de post personalizado para los eventos y añadiendo eventos.
Crear un shortcode para mostrar el Verbose Calendar de jQuery.
Agregar eventos al calendario detallado usando AJAX.

Paso1 Crear el archivo del plugin

Inicialmente tenemos que crear la carpeta de plugins en el directorio /wp-content/plugins. Voy a crear una carpeta llamada verbose-event-calendar como la carpeta de plugins y crear el archivo index.php con la información necesaria sobre el plugin. Una vez creado puedes ir al menú de plugins del panel de administración y activar el plugin usando el enlace activar.

<?php
/*
  Plugin Name:  Verbose Event Calendar
  Version: 1.0
  Plugin URI: http://wp.tutsplus.com/tutorials/wordpress-event-calendar-using-custom-post-types-and-verbose-calendar
  Description: Custom post type for creating events and display visually in a calendar control.
  Author URI: http://www.innovativephp.com
  Author: Rakhitha Nimesh
  License: GPL2
 */
?>

Paso2 Comprender la estructura de la carpeta

Ya que voy a usar plugins externos de jQuery para este tutorial, es importante tener un buen entendimiento sobre la estructura de carpetas y archivos. La siguiente pantalla te mostrará una vista gráfica de la estructura de archivos de este plugin.

images - contiene todas las imágenes usadas para el plugin de WordPress.
javascripts - Archivos JavaScript para el plugin Verbose Calendar de jQuery.
stylesheets - Archivos CSS para el plugin Verbose Calendar de jQuery.
themes - Archivos CSS para jQuery Date Picker.
ui - archivos JavaScript para jQuery Date Picker.
verboseCalAdmin.js - código JavaScript personalizado relacionado con la sección de administración.
verboseCalCustom.js - código JavaScript personalizado relacionado con el front end.
styles.css - estilos personalizados para el plugin.
index.php - Código PHP del plugin.
README.md - Archivo README para jQuery Verbose Calendar.

Paso3 Poner en cola los archivos JavaScript y CSS

Necesitamos archivos separados de JavaScript y CSS para las secciones de la parte delantera y la de administración. El siguiente código te mostrará cómo incluirlos correctamente usando la acción wp_enqueue_scripts.

Incluye los archivos JavaScript y CSS para mostrar el jQuery Verbose Calendar:

<?php
function verbose_calendar_scripts() {
	global $post;

	wp_enqueue_script('jquery');

	wp_register_style('verboseCalCustomStyles', plugins_url('styles.css', __FILE__));
	wp_enqueue_style('verboseCalCustomStyles');

	wp_register_script('verboseCal', plugins_url('javascripts/jquery.calendar/jquery.calendar.min.js', __FILE__));
	wp_enqueue_script('verboseCal');

	wp_register_style('verboseCalMainStyles', plugins_url('stylesheets/main.css', __FILE__));
	wp_enqueue_style('verboseCalMainStyles');

	wp_register_style('verboseCalStyles', plugins_url('javascripts/jquery.calendar/calendar.css', __FILE__));
	wp_enqueue_style('verboseCalStyles');

	wp_register_script('verboseCalCustom', plugins_url('verboseCalCustom.js', __FILE__));
	wp_enqueue_script('verboseCalCustom');

	$config_array = array(
		'ajaxUrl' => admin_url('admin-ajax.php'),
		'nonce' => wp_create_nonce('reward-nonce')
	);

	wp_localize_script('verboseCal', 'calendarData', $config_array);
}

add_action('wp_enqueue_scripts', 'verbose_calendar_scripts');
?>

Incluya los archivos JavaScript y CSS para la interfaz de administración:

<?php
function verbose_calendar_admin_scripts() {
	global $post;

	wp_enqueue_script('jquery');

	wp_register_style('verboseCalCustomStyles', plugins_url('styles.css', __FILE__));
	wp_enqueue_style('verboseCalCustomStyles');

	wp_register_style('jqueryUIALL', plugins_url('themes/base/jquery.ui.all.css', __FILE__));
	wp_enqueue_style('jqueryUIALL');

	wp_register_script('jqueryUICore', plugins_url('ui/jquery.ui.core.js', __FILE__));
	wp_enqueue_script('jqueryUICore');

	wp_register_script('jqueryUIWidget', plugins_url('ui/jquery.ui.widget.js', __FILE__));
	wp_enqueue_script('jqueryUIWidget');

	wp_register_script('jqueryUIDate', plugins_url('ui/jquery.ui.datepicker.js', __FILE__));
	wp_enqueue_script('jqueryUIDate');

	wp_register_script('verboseCalAdmin', plugins_url('verboseCalAdmin.js', __FILE__));
	wp_enqueue_script('verboseCalAdmin');
}

add_action('admin_enqueue_scripts', 'verbose_calendar_admin_scripts');
?>

Paso4 Registrar el tipo de post personalizado para los eventos

Los eventos pueden tener muchos detalles como la fecha, el lugar, los participantes, etc. Voy a crear un tipo de Post Personalizado llamado event teniendo en cuenta la flexibilidad y la capacidad de ampliación del plugin. La primera tarea sería registrar un tipo de correo personalizado con WordPress. Repasemos el código para registrar los Tipos de Posts Personalizados.

<?php
function register_custom_event_type() {
	$labels = array(
		'name' => _x('Events', 'event'),
		'singular_name' => _x('Event', 'event'),
		'add_new' => _x('Add New', 'event'),
		'add_new_item' => _x('Add New Event', 'event'),
		'edit_item' => _x('Edit Event', 'event'),
		'new_item' => _x('New Event', 'event'),
		'view_item' => _x('View Event', 'event'),
		'search_items' => _x('Search Events', 'event'),
		'not_found' => _x('No events found', 'event'),
		'not_found_in_trash' => _x('No events found in Trash', 'event'),
		'parent_item_colon' => _x('Parent Event:', 'event'),
		'menu_name' => _x('Events', 'event'),
	);
	$args = array(
		'labels' => $labels,
		'hierarchical' => false,
		'supports' => array('title', 'editor'),
		'public' => true,
		'show_ui' => true,
		'show_in_menu' => true,
		'show_in_nav_menus' => true,
		'publicly_queryable' => true,
		'exclude_from_search' => false,
		'has_archive' => true,
		'query_var' => true,
		'can_export' => true,
		'rewrite' => true,
		'capability_type' => 'post'
	);
	register_post_type('event', $args);
}
add_action('init', 'register_custom_event_type');
?>

Primero voy a hacer una llamada a la función de la acción init para registrar un tipo de post personalizado. register_custom_event_type será llamado.
Dentro de la función tenemos que definir etiquetas para el tipo de post personalizado. Estas variables definidas en el array de $labels serán utilizadas como etiquetas para el formulario de creación de eventos y para guardar los tipos de posts en la base de datos. Puedes encontrar más información sobre las etiquetas de tipo de post personalizado en register_post_type en el Codex de WordPress
Luego tenemos que definir una lista de argumentos para ser pasados a la función de tipo register_post_type. Voy a usar valores por defecto para la mayoría de los argumentos como se muestra en el código anterior.
He hecho modificaciones al argumento supports. Se utiliza para definir los campos y componentes de formulario disponibles dentro de la pantalla de creación de eventos. En este plugin solo necesitamos el título del evento y la descripción. Así que he eliminado los otros valores como thumbnail, custom-fields, excerpt, etc.
Finalmente pasamos los argumentos de la función register_post_type con el nombre de nuestro Custom Post Type como event.

"Es importante que mantengas tu nombre Custom Post Type bajo 20 caracteres y sin mayúsculas ni espacios."

Ahora podrás ver un elemento del menú llamado Eventos en el menú izquierdo del panel de administración antes del menú de Apariencia. Una vez que hagas clic en él, serás redirigido a una pantalla de creación de eventos con los campos Title y Description del evento. A continuación te mostraré cómo añadir campos específicos de evento al formulario.

Paso5 Crear campos de eventos personalizados

Los eventos pueden tener mucha información como mencioné anteriormente. Tienes la posibilidad de crear tus propios campos según el tipo de eventos que estés usando en el sitio web. Así que voy a crear campos para la fecha de inicio y la fecha de finalización, que son comunes a cualquier tipo de evento y te permitiré crear tus propios campos modificando el código. Podemos crear nuestros propios campos dentro de los meta cuadros, así como campos personalizados por defecto para almacenar información adicional. Como ya hemos eliminado los campos personalizados de la pantalla de eventos, voy a utilizar los campos dentro de los meta cuadros para crear fechas de inicio y fin.

Añadir un meta cuadro de información de eventos

Primero tenemos que añadir un meta cuadro como contenedor de nuestros campos personalizados usando el código de abajo.

<?php
add_action('add_meta_boxes', 'add_events_fields_box');

function add_events_fields_box() {
	add_meta_box('events_fields_box_id', 'Event Info', 'display_event_info_box', 'event');
}
?>

He usado los parámetros requeridos para la función add_meta_box en el código anterior. Tienes que pasar un ID único, el título de visualización del meta cuadro, el nombre de la función para generar campos personalizados y el tipo de evento como parámetros requeridos. Puedes encontrar más detalles sobre los parámetros opcionales en add_meta_box en el Codex de WordPress.

Agregar campos de eventos

Vamos a añadir 2 campos para la fecha de inicio y fin del evento dentro del meta cuadro creado anteriormente. El código HTML para los campos del formulario se generan dentro de la función display_event_info_box.

<?php
function display_event_info_box() {
	global $post;

	$values = get_post_custom($post->ID);
	$eve_start_date = isset($values['_eve_sta_date']) ? esc_attr($values['_eve_sta_date'][0]) : '';
	$eve_end_date = isset($values['_eve_end_date']) ? esc_attr($values['_eve_end_date'][0]) : '';

	wp_nonce_field('event_frm_nonce', 'event_frm_nonce');

	$html = "<label>Event Start Date</label><input id='datepickerStart' type='text' name='datepickerStart' value='$eve_start_date' />
		<label>Event End Date</label><input id='datepickerEnd' type='text' name='datepickerEnd' value='$eve_end_date' />";
	echo $html;
}
?>

Este código HTML se usará en las pantallas de Agregar Evento y Editar Evento. Así que inicialmente tenemos que obtener los valores actuales de los campos usando la función get_post_custom.
A continuación creamos el valor nonce que se comprobará en el proceso de guardado de eventos.
Luego emitimos el código HTML de los 2 cuadros de texto para la fecha de inicio y fin. Si un valor ya existe, lo asignamos al atributo value de los campos de entrada.

"He nombrado mis meta-claves para el evento de inicio y fin como _eve_sta_date y _eve_end_date. Cuando use '_' delante de las meta claves, no se mostrará como un campo personalizado. De lo contrario, tendremos campos duplicados, uno dentro de la meta caja y otro con campos personalizados. Asegúrate siempre de ponerle el prefijo '_' a tus meta-claves en caso de que no quieras que se muestre como un campo personalizado".

Añadir el selector de fechas a los campos de eventos

Aunque creamos 2 campos de texto para las fechas de inicio y fin, se usará para insertar las fechas reales. Así que voy a asignar el jQuery Date Picker a los campos de texto para permitir a los usuarios seleccionar las fechas de un calendario sin tener que introducirlas manualmente. Necesitamos añadir un poco de código JavaScript al archivo verboseCalAdmin.js para asignar los captadores de fecha a los campos de entrada.

<script>
$jq =jQuery.noConflict();

$jq(document).ready(function() {
	$jq("#datepickerStart").datepicker();
	$jq("#datepickerEnd").datepicker();
});
</script>

Paso6 Validar la creación de eventos

Necesitamos hacer una validación antes de guardar los eventos en la base de datos. Así que voy a usar la validación de jQuery en el formulario de creación de eventos como se muestra a continuación. El código de abajo está incluido dentro del archivo verboseCalAdmin.js.

<script>
	$jq('#post').submit(function() {

		$jq('.ver_cal_err').remove();

		if($jq("#post_type").val() =='event') {
			var err = 0;
			if($jq("#title").val() == '') {
				$jq("#title").after("<div class='ver_cal_err'>Event Title cannot be empty</div>");
				err++;
			}
			if($jq("#datepickerStart").val() == '' || $jq("#datepickerEnd").val() == '') {
				$jq("#datepickerEnd").after("<div class='ver_cal_err'>Start Date and End Date is required</div>");
				err++;
			}

			var start = $jq('#datepickerStart').datepicker('getDate');
			var end = $jq('#datepickerEnd').datepicker('getDate');
			var days = (end - start)/1000/60/60/24;
			if(days<0) {
				$jq("#datepickerEnd").after("<div class='ver_cal_err'>End Date should be greater than Start Date.</div>");
				err++;
			}

			if(err>0) {
				return false;
			}
			else {
				return true;
			}
		}
	});
</script>

La función de jQuery se llamará al presentar el formulario utilizando el post de identificación del formulario.
Hay un conjunto de campos ocultos en la pantalla de creación de post. Estoy usando el valor del campo oculto post_type para comprobar el tipo de post.
El título y las fechas son obligatorios. Así que esos campos se validan usando jQuery.
Luego agregamos cajas de error personalizadas para que se muestren debajo de cada campo.
Si el formulario no se valida correctamente, se mostrarán los errores y se detendrá la creación de eventos hasta que se solucionen todos los errores de validación.

Paso7 Guardar eventos en la base de datos

Una vez que se han corregido todos los errores de validación y se ha enviado el formulario con éxito, llamamos a la función save_event_information en la acción save_post como se muestra en el siguiente código.

<?php
add_action('save_post', 'save_event_information');

function save_event_information($post_id) {
	// Bail if we're doing an auto save
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
		return;

	// if our nonce isn't there, or we can't verify it, bail
	if (!isset($_POST['event_frm_nonce']) || !wp_verify_nonce($_POST['event_frm_nonce'], 'event_frm_nonce'))
		return;

	// if our current user can't edit this post, bail
	if (!current_user_can('edit_post'))
		return;

	if (isset($_POST['datepickerStart']))
		update_post_meta($post_id, '_eve_sta_date', esc_attr($_POST['datepickerStart']));
	if (isset($_POST['datepickerEnd']))
		update_post_meta($post_id, '_eve_end_date', esc_attr($_POST['datepickerEnd']));
}
?>

Este es el método estándar de guardar la meta post personalizada en la base de datos. Primero comprobamos si la función se llama dentro de WordPress auto-guardar y volver desde el script.
A continuación validamos el valor nonce generado en el formulario y el valor nonce enviado a través de $_POST.
Entonces tenemos que comprobar si el usuario tiene los permisos necesarios para crear eventos usando la función current_user_can('edit_post').
Finalmente guardamos tanto la fecha de inicio como la de finalización en la tabla wp_postmeta de la base de datos.

Ahora hemos completado el proceso de creación de eventos a través del panel de administración. A continuación tenemos que trabajar en la inclusión del jQuery Verbose Calendar en la parte delantera y mostrar los eventos y mensajes a los usuarios.

Paso8 Crear shortcode para Verbose Calendar

Primero necesitamos crear un shortcode que muestre el Verbose Calendar en la página. Una vez que incluyas el siguiente código puedes crear una nueva página en el panel de administración y añadir el shortcode como [verbose_calendar/] al editor para mostrar el calendario en el post.

<?php
function verbose_calendar() {
	global $post;

	return "<div id='main-container'></div><div id='popup_events'>
		<div class='pop_cls'></div>
		<div id='popup_events_list'>
			<div id='popup_events_head'></div>
			<div id='popup_events_bar'></div>
			<div id='event_row_panel' class='event_row_panel'></div>
			<div id='popup_events_bottom'></div>
		</div>
	</div>";
}

add_shortcode("verbose_calendar", "verbose_calendar");
?>

El código abreviado anterior inserta los elementos HTML necesarios para el calendario. Tenemos que cargar el calendario usando jQuery como se muestra a continuación. El siguiente código está incluido dentro del archivo verboseCalCustom.js.

<script>
$jq =jQuery.noConflict();

$jq(document).ready(function() {

	$jq("#main-container").calendar({
		tipsy_gravity: 's', // How do you want to anchor the tipsy notification? (n / s / e / w)
		post_dates : ["1","2"],
		click_callback: calendar_callback, // Callback to return the clicked date
		year: "2012", // Optional, defaults to current year - pass in a year - Integer or String
		scroll_to_date: false // Scroll to the current date?
	});

	$jq(".pop_cls").on("click",function() {
		$jq("#popup_events").fadeOut("slow");
	});
});
</script>

Si todo se hace correctamente, deberías tener un calendario como la siguiente imagen en la página que has creado.

Paso9 Asignación de eventos al calendario

La siguiente tarea de este tutorial es consultar los eventos y mensajes de la base de datos y mostrarlos en el calendario. Verbose Calendar por defecto solo proporciona el diseño del calendario. Tenemos que personalizar el plugin para asignar eventos al calendario. Verbose Calendar utiliza una función llamada g.prototype.print para mostrar el calendario. Así que vamos a personalizar esta función para recuperar eventos y mensajes de la base de datos como se muestra a continuación. El código se encuentra en el archivo jquery.calendar.min.js dentro de la carpeta de javascripts.

<script>
g.prototype.print=function(c) {

	postDetailsArr = [];

	var verboseElement = this.element;
	$jq.post(calendarData.ajaxUrl, {
		action:"get_posts_for_year",
		nonce:calendarData.nonce,
		currentYear:e.options.year
	}, function(result, textStatus) {

		$jq.each(result, function(index, data) {

			if(data.type == 'event') {
				if(postDetailsArr[data.startDate]) {
					postDetailsArr[data.startDate].push(data);
				}
				else {
					postDetailsArr[data.startDate] = [];
					postDetailsArr[data.startDate].push(data);
				}
				postArr.push(data.startDate);
			}
			else {
				if(postDetailsArr[data.post_date]) {
					postDetailsArr[data.post_date].push(data);
				}
				else {
					postDetailsArr[data.post_date] = [];
					postDetailsArr[data.post_date].push(data);
				}
				postArr.push(data.post_date);
			}

		});

	}, "json");

};
</script>

Explicaré los códigos que hemos cambiado y que son importantes desde la perspectiva del plugin. El código específico del plugin se omite aquí.
Primero he colocado el código completo dentro de una petición AJAX. Esta petición se hará cada vez que cambie el año o cargue el calendario.
La solicitud de AJAX se hará a la acción get_posts_for_year. Devolverá la lista de posts y eventos del año en curso que se muestra en la parte superior del calendario.
Luego hacemos un bucle con cada resultado usando el método $jq.each. Pasamos los detalles del resultado al array postDetailsArr.
Usamos la fecha de inicio para los eventos y la fecha de publicación para las entradas y asignaciones al array postArr.

1	<script>
2	var mon = ((parseInt(b)+1) < 9) ? "0"+(parseInt(b)+1) : (parseInt(b)+1);
3	daynum = (j<9)?"0"+j:j;
4
5	var searchedIndex = ($jq.inArray((mon+"-"+daynum+"-"+d), postArr));
6	if(searchedIndex != -1) {
7	g.append("<div data-date='"+(parseInt(b)+1)+"/"+j+"/"+d+"' class='label dat-"+(parseInt(b)+1)+"-"+j+"-"+d+" day "+h+" event_highlight'>"+j+"</div>");
8	}
9	else {
10	g.append("<div data-date='"+(parseInt(b)+1)+"/"+j+"/"+d+"' class='label dat-"+(parseInt(b)+1)+"-"+j+"-"+d+" day "+h+"'>"+j+"</div>");
11	}
12	</script>

El fragmento de código anterior también se encuentra dentro de la función print.
Preparamos la fecha y el mes añadiendo 0 como prefijo en caso de que sea menor de 10.
Entonces comprobamos que cada fecha existe dentro del postArr usando la función inArray.
Si date contiene un evento o post, añadimos una clase especial de CSS llamada event_highlight.

Generar listas de post y de eventos

Ahora tenemos que consultar la base de datos y generar resultados para la solicitud de AJAX. Considera el siguiente código para el proceso de generación de la solicitud.

<?php
add_action('wp_ajax_nopriv_get_posts_for_year', 'get_posts_for_year');
add_action('wp_ajax_get_posts_for_year', 'get_posts_for_year');

function get_posts_for_year() {
	global $post, $wpdb;

	$allEvents = array();

	$sql = "SELECT $wpdb->posts.guid,$wpdb->posts.post_title,DATE_FORMAT(post_date, '%m-%d-%Y') as post_date  FROM $wpdb->posts WHERE Year($wpdb->posts.post_date)='" . $_POST['currentYear'] . "' and post_status='publish' and post_type='post' ";

	$allPosts = array();
	$yearlyPosts = $wpdb->get_results($sql, ARRAY_A);
	foreach ($yearlyPosts as $key => $singlePost) {
		$singlePost['type'] = 'post';

		array_push($allEvents, $singlePost);
	}

	$sql = "SELECT $wpdb->posts.ID,$wpdb->posts.guid,$wpdb->posts.post_title,DATE_FORMAT(post_date, '%m-%d-%Y') as post_date  FROM $wpdb->posts inner join $wpdb->postmeta on $wpdb->posts.ID=$wpdb->postmeta.post_id WHERE $wpdb->postmeta.meta_key='_eve_sta_date' and Year(STR_TO_DATE($wpdb->postmeta.meta_value, '%m/%d/%Y'))='" . $_POST['currentYear'] . "' and post_status='publish' and post_type='event'";

	$yearlyEvents = $wpdb->get_results($sql, ARRAY_A);
	foreach ($yearlyEvents as $key => $singleEvent) {

		$startDate = str_replace("/", "-", get_post_meta($singleEvent['ID'], '_eve_sta_date'));
		$endDate = str_replace("/", "-", get_post_meta($singleEvent['ID'], '_eve_end_date'));

		$singleEvent['startDate'] = $startDate[0];
		$singleEvent['endDate'] = $endDate[0];
		$singleEvent['type'] = 'event';

		array_push($allEvents, $singleEvent);
	}
	echo json_encode($allEvents);
	exit;
}
?>

Primero asignamos la acción tanto a los usuarios registrados como a los usuarios normales.
Luego obtenemos todas las publicaciones del año seleccionado y las asignamos al array $allEvents.
Asignamos los eventos para el año seleccionado usando el mismo procedimiento anterior y la salida en formato JSON.

Paso10 Visualización de la lista de eventos

Las fechas con eventos o mensajes serán resaltados en un color azul. Una vez que hagas clic en una fecha así, se mostrará la lista de eventos. Verbose Calendar tiene una función llamada calendar_callback que vamos a utilizar para mostrar la lista de eventos. El siguiente código JavaScript dentro del archivo verboseCalCustom.js será usado para esta funcionalidad.

<script>
var calendar_callback = function(date) {

	$jq("#event_row_panel").html("");

	date.month = (date.month < 10) ? "0"+date.month : date.month;
	date.day = (date.day < 10) ? "0"+date.day : date.day;
	var activeDate = date.month+"-"+date.day+"-"+date.year;

	$jq("#popup_events_head").html("Events for "+activeDate);

	var dailyEvents = postDetailsArr[activeDate];

	var eventHTML = "";

	$jq.each(dailyEvents, function(index, data) {

		if(data.type=='event') {
			eventHTML += "<div class='event_row'><div class='event_title'><a href='"+data.guid+"' >"+data.post_title+"</a></div><div class='event_dates'>Start Date : <span>"+data.startDate+"</span>  End Date : <span>"+data.endDate+"</div></div>";
		}
		else {
			eventHTML += "<div class='post_row'><div class='post_title'><a href='"+data.guid+"' >"+data.post_title+"</a></div><div class='post_dates'>Published Date : <span>"+data.post_date+"</span></div></div>";
		}

	});

	$jq("#event_row_panel").html(eventHTML);
	$jq("#popup_events").fadeIn("slow");
}
</script>

La fecha en la que se haga clic pasará automáticamente a esta función. Primero asignamos la fecha a una variable usando el objeto de la fecha pasada.
A continuación obtenemos los eventos y mensajes para la fecha seleccionada usando postDetailsArr generado en la función de impresión.
Luego asignamos el evento y publicamos los detalles considerando la variable type.
Finalmente asignamos todo el HTML al contenedor event_row_panel y mostramos la lista de eventos.

Conclusión

Una vez completado el tutorial, tendrás un genial plugin de calendario de eventos. Este contiene solo campos básicos de eventos. Puedes crear más información sobre los eventos añadiendo más campos personalizados. No dudes en ampliar la funcionalidad de este plugin y compartir tus sugerencias.