Статьи

Календарь событий WordPress с использованием пользовательских типов записей и подробного календаря

Март 16, 2019

Мы используем WordPress Event Calendar, чтобы показать сообщения, созданные на каждый день. Также посетители хотели бы знать о будущих сообщениях. Я видел несколько сайтов, которые предоставляют заголовок будущих уроков, чтобы посетители могли оставаться в курсе интересующих их тем. Также мы можем использовать WordPress в качестве системы управления событиями. Графики событий гораздо важнее, чем сообщения в блоге. Нам нужно предоставить возможность пользователям просматривать события в календаре. Даже на сайте, подобном сети Tuts +, может быть так много событий, как запуск нового сайта Tuts +, запуск электронной книги, ежемесячная рассылка новостей и многое другое.

Поэтому в этом уроке я собираюсь использовать плагин jQuery Verbose Calendar в сочетании с пользовательскими типами постов для создания простого календаря событий. Плагин Verbose Calendar разработан Джоном Патриком Джоном и доступен для скачивания на GitHub .

Что мы развиваем сегодня

Плагин Verbose Event Calendar позволит владельцам сайтов создавать события на панели администратора и отображать их пользователям с помощью календаря.

  • Создание пользовательского типа сообщения для событий и добавление событий.
  • Создайте шорткод для отображения подробного календаря jQuery.
  • Добавьте события в подробный календарь, используя AJAX.

Шаг 1 Создание файла плагина

Сначала мы должны создать папку плагинов в каталоге / wp-content / plugins . Я собираюсь создать папку verbose-event-calendar в качестве папки плагина и создать файл index.php с необходимой информацией о плагине. После создания вы можете перейти в меню плагинов панели администратора и активировать плагин, используя ссылку активации .

01
02
03
04
05
06
07
08
09
10
11
<?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
 */
?>

Шаг 2 Понимание структуры папок

Поскольку я собираюсь использовать внешние плагины jQuery для этого урока, важно иметь хорошее представление о структуре папок и файлов. Следующий экран покажет вам графическое представление структуры файла этого плагина.

Структура папок
  • images — содержит все изображения, используемые для плагина WordPress.
  • javascripts — файлы JavaScript для подключаемого модуля jQuery Verbose Calendar.
  • таблицы стилей — CSS-файлы для плагина jQuery Verbose Calendar.
  • Темы — CSS файлы для jQuery Date Picker.
  • ui — файлы JavaScript для jQuery Date Picker.
  • verboseCalAdmin.js — пользовательский код JavaScript, связанный с разделом администратора.
  • verboseCalCustom.js — пользовательский код JavaScript, связанный с внешним интерфейсом.
  • styles.css — пользовательские стили для плагина.
  • index.php — PHP-код плагина.
  • README.md — файл README для подробного календаря jQuery.

Шаг 3 Поставьте JavaScript и CSS файлы в очередь

Нам нужны отдельные файлы JavaScript и CSS для внешнего интерфейса и административных разделов. Следующий код покажет вам, как правильно их включить, используя действие wp_enqueue_scripts .

Включите файлы JavaScript и CSS для отображения подробного календаря jQuery:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?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’);
?>

Включите файлы JavaScript и CSS для интерфейса администратора:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?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’);
?>

Шаг 4 Зарегистрируйте пользовательский тип сообщения для событий

События могут иметь много деталей, таких как дата, местоположение, участники и т. Д. Я собираюсь создать пользовательский тип публикации, который называется event учитывая гибкость и расширяемость плагина. Первой задачей было бы зарегистрировать пользовательский тип записи в WordPress. Давайте рассмотрим код для регистрации пользовательских типов постов.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?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’);
?>
  • Сначала я собираюсь вызвать функцию в действии init чтобы зарегистрировать пользовательский тип сообщения. register_custom_event_type будет вызываться.
  • Внутри функции мы должны определить метки для Пользовательского Типа Поста. Эти переменные, определенные в массиве $labels будут использоваться в качестве меток для формы создания события и сохранения типов записей в базе данных. Вы можете найти больше информации о метках пользовательских типов постов в register_post_type в Кодексе WordPress.
  • Затем мы должны определить список аргументов для передачи в функцию register_post_type . Я собираюсь использовать значения по умолчанию для большинства аргументов, как показано в приведенном выше коде.
  • Я сделал изменения в аргументе support. Это используется для определения доступных полей формы и компонентов на экране создания события. В этом плагине нам нужны только заголовок и описание события. Поэтому я удалил другие значения, такие как thumbnail , custom-fields , excerpt и т. Д.
  • Наконец, мы передаем аргументы для функции register_post_type с именем нашего Пользовательского Типа Поста как event .

«Важно, чтобы имя пользовательского типа поста оставалось не более 20 символов без заглавных букв или пробелов».

Теперь вы сможете увидеть пункт меню «События» в левом меню панели администратора перед меню «Внешний вид». Как только вы нажмете на него, вы будете перенаправлены на экран создания события с полями Название события и Описание. Далее я покажу вам, как добавить специфичные для события поля в форму.

Шаг 5 Создайте пользовательские поля событий

События могут содержать много информации, как я упоминал ранее. У вас есть возможность создавать свои собственные поля в соответствии с типом событий, которые вы используете на веб-сайте. Поэтому я собираюсь создать поля для начальной и конечной даты , которые являются общими для любого типа события, и позволить вам создавать свои собственные поля путем изменения кода. Мы можем создавать собственные поля внутри мета-блоков, а также настраиваемые поля по умолчанию для хранения дополнительной информации. Поскольку мы уже удалили пользовательские поля с экрана событий, я собираюсь использовать поля внутри мета-блоков для создания дат начала и окончания.

Добавить информацию о событии Meta Box

Сначала мы должны добавить мета-бокс в качестве контейнера наших пользовательских полей, используя код ниже.

1
2
3
4
5
6
7
<?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’);
}
?>

Я использовал необходимые параметры для функции add_meta_box в приведенном выше коде. Вы должны передать уникальный идентификатор, заголовок мета-поля, имя функции для создания пользовательских полей и тип события в качестве обязательных параметров. Вы можете найти более подробную информацию о необязательных параметрах в add_meta_box в Кодексе WordPress .

Добавить поля событий

Мы собираемся добавить 2 поля для начальной и конечной даты события в мета-поле, созданное ранее. HTML-код для полей формы генерируется внутри функции display_event_info_box .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<?php
function display_event_info_box() {
    global $post;
 
    $values = get_post_custom($post->ID);
    $eve_start_date = isset($values[‘_eve_sta_date’]) ?
    $eve_end_date = isset($values[‘_eve_end_date’]) ?
 
    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;
}
?>
  • Этот HTML-код будет использоваться на экранах «Добавить событие» и «Изменить событие». Поэтому изначально мы должны получить текущие значения полей, используя функцию get_post_custom .
  • Затем мы создаем значение nonce для проверки в процессе сохранения события.
  • Затем мы выводим HTML-код для двух текстовых полей для начальной и конечной даты. Если значение уже существует, мы присваиваем его атрибуту значения полей ввода.

«Я назвал свои мета-ключи для начала и окончания события как _eve_sta_date и _eve_end_date . Когда вы используете ‘ _ ‘ перед мета-ключами, он не будет отображаться как настраиваемое поле. В противном случае мы получим дубликаты полей, одно внутри мета-блока. и один с настраиваемыми полями. Всегда проверяйте префикс мета-ключей на « _ », если вы не хотите, чтобы он отображался как настраиваемое поле ».

Добавить средство выбора даты в поля событий

Несмотря на то, что мы создали 2 текстовых поля для даты начала и окончания, они будут использоваться для вставки фактических дат. Поэтому я собираюсь назначить jQuery Date Picker для текстовых полей, чтобы пользователи могли выбирать даты из календаря, не вводя их вручную. Нам нужно добавить некоторый код JavaScript в файл verboseCalAdmin.js, чтобы назначить указатели даты полям ввода.

1
2
3
4
5
6
7
8
<script>
$jq =jQuery.noConflict();
 
$jq(document).ready(function() {
    $jq(«#datepickerStart»).datepicker();
    $jq(«#datepickerEnd»).datepicker();
});
</script>

Шаг 6 Проверка создания события

Нам нужно сделать некоторую проверку перед сохранением событий в базу данных. Поэтому я собираюсь использовать проверку jQuery в форме создания события, как показано ниже. Приведенный ниже код включен в файл verboseCalAdmin.js .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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>
  • Функция jQuery будет вызываться при отправке формы с использованием сообщения идентификатора формы.
  • На экране создания поста есть множество скрытых полей. Я использую значение скрытого поля post_type чтобы проверить тип сообщения.
  • Название и Даты обязательны. Таким образом, эти поля проверяются с помощью jQuery.
  • Затем мы добавляем настраиваемые поля ошибок, которые будут отображаться под каждым полем.
  • Если форма не проверяется должным образом, будут отображаться ошибки и создание события будет остановлено, пока все ошибки проверки не будут исправлены.

Шаг 7 Сохранение событий в базе данных

Как только все ошибки проверки исправлены и форма успешно отправлена, мы вызываем функцию save_post действия save_post как показано в следующем коде.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
<?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’]));
}
?>
  • Это стандартный метод сохранения пользовательской мета-записи в базу данных. Сначала мы проверяем, вызывается ли функция внутри автосохранения WordPress, и возвращаемся из скрипта.
  • Затем мы проверяем значение nonce, сгенерированное в форме, и значение nonce, отправленное через $_POST .
  • Затем мы должны проверить, есть ли у пользователя необходимые разрешения для создания событий, используя функцию current_user_can('edit_post') .
  • Наконец, мы сохраняем дату начала и дату окончания в таблице wp_postmeta в базе данных.

Сейчас мы завершили процесс создания событий через админ-панель. Далее мы должны поработать над включением подробного календаря jQuery в интерфейс и отобразить события и сообщения для пользователей.

Шаг 8 Создание шорткода для подробного календаря

Сначала нам нужно создать шорткод, который отображает подробный календарь на странице. Добавив следующий код, вы можете создать новую страницу в панели администратора, добавив шорткод в виде [verbose_calendar/] в редактор, чтобы отобразить календарь в записи.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<?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»);
?>

Приведенный выше код короткого кода вставляет элементы HTML, необходимые для календаря. Мы должны загрузить календарь, используя jQuery, как показано ниже. Следующий код включен в файл verboseCalCustom.js .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<script>
$jq =jQuery.noConflict();
 
$jq(document).ready(function() {
 
    $jq(«#main-container»).calendar({
        tipsy_gravity: ‘s’, // How do you want to anchor the tipsy notification?
        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>

Если все сделано правильно, у вас должен быть календарь, подобный следующему изображению на странице, которую вы создали.

Шаг 9 Назначение событий в календарь

Следующая задача этого урока — запросить события и сообщения из базы данных и отобразить их в календаре. По умолчанию подробный календарь обеспечивает только макет календаря. Мы должны настроить плагин, чтобы назначать события в календаре. В Verbose Calendar для отображения календаря используется функция g.prototype.print . Поэтому мы собираемся настроить эту функцию для извлечения событий и сообщений из базы данных, как показано ниже. Код находится в файле jquery.calendar.min.js внутри папки javascripts .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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>
  • Я объясню коды, которые мы изменили и которые важны с точки зрения плагина. Код плагина здесь опущен.
  • Сначала я поместил весь код в запрос AJAX. Этот запрос будет сделан каждый раз, когда вы меняете год или загружаете календарь.
  • AJAX-запрос будет сделан к действию get_posts_for_year . Он вернет список сообщений и событий за текущий год, отображаемых в верхней части календаря.
  • Затем мы перебираем каждый результат, используя метод $ jq.each . Мы передаем детали результата в массив postDetailsArr .
  • Мы используем дату начала для событий и дату публикации для сообщений и присваивания массиву postArr.
01
02
03
04
05
06
07
08
09
10
11
12
<script>
    var mon = ((parseInt(b)+1) < 9) ?
    daynum = (j<9)?»0″+j:j;
 
    var searchedIndex = ($jq.inArray((mon+»-«+daynum+»-«+d), postArr));
    if(searchedIndex != -1) {
        g.append(«<div data-date='»+(parseInt(b)+1)+»/»+j+»/»+d+»‘ class=’label dat-«+(parseInt(b)+1)+»-«+j+»-«+d+» day «+h+» event_highlight’>»+j+»</div>»);
    }
    else {
        g.append(«<div data-date='»+(parseInt(b)+1)+»/»+j+»/»+d+»‘ class=’label dat-«+(parseInt(b)+1)+»-«+j+»-«+d+» day «+h+»‘>»+j+»</div>»);
    }
</script>
  • Приведенный выше фрагмент кода также находится внутри функции печати.
  • Мы готовим дату и месяц, добавляя 0 в качестве префикса, если он меньше 10.
  • Затем мы проверяем каждую дату, существующую внутри postArr используя функцию inArray .
  • Если date содержит событие или сообщение, мы добавляем специальный класс CSS с именем event_highlight .

Создание списков сообщений и событий

Теперь нам нужно запросить базу данных и сгенерировать результаты для запроса AJAX. Рассмотрим следующий код для процесса генерации запроса.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?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)='» .
 
    $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’))='» .
 
    $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;
}
?>
  • Сначала мы назначаем действие как зарегистрированным пользователям, так и обычным пользователям.
  • Затем мы получаем все опубликованные сообщения за выбранный год и присваиваем его массиву $allEvents .
  • Мы назначаем события для выбранного года, используя ту же процедуру, что и выше, и выводим в формате JSON.

Шаг 10 Отображение списка событий

Даты с событиями или сообщениями будут выделены синим цветом. Как только вы нажмете на такую ​​дату, список событий должен отображаться. В Verbose Calendar есть функция calendar_callback которую мы будем использовать для отображения списка событий. Следующий код JavaScript внутри файла verboseCalCustom.js будет использоваться для этой функции.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
var calendar_callback = function(date) {
 
    $jq(«#event_row_panel»).html(«»);
 
    date.month = (date.month < 10) ?
    date.day = (date.day < 10) ?
    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+»
        }
        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+»
        }
 
    });
 
    $jq(«#event_row_panel»).html(eventHTML);
    $jq(«#popup_events»).fadeIn(«slow»);
}
</script>
  • Дата щелчка будет автоматически передана этой функции. Сначала мы назначаем дату переменной, используя переданный объект date.
  • Затем мы получаем события и сообщения на выбранную дату, используя postDetailsArr сгенерированный в функции печати.
  • Затем мы назначаем события и публикуем детали с учетом переменной type .
  • Наконец, мы назначаем весь HTML- event_row_panel контейнера event_row_panel и отображаем список событий.

Вывод

Как только урок будет завершен, у вас будет отличный плагин для календаря событий. Это содержит только основные поля событий. Вы можете создать больше информации о событиях, добавив больше пользовательских полей. Не стесняйтесь расширять функциональность этого плагина и делиться своими предложениями.

78
Share: