将带有 JSON 数据的 fullcalendar 动态加载到 addEventSource答案

【问题标题】：Dynamically load fullcalendar with JSON data into addEventSource将带有 JSON 数据的 fullcalendar 动态加载到 addEventSource
【发布时间】：2013-08-29 12:21:36
【问题描述】：

实际上标题说明了一切。我做了一个ajax调用，它返回一个事件列表。然后我想把这个列表放到fullcalendar中。此操作应针对每个更改的选定用户名。

$.ajax({
    type: "POST",
    url: "get_event_list.php",
    data: "username="+user,
    success: function(ajaxCevap) {

        var obj = jQuery.parseJSON(ajaxCevap);
        var events = new Array();

        $.each(obj,function(index,value) {

            event = new Object();       
            event.title = value['title']; 
            event.start = value['start']; 
            event.end = value['end'];
            event.color = value['backgroundColor'];
            event.allDay = false;

            events.push(event);
        });

        $('#calendar').fullCalendar("removeEvents");        
        $('#calendar').fullCalendar('addEventSource', events);      
        $('#calendar').fullCalendar('refetchEvents');

    }
});

addEventSource 不工作。没有附加到 fullcalendar。

这里是容器：<div id="calendar"></div>

--- 编辑 ---

我收到一个错误：Uncaught exception: TypeError: Cannot convert 'getDaySegmentContainer()' to object

【问题讨论】：

标签： jquery ajax json fullcalendar

【解决方案1】：

我使用了 fullcalendar 文档建议的样式： http://arshaw.com/fullcalendar/docs/event_data/Event_Source_Object/

因此，如果您像我一样使用 Rails，我的文档准备脚本中有这个：

eventSources: [{
    url: '/mymodel.json',
    ignoreTimezone: false
}],

然后在模型本身中：

def index
#gets list

@mymodel = Mymodel.all.map { |r| {:title => r.title , :start => r.date, :color => '#66FF33', :end => r.enddate, :id => r.id} } 

 respond_to do |format|
    format.html
    format.json { render :json => @mymodel }
 end
end

【讨论】：

用户名更改后如何重新获取您的事件？此代码在首次加载时运行。
如果您“退出”或更改了用户名，页面应该会自行刷新并且相应的事件会重新加载。
如果您的用户名更改刺激了页面请求或刷新，则应与“首次加载”相同。

【解决方案2】：

看看我的答案，我遇到了同样的问题，我无法将事件映射到 jquery fullcalender。经过三天的努力，它终于开始工作了。

这是链接

Maping Events to FullCalender using JSON

【讨论】：

【解决方案3】：

我曾做过类似的工作，但使用“月”值仅获取所选月份的事件并替换日历中的所有事件

我的 javascript 代码：

  $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: ''
        },
        editable: false,
        events: function (start, end, timezone, callback) {


            var d = new Date();
            var n = d.getMonth();

            var month = n + 1; //actual month 
            try {
                //if the View is diferent of today , get the number of month from the actual view
                month = parseInt($('#calendar').fullCalendar('getDate').format("MM"));
            }catch(e){}

            $.ajax({
                url: $("#url-events").val(), //GetEventsByMonth
                dataType: 'json',
                data: {
                    //pass the parameter to get the events by month
                    month: month
                },
                success: function (result) {
                    var events = [];
                    $.each(result, function (i, item) {

                        events.push({
                            title: result[i].title,
                            start: result[i].start,// will be parsed
                            end: result[i].end // will be parsed
                        });
                    })                        
                    callback(events);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);

                }


            });
        }

    });

我的行动方法：

 public ActionResult GetEventsByMonth(int month)
    {

        List<Events> list = Events.GetEvents(month);
        var rows = list.ToArray();
        return Json(rows, JsonRequestBehavior.AllowGet);
    }

您可以通过 'user' 更改 'month' 参数，并为他们带来相应用户的所有事件。

我的模特：

 public class Events
{
    public string id { get; set; }
    public string title { get; set; }
    public string date { get; set; }
    public string start { get; set; }
    public string end { get; set; }
    public string url { get; set; }

    public bool allDay { get; set; }


    public static List<Events> GetEvents(int month= 0)
    {
      ...
    }


}

【讨论】：