Fullcalendar-无法获得显示asp.net的事件
[英]Fullcalendar - can't get events to show asp.net
问题描述
I'm trying to implement fullcalender but I can't get the exemple data to show. 
我正在尝试实现fullcalender，但无法显示示例数据。 I have been following this guide . 我一直在遵循本指南 。
I get no errors but the events doesn't show in the calendar. 我没有收到任何错误，但事件未显示在日历中。 I have tried different solutions but I can't get it to work, also my experience with json is very limited and i would appreciate some help. 我尝试了不同的解决方案，但无法使其正常工作，而且我在json方面的经验非常有限，希望获得一些帮助。
public class CalendarController : BaseController
{
public ActionResult ShowCalendar()
{
return View();
}
public ActionResult GetMeetings(double start, double end)
{
using (var db = new ApplicationDbContext())
{
var fromDate = ConvertFromUnixTimestamp(start);
var toDate = ConvertFromUnixTimestamp(end);
var eventList = GetEvents();
var rows = eventList.ToArray();
return Json(rows, JsonRequestBehavior.AllowGet);
}
}
private static DateTime ConvertFromUnixTimestamp(double timestamp)
{
var origin = new DateTime(1970, 1, 1, 0, 0, 0, 0);
return origin.AddSeconds(timestamp);
}
private List<Events> GetEvents()
{
List<Events> eventList = new List<Events>();
Events newEvent = new Events
{
id = "1",
title = "Event 1",
start = DateTime.Now.AddDays(1).ToString("s"),
end = DateTime.Now.AddDays(1).ToString("s"),
allDay = false
};
eventList.Add(newEvent);
newEvent = new Events
{
id = "1",
title = "Event 3",
start = DateTime.Now.AddDays(2).ToString("s"),
end = DateTime.Now.AddDays(3).ToString("s"),
allDay = false
};
eventList.Add(newEvent);
return eventList;
}
<head> @section scripts{ <link rel='stylesheet' href='fullcalendar/fullcalendar.css' /> <script src='lib/jquery.min.js'></script> <script src='lib/moment.min.js'></script> <script src='fullcalendar/fullcalendar.js'></script> <script type="text/javascript"> $(document).ready(function () { $('#calendar').fullCalendar({ theme: true, header: { left: 'prev, next, today', center: 'title', right: 'month, agendaWeek, agendaDay' }, buttonText: { prev: '<', next: '>' }, defaultView: 'month', editable: false, weekMode: 'liquid', //allDaySlot: false, selectTable: true, //slotMinutes: 15, events: function (start, end, timezone, callback) { $.ajax({ url: "/calendar/getmeetings/", type: 'GET', dataType: 'json', success: function (start, end, timezone, callback) { alert('success'); }, error: function (start, end, timezone, callback) { alert('there was an error while fetching events!'); }, data: { // our hypothetical feed requires UNIX timestamps start: start.unix(), end: end.unix() } }); } }); }); </script> } </head> <br /> <div class="jumbotron"> <h1>Event Calendar</h1> <div id="calendar"></div> </div>
2 个解决方案
解决方案1
1 已采纳 2018-02-05 14:56:22
You are not following the tutorial particularly closely, I note, and are using a different methodology to fetch the events. 我注意到，您没有特别仔细地阅读本教程，并且正在使用不同的方法来获取事件。
Within that, you simply forgot to pass the event list back to fullCalendar. 在其中，您只是忘了将事件列表传递回fullCalendar。 You need to execute the callback function which fullCalendar provided to you, and supply your events to it. 您需要执行fullCalendar提供给您的回调函数，并为其提供事件。
Your definition of "success" and "error"'s callback parameters are nonsense, btw - you need to check the jQuery $.ajax documentation ( http://api.jquery.com/jquery.ajax/ ) to see what is provided: 顺便说一句，您对“成功”和“错误”的回调参数的定义是胡说八道-您需要查看jQuery $ .ajax文档（ http://api.jquery.com/jquery.ajax/ ）以查看提供的内容：
success: function (response) { //response will contain the JSON data from the server
callback(response); //pass the data to fullCalendar. You can pass "response" directly, assuming the response directly contains a JSON array of events
},
error: function(jqXHR) {
alert(jqXHR.responseText);
}
See https://fullcalendar.io/docs/event_data/events_function/ for more details. 有关更多详细信息，请参见https://fullcalendar.io/docs/event_data/events_function/ 。
解决方案2
0 2018-05-23 09:01:44
You are not passing the events in a right way try passing the events my way its simple.If in case u still didn't get the calendar u need to check the console for some exception. 您没有以正确的方式传递事件，请尝试以简单的方式传递事件。如果万一您仍然无法获取日历，则需要检查控制台是否有异常。 Before passing the events u need the push the data to events. 在传递事件之前，您需要将数据推送到事件。
event_array.push({
userid: v.UserId,
start: moment(v.LoginTime),
//end: moment(v.LogoutTime)
//start: moment(v.start),
end: v.LogoutTime != null ? moment(v.LogoutTime) : null
//color: v.themecolor,
//allday: v.isfullday
});
and then u need to call that in calender id for example 然后您需要以日历编号调用它，例如
function GenerateCalender(event_array) {
debugger;
//$('#calender').fullCalendar('destroy');
$('#calender').fullCalendar({
events: event_array
});
}
This is my full code- 这是我的完整代码-
var event_array = [];
var event_array = [];
var selectedEvent = null;
FetchEventAndRenderCalendar();
function FetchEventAndRenderCalendar() {
events = [];
$.ajax({
url: "/Home/GetEvents",
data: "",
type: "GET",
dataType: "json",
async: false,
cache: false,
success: function (data) {
alert("success");
$.each(data, function (i, v) {
event_array.push({
userid: v.UserId,
start: moment(v.LoginTime),
//end: moment(v.LogoutTime)
//start: moment(v.start),
end: v.LogoutTime != null ? moment(v.LogoutTime) : null
//color: v.themecolor,
//allday: v.isfullday
});
})
GenerateCalender(event_array);
},
error: function (error) {
alert('failed');
}
})
}
function GenerateCalender(event_array) {
debugger;
//$('#calender').fullCalendar('destroy');
$('#calender').fullCalendar({
events: event_array
});
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.