JQuery Fullcalendar повторяющееся событие
Как показать повторяющееся событие в Jquery fullcalendar? например, событие начинается в определенный день и продолжается в течение следующего года, тогда как бы я отображал это в fullcalendar.
Примечание: информация о событии поступает из базы данных
1 ответ:
Полный календарь не поддерживает повторяющиеся события из коробки. Вот что я сделал.
Когда я добавляю событие, у меня есть поле выбора, предназначенное для повторяющихся событий. Допустим, пользователь выбирает его для повторения каждую неделю. Затем я вставляю событие в таблицу событий с родительским идентификатором, который будет одинаковым для всех экземпляров этого события.
Полный календарь делает так, что повторяющиеся события должны иметь один и тот же идентификатор события. Таким образом, в моей таблице событий у меня есть уникальный столбец идентификатора события и Родительский идентификатор, который является столбцом, который я использую для отображения событий. Так или иначе, сразу после вставки первого события я запускаю цикл, который выбирает последнее вставленное событие с тем же родительским идентификатором, добавляет к нему 7 дней и вставляет его в таблицу событий. Я повторяю этот процесс еще 50 раз, а затем у меня есть событие, которое происходит каждую неделю в течение года.Вот какой код:
Когда пользователь выбирает временной интервал, я открываю диалоговое окно
select: function(start, end){ $( "#add_class" ).dialog( "open" ); },
В диалоге у меня есть выпадающее меню выберите
<div id="add_class" title="Add New Class"> <form action=""> <div id="recurring_event"> <label for = "recurring">Recurring </label> <input type="checkbox" name="recurring" id="recurring" /> <div id = "recurring_options" > Repeat every <select name = "repeat_frequency" id = "repeat_frequency"> <option value ="1">Day</option> <option value="7" selected="selected">Week</option> <option value = "28">Month</option> </select> </div> </div> </form> </div>
Затем я отправляю эту информацию с помощью AJAX на страницу php под названием add_class.php
$( "#add_class" ).dialog({ "Save Class": function() { var repeat_frequency = $("#repeat_frequency").val(); $.ajax({ type:"POST", url: "add_class.php", data: "repeat_frequency=" + repeat_frequency, async: false, }); $('#calendar').fullCalendar('refetchEvents'); $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } },
Вот идет add_class.php часть, где я фактически ввожу его в базу данных
Так что это всего лишь общая суть вещей. Надеюсь, что там не слишком много опечаток, поскольку я попытался отредактировать его до самого главного,чтобы донести суть. Дайте мне знать, если у вас возникнут вопросы.$repeat_frequency = $_POST['repeat_frequency']; $dbh = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password); $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION, PDO::MYSQL_ATTR_USE_BUFFERED_QUERY); $stmt = $dbh->prepare( "INSERT INTO events (start, end) //whatever variables you received from the AJAX post on the dialog form VALUES (:start, :end)"); $stmt->bindParam(':start', $start); $stmt->bindParam(':end', $end); $stmt->execute(); $id = $dbh->lastInsertId(); for($x = 0; $x < "51"; $x++) { $stmt = $dbh->prepare(" SELECT start, end FROM events WHERE event_id = :event_id "); $stmt->bindParam(':event_id', $event_id, PDO::PARAM_STR); $stmt->execute(); $result = $stmt->fetch(PDO::FETCH_ASSOC); $start = $result['start']; $end = $result['end']; $start_date= strtotime($start . '+' . $repeat_frequency . 'DAYS'); $end_date= strtotime($end . '+' . $repeat_frequency . 'DAYS'); $start = date("Y-m-d H:i", $start_date); $end = date("Y-m-d H:i", $end_date); unset($stmt); $stmt = $dbh->prepare( "INSERT INTO events (start, end ) //and whatever other columns you need VALUES (:start, :end)"); $stmt->bindParam(':start', $start, PDO::PARAM_STR); $stmt->bindParam(':end', $end, PDO::PARAM_STR); $stmt->execute(); $event_id = $dbh->lastInsertId(); }
EDIT
Для "отображения" событий на fullcalendar вам необходимо иметь источник события.
Проверьте эту ссылку
Http://fullcalendar.io/docs/event_data/events_json_feed/
В JSON-событий.php вы повторяете данные события, а затем они отображаются в вашем календаре.
Есть что-то вроде этого, чтобы показать события на странице календаря
$('#calendar').fullCalendar({ events: '/myfeed.php' });
В вашем myfeed.php файл имеет что-то вроде
$dbh = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password); $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // set the error mode to excptions $stmt = $dbh->prepare("SELECT event_id, title, start, end FROM events ORDER BY start"); $stmt->execute(); $events = array(); while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){ //important ! $start = "2010-05-10T08:30"; iso8601 format !! $eventArray['id'] = $row['event_id']; $eventArray['title'] = $row['title']; $eventArray['start'] = $row['start']; $eventArray['end'] = $row['end']; $events[] = $eventArray; echo json_encode($events);
Если у вас все еще есть вопросы, то ищите здесь на stackoverflow. Я думаю, что я объяснил это довольно ну и снабдили большим количеством кода. Вот запись в блоге, которую я сделал, которая также может помочь http://fajitanachos.com/Fullcalendar-and-recurring-events/ я нашел все необходимое для запуска fullcalendar здесь и на домашней странице fullcalendar http://fullcalendar.io/
Я надеюсь, что это помогает.