JQuery Fullcalendar повторяющееся событие


Как показать повторяющееся событие в Jquery fullcalendar? например, событие начинается в определенный день и продолжается в течение следующего года, тогда как бы я отображал это в fullcalendar.

Примечание: информация о событии поступает из базы данных

1 6

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/

Я надеюсь, что это помогает.