FullCalendar список дневных событий модальный

Question

Я использую FullCalendar 2.4. У меня есть приложение, которое имеет следующие конкретные параметры:

Ежемесячный Просмотр только.
всеDay только события.
Никаких повторных событий.
Нет многодневных событий.

У меня есть работа, которую я хочу, за исключением одной функции. Когда кто-то нажимает на событие, у меня появляется надпись/описание события с кнопками «Изменить» или «Удалить событие». Если вы нажмете «Редактировать», оно отобразит форму редактирования и так далее.

Единственное, что я хотел бы добавить, это кнопка, которая говорит «Изменить порядок». Я хочу, чтобы он был всплывающим (модальный, как «Изменить», или, возможно, другой вариант) список всех событий за этот день (день, когда было начато одно единственное событие). Я использую список сортировки jQuery, чтобы они могли изменять порядок событий путем перетаскивания/удаления. Для сохранения нового заказа будет кнопка сохранения. Я не хочу всплывать список переупорядочения на dayClick, потому что у меня появляется форма добавления события.

У меня все получилось ИСКЛЮЧИТЬ получение списка событий за этот день для отображения и доступности (поэтому я могу ссылаться на идентификатор события для последующего сохранения в MySQL, где хранится календарь).

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

Я опытный программист, но я занимаюсь PHP всего несколько лет и JQuery только в этом году.

Я бы не прочь сделать то же самое с Bubble, который появляется, когда вы нажимаете ссылку + More в течение дня ... если бы я мог понять, как создать в нем отсортированный список. Я открыт для альтернативных способов сделать это, если мне не хватает лучшего пути.

Я просмотрел Google и stackoverflow. Я нашел некоторые подобные ситуации, но не сигару.

Спасибо!

Answer 1

Я бы всплывающее модальное (с АЯКС загруженного содержимого)

$('#calendar').fullcalendar({ 
    /* ... options ... */ 
    dayClick: function(date, jsEvent, view) { 
     // some info in console 
     console.log('Clicked on: ' + date.format()); 
     console.log('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY); 
     console.log('Current view: ' + view.name); 

     // Here you load the modal 
     $('#ajax_modal').load('nestable_list.php', {event_date: date.format()}, function(){ 
      $('#ajax_modal').modal(); 
     }); 
    }, 
    /* ... other options ... */ 
}); 

с nestable list и кнопку сохранения. В этом файле вам понадобятся основные php-файлы с соединением DB, чтобы вы создали свой список и инициализировали плагин. Мой удаленный файл PHP для модального содержания, как это:

<?php $date_str = $_GET['event_date']; 
$date = date('d-m-Y', strtotime($date_str)); //format the way you need 
$res = $db->query("SELECT event_id, title FROM events_table WHERE event_date = '$date' ORDER BY index"); 
?> 
<div class="modal-header"> 
    <button type="button" class="close close-icon-medium" data-dismiss="modal" aria-hidden="true"></button> 
    <h4 class="modal-title">Edit</h4> 
</div> 
<div class="modal-body"> 
    <div class="dd" id="nestable"> 
     <ol class="dd-list"> 
     <?php foreach($res AS $row) : ?> 
      <li class="dd-item" data-id="<?=$row['event_id']?>"> 
       <div class="dd-handle"><?=$row['title']?></div> 
      </li> 
     <?php endforeach; ?> 
     </ol> 
    </div> 
</div> 
<div class="modal-footer"> 
    <button class="btn btn-sm save" type="button"> Save</button> 
    <button type="button" class="btn btn-sm" data-dismiss="modal">Cancel</button> 
</div> 

Вы также можете добавить JavaScript в нижней части PHP файла

$(document).ready(function(){ 
    $('#nestable').nestable({ /* options here */}); 
    $('.save').on('click', function(){ 
     // loop over li elements and save index with ajax to another file. 
     // close modal 
     // you are done here 
    }); 
}); 

После того, как список упорядочен и кнопку сохранить щелкнул, обновить каждое событие с текущим выбранным индексом (добавить столбец event_index в БД), а затем обновить страницу календаря. С

$('#calendar').fullCalendar('refetchEvents'); 

NB указательного событием полем будет по умолчанию 0, а затем 1 п в каждый день, это позволит получать как неупорядоченные и упорядоченные события в разыскиваемом пути. (добавьте в запрос запрос «ORDER BY event_index»). Добавьте ORDER BY к запросу, который выдает события из базы данных