WordPress-Ereigniskalender mit benutzerdefinierten Beitragstypen und ausführlichem Kalender

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Wir verwenden den WordPress-Veranstaltungskalender, um die an jedem Tag erstellten Beiträge anzuzeigen. Auch Besucher würden gerne etwas über die zukünftigen Beiträge erfahren. Ich habe einige Websites gesehen, die den Titel zukünftiger Tutorials enthalten, damit die Besucher über die Themen, die sie mögen, auf dem Laufenden bleiben können. Ebenso können wir WordPress auch als Event-Management-System verwenden. Veranstaltungspläne sind viel wichtiger als Blog-Beiträge. Wir müssen den Benutzern die Möglichkeit bieten, Ereignisse in einem Kalender anzuzeigen. Sogar eine Site wie das Tuts+ -Netzwerk kann so viele Ereignisse wie den Start einer neuen Tuts+ -Site, den Start eines E-Books, einen monatlichen Newsletter und vieles mehr haben.

In diesem Tutorial werde ich ein jQuery-Plugin namens Verbose Calendar in Kombination mit benutzerdefinierten Beitragstypen verwenden, um einen einfachen Ereigniskalender zu erstellen. Das ausführliche Kalender-Plugin wurde von John Patrick Given entwickelt und steht auf GitHub zum Download zur Verfügung.

Was entwickeln wir heute?

Mit dem Plugin "Ausführlicher Ereigniskalender" können Websitebesitzer Ereignisse im Administrator-Dashboard erstellen und Benutzern mithilfe eines Kalenders anzeigen.

Erstellung von einem benutzerdefinierten Beitragstyp für Ereignisse und Hinzufügen von Ereignissen.
Erstellung von einem Shortcode, um den ausführlichen jQuery-Kalender anzuzeigen.
Hinzufügung von dem ausführlichen Kalender mithilfe von AJAX Ereignisse hinzu.

Schritt 1 Erstellung von der Plugin-Datei

Zuerst müssen wir den Plugin-Ordner im Verzeichnis /wp-content/plugins erstellen. Ich werde einen Ordner namens verbose-event-calendar als Plugin-Ordner erstellen und die Datei index.php mit den erforderlichen Informationen zum Plugin erstellen. Nach der Erstellung können Sie im Plugins-Menü des Admin-Panels das Plugin über den Aktivierungslink aktivieren.

<?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
 */
?>

Schritt 2 Grundlegendes zur Ordnerstruktur

Da ich für dieses Tutorial externe jQuery-Plugins verwenden werde, ist es wichtig, ein gutes Verständnis für die Ordner- und Dateistruktur zu haben. Der folgende Bildschirm zeigt Ihnen eine grafische Ansicht der Dateistruktur dieses Plugins.

images - enthält alle für das WordPress-Plugin verwendeten Bilder.
javascripts - JavaScript-Dateien für das Plugin jQuery Verbose Calendar.
stylesheets - CSS-Dateien für das Plugin jQuery Verbose Calendar.
themes - CSS-Dateien für jQuery Date Picker.
ui - JavaScript-Dateien für jQuery Date Picker.
verboseCalAdmin.js - Benutzerdefinierter JavaScript-Code für den Admin-Bereich.
verboseCalCustom.js - Benutzerdefinierter JavaScript-Code für das Frontend.
styles.css - benutzerdefinierte Stile für das Plugin.
index.php - PHP-Code des Plugins.
README.md - README-Datei für den ausführlichen jQuery-Kalender.

Schritt 3 JavaScript- und CSS-Dateien in die Warteschlange stellen

Wir benötigen separate JavaScript- und CSS-Dateien für die Bereiche Frontend und Admin. Der folgende Code zeigt Ihnen, wie Sie sie mithilfe der Aktion wp_enqueue_scripts ordnungsgemäß einfügen.

Fügen Sie die JavaScript- und CSS-Dateien hinzu, um den ausführlichen jQuery-Kalender anzuzeigen:

<?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');
?>

Fügen Sie die JavaScript- und CSS-Dateien für die Administrationsoberfläche hinzu:

<?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');
?>

Schritt 4 Registrierung von den benutzerdefinierten Beitragstyp für Ereignisse

Die Ereignisse können viele Details wie Datum, Ort, Teilnehmer usw. enthalten. Ich werde einen benutzerdefinierten Beitragstyp namens event erstellen, der die Flexibilität und Erweiterbarkeit des Plugins berücksichtigt. Die erste Aufgabe wäre, einen benutzerdefinierten Beitragstyp bei WordPress zu registrieren. Lassen Sie uns den Code zum Registrieren von benutzerdefinierten Beitragstypen durchgehen.

<?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');
?>

Zuerst werde ich einen Funktionsaufruf für die init-Aktion ausführen, um einen benutzerdefinierten Beitragstyp zu registrieren. register_custom_event_type wird aufgerufen.
Innerhalb der Funktion müssen Beschriftungen für den benutzerdefinierten Beitragstyp definiert werden. Diese im Array $labels definierten Variablen werden als Beschriftungen für das Formular zur Ereigniserstellung und zum Speichern von Beitragstypen in der Datenbank verwendet. Weitere Informationen zu benutzerdefinierten Post-Type-Labels finden Sie unter register_post_type im WordPress-Codex
Dann müssen wir eine Liste von Argumenten definieren, die an die Funktion register_post_type übergeben werden sollen. Ich werde Standardwerte für die meisten Argumente verwenden, wie im obigen Code gezeigt.
Ich habe Änderungen am supports Argument vorgenommen. Hiermit werden die verfügbaren Formularfelder und Komponenten im Ereigniserstellungsbildschirm definiert. In diesem Plugin benötigen wir nur Ereignistitel und Beschreibung. Also habe ich die anderen Werte wie thumbnail, custom-fields, excerpt usw. entfernt.
Schließlich übergeben wir die Argumente für die Funktion register_post_type mit dem Namen unseres benutzerdefinierten Beitragstyps als event.

"Es ist wichtig, dass Sie Ihren Namen für den benutzerdefinierten Beitragstyp unter 20 Zeichen und ohne Großbuchstaben oder Leerzeichen halten."

Jetzt können Sie im linken Menü des Administrationsbereichs vor dem Menü "Darstellung" einen Menüpunkt mit dem Namen "Ereignisse" sehen. Sobald Sie darauf klicken, werden Sie zu einem Ereigniserstellungsbildschirm mit den Feldern Ereignistitel und Beschreibung weitergeleitet. Als Nächstes zeige ich Ihnen, wie Sie dem Formular ereignisspezifische Felder hinzufügen.

Schritt 5 Erstellung von den benutzerdefinierten Ereignisfelder

Ereignisse können viele Informationen enthalten, wie ich bereits erwähnt habe. Sie haben die Möglichkeit, eigene Felder entsprechend der Art der Ereignisse zu erstellen, die Sie auf der Website verwenden. Daher werde ich Felder für Start- und Enddatum erstellen, die für jeden Ereignistyp gleich sind, und Sie können Ihre eigenen Felder erstellen, indem Sie den Code ändern. Wir können unsere eigenen Felder in Meta-Feldern sowie benutzerdefinierte Standardfelder erstellen, um zusätzliche Informationen zu speichern. Da wir bereits benutzerdefinierte Felder aus dem Ereignisbildschirm entfernt haben, werde ich Felder in Meta-Feldern verwenden, um Start- und Enddaten zu erstellen.

Event Info Meta Box hinzufügen

Zuerst müssen wir eine Meta-Box als Container unserer benutzerdefinierten Felder hinzufügen, indem wir den folgenden Code verwenden.

<?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');
}
?>

Ich habe die erforderlichen Parameter für die Funktion add_meta_box im obigen Code verwendet. Sie müssen eine eindeutige ID, einen Titel der Meta-Box-Anzeige, einen Funktionsnamen zum Generieren benutzerdefinierter Felder und einen Ereignistyp als erforderliche Parameter übergeben. Weitere Details zu den optionalen Parametern finden Sie unter add_meta_box im WordPress-Codex.

Hinzufügung von den Ereignisfelder

Wir werden 2 Felder für das Startdatum und das Enddatum des Ereignisses in das zuvor erstellte Meta-Feld einfügen. HTML-Code für die Formularfelder wird in der Funktion display_event_info_box generiert.

<?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;
}
?>

Dieser HTML-Code wird sowohl in den Bildschirmen Ereignis hinzufügen als auch Ereignis bearbeiten verwendet. Daher müssen wir zunächst die aktuellen Werte der Felder mit der Funktion get_post_custom abrufen.
Dann erstellen wir den Nonce-Wert, der beim Speichern von Ereignissen überprüft werden soll.
Dann geben wir den HTML-Code für die 2 Textfelder für Start- und Enddatum aus. Wenn bereits ein Wert vorhanden ist, weisen wir ihn dem Wertattribut von Eingabefeldern zu.

"Ich habe meine Metaschlüssel für das Start- und Endereignis als _eve_sta_date und _eve_end_date benannt. Wenn Sie '_' vor Metaschlüsseln verwenden, wird es nicht als benutzerdefiniertes Feld angezeigt. Andernfalls erhalten wir doppelte Felder, eines innerhalb der Meta-Box und eines mit benutzerdefinierten Feldern. Stellen Sie immer sicher, dass Sie Ihren Metaschlüsseln '_' voranstellen, falls Sie nicht möchten, dass sie als benutzerdefiniertes Feld angezeigt werden."

Hinzufügung der Datumsauswahl zu Ereignisfeldern

Obwohl wir zwei Textfelder für Start- und Enddaten erstellt haben, werden diese zum Einfügen der tatsächlichen Daten verwendet. Daher werde ich die jQuery-Datumsauswahl Textfeldern zuweisen, damit Benutzer Daten aus einem Kalender auswählen können, ohne sie manuell eingeben zu müssen. Wir müssen der Datei verboseCalAdmin.js JavaScript-Code hinzufügen, um Eingabefeldern Datumsauswahlfunktionen zuzuweisen.

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

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

Schritt 6 Überprüfung der Ereigniserstellung

Wir müssen einige Überprüfungen durchführen, bevor wir Ereignisse in der Datenbank speichern. Daher werde ich die jQuery-Validierung für das Ereigniserstellungsformular verwenden, wie unten gezeigt. Der folgende Code ist in der Datei verboseCalAdmin.js enthalten.

<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>

Die jQuery-Funktion wird beim Senden des Formulars unter Verwendung der Formular-ID post aufgerufen.
Es gibt eine Reihe versteckter Felder im Bildschirm nach der Erstellung. Ich verwende den Wert des ausgeblendeten Felds post_type, um den Beitragstyp zu überprüfen.
Titel und Daten sind erforderlich. Diese Felder werden also mit jQuery validiert.
Anschließend fügen wir benutzerdefinierte Fehlerfelder hinzu, die unter jedem Feld angezeigt werden.
Wenn das Formular nicht ordnungsgemäß validiert wird, werden Fehler angezeigt und die Ereigniserstellung wird gestoppt, bis alle Validierungsfehler behoben sind.

Schritt 7 Speichern von Ereignissen in der Datenbank

Sobald alle Validierungsfehler korrigiert und das Formular erfolgreich gesendet wurde, rufen wir die Funktion save_event_information für die Aktion save_post auf, wie im folgenden Code gezeigt.

<?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']));
}
?>

Das ist die Standardmethode zum Speichern von benutzerdefinierten Post-Metas in der Datenbank. Zuerst prüfen wir, ob die Funktion in WordPress automatisch aufgerufen wird, und kehren vom Skript zurück.
Dann validieren wir den in dem Formular generierten Nonce-Wert und den Nonce-Wert, der über $_POST übermittelt wurde.
Dann müssen wir überprüfen, ob der Benutzer die erforderliche Berechtigung zum Erstellen von Ereignissen mit der Funktion current_user_can('edit_post') hat.
Schließlich speichern wir sowohl das Startdatum als auch das Enddatum in der Tabelle wp_postmeta in der Datenbank.

Jetzt haben wir den Prozess zum Erstellen von Ereignissen über das Admin-Panel abgeschlossen. Als nächstes müssen wir daran arbeiten, den ausführlichen jQuery-Kalender in das Front-End aufzunehmen und die Ereignisse und Beiträge den Benutzern anzuzeigen.

Schritt 8 Erstellung von einem Shortcode für einen ausführlichen Kalender

Zuerst müssen wir einen Shortcode erstellen, der den ausführlichen Kalender auf der Seite anzeigt. Sobald Sie den folgenden Code eingefügt haben, können Sie eine neue Seite im Admin-Bereich erstellen. Fügen Sie den Shortcode als [verbose_calendar/] zum Editor hinzu, um den Kalender bei der Veröffentlichung anzuzeigen.

<?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");
?>

Der obige Shortcode-Code fügt HTML-Elemente ein, die für den Kalender benötigt werden. Wir müssen den Kalender mit jQuery wie unten gezeigt laden. Der folgende Code ist in der Datei verboseCalCustom.js enthalten.

<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>

Wenn alles richtig gemacht wurde, sollten Sie einen Kalender wie das folgende Bild auf der von Ihnen erstellten Seite haben.

Schritt 9 Zuweisen von Ereignissen zum Kalender

Die nächste Aufgabe dieses Tutorials besteht darin, die Ereignisse und Beiträge aus der Datenbank abzufragen und im Kalender anzuzeigen. Der ausführliche Standardkalender bietet nur das Kalenderlayout. Wir müssen das Plugin anpassen, um dem Kalender Ereignisse zuzuweisen. Ausführlicher Kalender verwendet eine Funktion namens g.prototype.print, um den Kalender anzuzeigen. Daher werden wir diese Funktion anpassen, um Ereignisse und Beiträge wie unten gezeigt aus der Datenbank abzurufen. Der Code befindet sich in der Datei jquery.calendar.min.js im Ordner 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>

Ich werde die Codes erklären, die wir aus der Sicht des Plugins geändert haben und die wichtig sind. Plugin-spezifischer Code wird hier weggelassen.
Zuerst habe ich den gesamten Code in eine AJAX-Anfrage eingefügt. Diese Anfrage wird jedes Mal gestellt, wenn Sie das Jahr ändern oder den Kalender laden.
Eine AJAX-Anforderung wird an die Aktion get_posts_for_year gesendet. Es wird eine Liste der Beiträge und Ereignisse für das aktuelle Jahr zurückgegeben, die oben im Kalender angezeigt wird.
Dann durchlaufen wir jedes Ergebnis mit der Methode $jq.each. Wir übergeben die Details des Ergebnisses an das Array postDetailsArr.
Wir verwenden das Startdatum für Ereignisse und das Veröffentlichungsdatum für Beiträge und weisen das Array postArr zu.

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>

Das obige Code-Snippet befindet sich auch innerhalb der Druckfunktion.
Wir bereiten Datum und Monat vor, indem wir 0 als Präfix hinzufügen, falls es weniger als 10 ist.
Anschließend überprüfen wir mithilfe der inArray-Funktion, ob jedes Datum im postArr vorhanden ist.
Wenn das Datum ein Ereignis oder einen Beitrag enthält, fügen wir eine spezielle CSS-Klasse mit dem Namen event_highlight hinzu.

Generieren von Post- und Ereignislisten

Jetzt müssen wir die Datenbank abfragen und Ergebnisse für die AJAX-Anfrage generieren. Betrachten Sie den folgenden Code für den Anforderungsgenerierungsprozess.

<?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;
}
?>

Zuerst weisen wir die Aktion sowohl angemeldeten Benutzern als auch normalen Benutzern zu.
Dann erhalten wir alle veröffentlichten Beiträge für das ausgewählte Jahr und weisen sie dem Array $allEvents zu.
Wir weisen die Ereignisse für das ausgewählte Jahr nach dem gleichen Verfahren wie oben zu und geben sie im JSON-Format aus.

Schritt 10 Anzeigen der Ereignisliste

Termine mit Ereignissen oder Beiträgen werden blau hervorgehoben. Sobald Sie auf ein solches Datum klicken, sollte die Ereignisliste angezeigt werden. Der ausführliche Kalender verfügt über eine Funktion namens calendar_callback, die wir zum Anzeigen der Ereignisliste verwenden werden. Der folgende JavaScript-Code in der Datei verboseCalCustom.js wird für diese Funktionalität verwendet.

<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>

Das angeklickte Datum wird automatisch an diese Funktion übergeben. Zuerst weisen wir das Datum einer Variablen mit dem Objekt für das übergebene Datum zu.
Als nächstes erhalten wir die Ereignisse und Beiträge für das ausgewählte Datum mit postDetailsArr, das in der Druckfunktion generiert wurde.
Anschließend weisen wir Ereignis- und Post-Details zu, indem wir die type variable berücksichtigen.
Schließlich weisen wir dem Container event_row_panel den gesamten HTML-Code zu und zeigen die Ereignisliste an.

Abschluss

Sobald das Tutorial abgeschlossen ist, haben Sie ein cooles Event-Kalender-Plugin. Dies enthält nur grundlegende Ereignisfelder. Sie können weitere Informationen zu Ereignissen erstellen, indem Sie weitere benutzerdefinierte Felder hinzufügen. Fühlen Sie sich frei, die Funktionalität dieses Plugins zu erweitern und Ihre Vorschläge zu teilen.