FullCalendar列表日期'；s事件模式 - FullCalendar list day's events modal

我使用的是FullCalendar 2.4。我有一个具有以下特定参数的应用程序：

仅限月度视图
仅限allDay活动
没有再次发生的事件
没有多日活动。

我让它按照我想要的方式工作，除了一个功能。当有人点击某个事件时，我会让它弹出事件的标题/描述，并带有编辑或删除事件的按钮。如果单击编辑，它会弹出编辑表单，依此类推。

我想添加的一件事是一个按钮，上面写着"重新订购"。我希望它弹出（类似"编辑"的模式是或可能是另一个选项）当天（原始单个事件发生的当天）的所有事件的列表。我使用的是jQuery可排序列表，这样他们就可以通过拖放来更改事件的顺序。将有一个保存按钮来保存新订单。我不想在dayClick上弹出重新排序列表，因为我有一个弹出的添加事件表单。

除了显示当天的事件列表并可访问之外，我已经解决了所有问题（这样我就可以引用事件id，以便稍后保存到存储日历的MySQL中）。

它不是一个大数据库，所以如果这是最好的方法，我不介意来回寻找数据。我只是缺少方法和语法。

我是一名经验丰富的程序员，但只做了几年PHP，今年才做JQuery。

我不介意对你在一天中点击+更多链接时弹出的气泡做同样的事情。。。如果我能想出如何在其中创建一个可排序的列表。如果我错过了更好的方法，我愿意选择其他方法。

我搜索过谷歌和stackoverflow。我发现了一些类似的情况，但没有雪茄。

谢谢！

我会弹出一个模式（加载ajax内容）

$('#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 ... */
});

带有嵌套列表和保存按钮。在这个文件中，您将需要使用DB连接的核心php文件，以便创建您的列表并初始化插件。我的模式内容的远程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>

您也可以在php文件的底部添加您的javascript

$(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
    });
});

一旦对列表进行排序并单击保存按钮，就可以使用当前选定的索引更新每个事件（在DB中添加event_index列），然后刷新日历页面。带

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

NB事件索引字段将默认为0，然后每天为1到n，这将允许以所需的方式获取无序和有序事件。（在查询中添加"ORDER BY event_index"）。将ORDER BY添加到从DB 加载事件的查询