fullcalendar 多天的事件跨度如何（javascript 代码）答案

【问题标题】：fullcalendar multi-day span of event how (javascript code)fullcalendar 多天的事件跨度如何（javascript 代码）
【发布时间】：2015-12-25 15:40:54
【问题描述】：

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

[范围是从 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>

【问题讨论】：

我希望我能看到 HTML。我想您正在使用 PHP 或其他一些服务器端语言动态创建日历，不是吗？在这种情况下，为您的 JavaScript 创建一个好的 HTML 标记会大有帮助，例如，您可以为 span 提供 data-start 和 data-end 属性，以便通过 JavaScript 轻松检索它们。有很多选择，但不幸的是我现在必须去。其他人肯定会帮助你有更多的时间，但至少在这里你有一个想法。
感谢您的回复！ html 不包含太多内容，它只包含当我单击一天或事件时的模式。 fullcalendar 的 CRUD 已经完全正常工作，只是我无法创建一个跨度来输入开始日期和结束日期。日历的功能完全依赖于javascript，crud依赖于控制器和模型。
请同时添加您的 HTML 和 PHP 代码。
@DenizB。我现在已经添加了 html 文件 :)
好的，现在我明白了。据我所知，如果您要使用 JavaScript，则不需要表单标签。如果您的计划是使用“表单”的信息并将其发送到数据库然后“重新加载”日历，那么您可以使用 AJAX 来执行此操作，无论您使用什么其他实现，如果您将它们放入它们将起作用在一起很好。不幸的是，直到现在我才意识到你的意思是“fullcalendar”作为一个 jQuery 插件（从未听说过），现在我看到你正在使用我没有经验的 codeigniter，所以我可能不是最好的人帮助你。

标签： javascript php codeigniter fullcalendar

【解决方案1】：

因此，您的问题似乎是您的 URL 返回的 JSON 对象包含无法识别的 fullCalendar 数据。所以你必须像这样获取事件：

events: base_url+'Calendar/view_tours',

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

【讨论】：