Question

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

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

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

我想添加的一件事是一个按钮，上面写着＆＃34;重新排序＆＃34;。我希望它弹出（模态类似于＆＃34;编辑＆＃34;是或可能是另一种选择）当天所有事件的列表（原始单个事件开启的那一天）。我使用jQuery可排序列表，因此他们可以通过拖放来更改事件的顺序。将有一个保存按钮来保存新订单。我不想在dayClick上弹出重新排序列表，因为我有一个弹出的Add Event表单。

我已经完成所有工作除了获取当天的事件列表以供显示和访问（因此我可以引用事件ID以便稍后保存到存储日历的MySQL）。

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

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

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

我已经搜索了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

填充事件的查询中

FullCalendar列出当天的事件模态

1 个答案: