事件如何(JavaScript代码)的全日历多天跨度

Question

我想知道如何在javascript上手动编码以获取事件的开始和结束日期，并将其显示在日历中带有"跨度"。就像这样：

[跨度从 12 月 27 日(开始日期(到 12 月 30 日(结束日期( - 请点击链接查看示例图像https://i.stack.imgur.com/NlvRG.png

从我的JavaScript代码中，我已经可以检索开始日期：

dayClick: function(date, event, view) {
        currentDate = date.format();
        // Open modal to add event
        modal({
            // Available buttons when adding
            buttons: {
                add: {
                    id: 'add-event', // Buttons id
                    css: 'btn-success', // Buttons class
                    label: 'Add' // Buttons label
                }
            },
            title: 'Add Event (' + date.format() + ')' // Modal title
        });
    },

但是，如果我在 javascript 中手动编码事件，那么多天事件跨度确实有效。在javascript中手动编码的事件如下所示：

$('#calendar').fullCalendar({

header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
}, events: [
    {
        title: 'Birthday Party',
        start: '2014-09-15T10:00:00',
        end: '2014-09-17T06:00:00'
    }
] });

我实际上想知道如何从表单动态获取开始日期和结束日期并进入 javascript 中的数据库。

这是我的html文件(

当我在codeigniter上运行它时，它被保存为php文件(这是视图(：

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                    <div id='calendar'></div>
            </div>
        </div>
    </div>
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <div class="error"></div>
                    <form class="form-horizontal" id="crud-form">
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="title">Title</label>
                            <div class="col-md-4">
                                <input id="title" name="title" type="text" class="form-control input-md" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="title">Start date:</label>
                            <div class="col-md-4">
                                <input id="start_date" name="start_date" type="text" class="form-control input-md" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="title">End Date:</label>
                            <div class="col-md-4">
                                <input id="end_date" name="end_date" type="text" class="form-control input-md" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-4 control-label" for="description">Description</label>
                            <div class="col-md-4">
                                <textarea class="form-control" id="description" name="description"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="color">Color</label>
                            <div class="col-md-4">
                                <input id="color" name="color" type="text" class="form-control input-md" readonly="readonly" />
                                <span class="help-block">Click to pick a color</span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</body>

Answer 1

所以看起来你的问题是你的 URL 返回的 JSON 对象有无法识别的 fullCalendar 数据。因此，您必须获取如下事件：

events: base_url+'Calendar/view_tours',

并将数据库的列从 tour_id 更改为 id 、tour_name更改为title、start_date更改为start和end_date更改为end。这将创建正确的 JSON 对象。