Question

我正在将FullCalendar集成到Web表单中。

FullCalendar从隐藏的表单字段中获取数据。像这样：

var data = jQuery.parseJSON(jQuery('#fullcalendar_data').val());

然后FullCalendar很棒，让用户编辑。

用户完成后，点击表单上的“保存”。

如何将FullCalendar的事件数据作为JSON返回到隐藏的表单字段中，以便“保存”将其发回服务器？

Answer 1

使用此代码从日历中获取事件：

<script type='text/javascript'>
function savedata(){
$(document).ready(function () {
    $(function () {
        $("#save").click(function () {
            var eventsFromCalendar = $('#calendar').fullCalendar('clientEvents');
            alert(eventsFromCalendar);
            $.ajax(
        {

            url: '@Url.Action("Save")',
            type: 'POST',
            traditional: true,
            data: { eventsJson: JSON.stringify(eventsFromCalendar) },
            dataType: "json",
            success: function (response) {
                alert(response);
            },
            error: function (xhr) {
                debugger;
                alert(xhr);
            }

        });
        });
    });
});
 }
 </script>

并使控制器方法接收如下数据：

[HttpPost]
public ActionResult Save(string eventsJson)
{
var events = JsonConvert.DeserializeObject<IEnumerable<Event>>(eventsJson);
return View();
}

 public class Event
{
    public int Id { get; set; }



    public string Title { get; set; }
    public DateTime Start { get; set; }
    public DateTime End { get; set; }
}

你可以在你的页面上的任何事件上调用这个java脚本函数，就像onclick一样，使它成为一个函数等。

Answer 2

@ppumkin不能正常工作，因为它作为对象提交给服务器端，你需要将它串起来

var eventsFromCalendar = $（'＃calendar'）。fullCalendar（'clientEvents'）;

    var eventsForCookie = [];

    $.each(eventsFromCalendar, function(index,value) {
        var event = new Object();
        event.id = value.id;            
        event.start = value.start;
        event.end = value.end;
        event.title = value.title;
    event.allDay = value.allDay
        eventsForCookie.push(event);
    });             
    $("#all_events").val(JSON.stringify(eventsForCookie));

之后，您可以将它提交到您可以使用JSON.parse（Ruby）解析的服务器

Answer 3

获取整个反馈的最佳方法是使用clientEvents

.fullCalendar( 'clientEvents')

http://arshaw.com/fullcalendar/docs/event_data/clientEvents/

根据您获取和发送数据的方式，我认为您可能希望执行类似

的操作

$('#fullcalendar_data').val($('FullCalendarObject').fullCalendar('clientEvents'));

然后将其提交给服务器并处理其余部分。

Answer 4

正如其他人所说，使用

.fullCalendar( 'clientEvents' [, idOrFilter ] ) -> Array

来源：http://fullcalendar.io/docs/event_data/clientEvents/

用法示例：

客户端

$('#submitchange').click(function() {
        var clientevents = $('#calendar').fullCalendar('clientEvents');
        $.ajax({
            url: '/eventupdate',
            type: 'POST',
            data: {clientdata: JSON.stringify(clientevents)},
            success: function (response) {
                //get the response from server and process it
                $("#calendarupdated").append(response);
            }
        });
    });

服务器端（Python Flask示例）：

@app.route('/eventupdate',methods=['POST'])
def eventupdate():
    client_ev = request.form.get('clientdata')
    #convert the json strings into list of event objects
    cev_list = json.loads(client_ev)
    #do whatever you need here to update the database,etc
    return 'Calendar has been updated'

Answer 5

这个问题的答案几乎是正确的。这个问题本身已经过时了，所以这可能就是为什么这些问题不再适用了。

对于将来有疑问的任何人，我会发布我的解决方案。我的解决方案是jahanzaib的答案的组合，以及该代码中stringify错误的修复。

function savedata() {
        $(document).ready(function () {
            $(function () {
                $("#save").click(function () {
                    var eventsFromCalendar = $('#calendar').fullCalendar('clientEvents', function (e) {
                            return true;
                        }
                        return false;
                    });
                    for (var i = 0; i < eventsFromCalendar.length; i++)
                    {
                        if (eventsFromCalendar[i].borderColor == 'red')
                        {
                            $('#errorMsg').show();
                            return;
                        }
                    }
                    alert(eventsFromCalendar);
                    $.ajax
                        ({
                    url: '@Url.Action("Save")',
                    type: 'POST',
                    traditional: true,
                    data: {
                        eventsJson: JSON.stringify(eventsFromCalendar.map(function (e)
                        {
                            return {
                                start: e.start,
                                end: e.end,
                                title: e.title,
                            }
                        }))
                    },
                    dataType: "json",
                    success: function (response) {
                        alert(response);
                    },
                    error: function (xhr) {
                        debugger;
                        alert(xhr);
                    }
                });
                });
            });
        });
    }

Answer 6

您可以使用Client Events方法。看起来这将返回一个对象数组，然后您可以将它们转换为您想要的任何形式。

Answer 7

我使用的是4以上的fullcalendar版本，我找不到真正更好的方法来解决-这是一个非常肮脏的解决方法-但在这里是：

document.getElementById('eventData').value = JSON.stringify(calendar.getEventSources()[0]['internalEventSource']['meta']);
        document.getElementById("event").submit();

我正在使用django，我只是将值设置为输入并提交表单。

<form action="" id="event" method="post">
        <input type="text" name="eventData" style="display:none;" id="eventData">    </form>

谢谢你们。

如何将全日历数据“发布”回服务器？

7 个答案: