FullCalendar 列出当天的事件模式

Question

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

仅每月查看。
仅限全天活动。
没有重复发生的事件。
没有多日活动。

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

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

除了获取当天的事件列表以显示和访问之外，我已经解决了所有问题（因此我可以引用事件 ID 以便以后保存到存储日历的 MySQL）。

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

我是一位经验丰富的程序员，但只做了几年的 PHP 和 JQuery 就在今年。

我不介意对一天中单击 +More 链接时弹出的 Bubble 做同样的事情……如果我能弄清楚如何在其中创建一个可排序的列表。如果我错过了更好的方法，我愿意接受其他方法。

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

谢谢！

Answer 1

我会弹出一个模式（带有 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 ... */
});

带有nestable list 和按钮保存。在此文件中，您将要求您使用数据库连接的核心 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 获取事件的查询中