Question

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

[跨度从12月27日（开始日期）到12月30日（结束日期） - 请点击链接查看示例图像 http://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和{{ 1}}到end_date。这将创建正确的JSON对象。

fullcalendar多日跨度事件如何（javascript代码）

1 个答案: