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

| 我正在将FullCalendar集成到Web表单中。 FullCalendar从隐藏的表单字段获取数据。像这样：

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

然后FullCalendar很棒，让用户进行编辑。用户填写完毕后，他们在表单上单击\“保存\”。我如何将FullCalendar \的事件数据作为JSON返回到隐藏的表单字段中，以便“保存”将其重新发布到服务器？

已邀请:

6 个回复

究补闯

使用以下代码从您的日历中获取事件：

<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; }
}

您可以在页面上的任何事件（例如onclick）上调用此Java脚本函数，只需将其设为函数等即可。

豆兢

@ppumkin无效，因为它已作为对象提交到服务器端，您需要对其进行stringfy 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）进行解析的服务器

癸痊醒

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

.fullCalendar( \'clientEvents\')

http://arshaw.com/fullcalendar/docs/event_data/clientEvents/ 我想根据您如何获取和发送数据，您可能想做类似的事情

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

然后将其提交给服务器，并在那里处理其余的事情。

陷牡彭拈峰

正如其他人建议的那样，使用

.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\'

仇聘发栖

这个问题的答案几乎是正确的。这个问题本身已经很老了，所以也许这就是为什么这些不再起作用的原因。对于以后遇到问题的任何人，我都会发布我的解决方案。我的解决方案是jahanzaib的答案与该代码中的string化错误的修复程序的组合。

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);
                    }
                });
                });
            });
        });
    }

babsoft

您也许可以使用“客户端事件”方法。看起来这将返回一个对象数组，您可以将其转换为所需的任何形式。

要回复问题请先登录或注册

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

6 个回复

发起人

jquery

fullcalendar

问题状态

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

与内容相关的链接

6 个回复

发起人

jquery

fullcalendar

问题状态