jQuery 将带有 JSON 数据的 fullcalendar 动态加载到 addEventSource 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18510887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically load fullcalendar with JSON data into addEventSource
提问by Yasin Y?rük
Actually title is telling everything. I do a ajax call, it's return a event list.Then I want put the list into fullcalendar. This operation should be for every changed selected username.
其实标题说明了一切。我做了一个 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 is not working. Nothing append to fullcalendar.
addEventSource 不起作用。没有任何内容附加到 fullcalendar。
Here is the container : <div id="calendar"></div>
这是容器： <div id="calendar"></div>
--- EDIT ---
- - 编辑 - -
I get an error : Uncaught exception: TypeError: Cannot convert 'getDaySegmentContainer()' to object
我收到一个错误： Uncaught exception: TypeError: Cannot convert 'getDaySegmentContainer()' to object
回答by kjbradley
I used a style suggested by the fullcalendar documentation: http://arshaw.com/fullcalendar/docs/event_data/Event_Source_Object/
我使用了 fullcalendar 文档建议的样式：http://arshaw.com/fullcalendar/docs/event_data/Event_Source_Object/
So if you are using rails like I was, I had this in my document ready script:
所以如果你像我一样使用 rails，我在我的文档就绪脚本中有这个：
eventSources: [{
url: '/mymodel.json',
ignoreTimezone: false
}],
Then in the model itself:
然后在模型本身中：
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
回答by Aimal Khan
Have a look at my answer, i faced the same issue where i was unable to map events to jquery fullcalender. Got it to work after three days of struggle.
看看我的回答，我遇到了同样的问题，我无法将事件映射到 jquery fullcalender。经过三天的努力，它终于开始工作了。
Here's the link
这是链接
回答by mcrsftDev
I have worked in something like that, but using 'month' value to obtain only the events of the month selected and replace all events in the calendar
我从事过类似的工作，但使用“月份”值仅获取所选月份的事件并替换日历中的所有事件
My javascript code:
我的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);
}
});
}
});
My Action Method:
我的行动方法：
public ActionResult GetEventsByMonth(int month)
{
List<Events> list = Events.GetEvents(month);
var rows = list.ToArray();
return Json(rows, JsonRequestBehavior.AllowGet);
}
You could change the 'month' parameter by 'user' and bring them all events of the respective user.
您可以通过“用户”更改“月份”参数，并将相应用户的所有事件带给他们。
My Model:
我的型号：
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)
{
...
}
}
