Fullcalendar-无法获得显示asp.net的事件

Question

我正在尝试实现fullcalender，但无法显示示例数据。 我一直在遵循本指南。

我没有收到任何错误，但事件未显示在日历中。 我尝试了不同的解决方案，但无法使其正常工作，而且我在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>

Answer 1

我注意到，您没有特别仔细地阅读本教程，并且正在使用不同的方法来获取事件。

在其中，您只是忘了将事件列表传递回fullCalendar。 您需要执行fullCalendar提供给您的回调函数，并为其提供事件。

顺便说一句，您对“成功”和“错误”的回调参数的定义是胡说八道-您需要查看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);
}

有关更多详细信息，请参见https://fullcalendar.io/docs/event_data/events_function/ 。

Answer 2

您没有以正确的方式传递事件，请尝试以简单的方式传递事件。如果万一您仍然无法获取日历，则需要检查控制台是否有异常。 在传递事件之前，您需要将数据推送到事件。

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

然后您需要以日历编号调用它，例如

function GenerateCalender(event_array) {
                            debugger;
                            //$('#calender').fullCalendar('destroy');
                            $('#calender').fullCalendar({

                                events: event_array

                            });
                        }

这是我的完整代码-

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

                        });
                    }

Fullcalendar-无法获得显示asp.net的事件

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-02-05 14:56:22

解决方案2
0 2018-05-23 09:01:44

Fullcalendar-无法获得显示asp.net的事件

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-02-05 14:56:22

解决方案2 0 2018-05-23 09:01:44

解决方案1
1 已采纳 2018-02-05 14:56:22

解决方案2
0 2018-05-23 09:01:44