如何将fullcalendar数据“发布”回服务器？

Question

我正在将FullCalendar整合到网络表单中。

FullCalendar从隐藏表单域获取数据。就像这样：

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

然后FullCalendar做它的真棒，让用户编辑。

一旦用户完成，他们点击窗体上的“保存”。

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

Answer 1

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

Answer 2

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

.fullCalendar('clientEvents') 

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

取决于您如何获取和发送我想你会想要做这样的事情

数据

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

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

Answer 3

@ppumkin，因为它被提交为对象到服务器端，将不能正常工作，你需要stringfy它

VAR eventsFromCalendar = $（ '＃日历'）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（红宝石）解析

Answer 4

使用此代码从日历中的活动：

<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脚本f从您的页面无论如何结像的onclick通过使其成为一个功能等

Answer 5

正如其他人建议，使用

.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 6

这个问题的答案几乎是正确的。这个问题本身就是超旧的，所以这可能是为什么这些不再有效。

对于将来有任何问题的人，我会发布我的解决方案。我的解决方案是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); 
        } 
       }); 
       }); 
      }); 
     }); 
    }