fullcalendar 停止显示来自控制器 mvc 4 的事件

Question

我对全日历中的简单事件显示有疑问。第一次使用此代码时，此日历向我显示了数据库中的事件，两天后我必须更改一些内容，现在它已完全损坏。感谢您的帮助！

这是我的Calendar.js

$(document).ready(function () {

    GetEvents();

});


function GetEvents()
{

    $('#calendar').fullCalendar({
        theme: false,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: ''
        },
        defaultView: 'month',

        editable: false,

        dataType: "json",

        events: {
            url: '/Calendar/MountLoad',
            type: 'POST',
            data: {
            },
            error: function () {
                alert('there was an error while fetching events!');
            },

            success: function () {

            }
        }

    });

};

这是我的日历控制器

public class CalendarController : Controller
{
    private MountManager mountManager;
    private EmployeeController employeeManager;

    public CalendarController()
    {
        this.mountManager = new MountManager();
        this.employeeManager = new EmployeeController();
    }
    public JsonResult MountLoad()
    {
        var events = mountManager.MountList();
        var eventList = from e in events
                        select new
                        {
                            id = e.Id,
                            place = e.Place,
                            description = e.Description,
                            name = e.Name,
                            DateFrom = e.DateFrom.ToString("s"),
                            DateTo = e.DateTo.ToString("s")

                        };

        return Json(eventList, JsonRequestBehavior.AllowGet);
    }

    public ActionResult Index()
    {
        return View();
    }

}

Answer 1

我建议您更改 ajax 并使用 .map 将您的数据映射到 fullcalendar，如下所示：

function GetEvents()
{
    $.ajax({
        dataType: "json",
        contentType: "application/json",
        data: "{}",
        url: "/Calendar/MountLoad",
        dataType: "json",
        success: function (data) {
            $('#calendar').fullCalendar({
                theme: false,
                header: {
                  left: 'prev,next today',
                  center: 'title',
                  right: ''
                },
                defaultView: 'month',
                editable: false,
                lang: 'en-IN',
                eventLimit: 1,
                eventLimitText: 'More',
                weekMode: 'liquid',
                events: $.map(data, function (item, i) {//This is where you need to take care
                       var event = new Object();
                       event.start = moment(item.DateFrom).utc();
                       event.end = moment(item.DateTo).utc();
                       event.title = item.name;
                       event.brief = item.description;
                       event.place = item.place;
                       event.id=item.id;
                       return event;
                }),

            });

        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            $("#cal_error").text(errorThrown); //Handle Error
        }
   });
}

注意：您需要添加 moment.js 并参考它以供将来的完整日历支持

如有疑问请参考

Answer 2

function task() {
    $.ajax({
        type: "GET",
        url: "/DashBoard/BindTask",
        data:"{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                defaultDate: new Date(),
                // selectable: true,
                //selectHelper: true,
                // select: function (start, end) {
                //    var title = prompt('Title:');
                //    var eventData;
                //    if (title) {
                //        eventData = {
                //            title: title,
                //            start: start,
                //            end: end
                //        };
                //        $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                //    }
                //    $('#calendar').fullCalendar('unselect');
                //},
                //editable: true,
                //eventLimit: true, // allow "more" link when too many events
                events: $.map(data, function (item, i) {
                    var event = new Object();
                    event.Title = item.title;
                    event.Start = new Date(item.start);
                    event.End = new data(item.end);
                    return event;
                }),
            });
        }
    });
    }

Answer 3

function GetEvents() {
        $.ajax({
            dataType: "json",
            contentType: "application/json",
            data: "{}",
            url: "/DashBoard/BindTask",
            dataType: "json",
            success: function (data) {
                var json=JSON.stringify(data);
                console.log(JSON.stringify(data));

                $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    defaultDate: new Date(),
                    select: function (start, end) {
                        var title = prompt('Event Title:');
                        var eventData;
                        if (title) {
                            eventData = {
                                title: title,
                                start: start,
                                end: end
                            };
                            $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                        }
                        $('#calendar').fullCalendar('unselect');
                    },
                    editable: true,
                    eventLimit: true,
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    events: json
                });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $("#cal_error").text(errorThrown); //Handle Error
            }
        });
    }
    function OnSuccess(response) {
        alert(response.d);
    }

fullcalendar 停止显示来自控制器 mvc 4 的事件

fullcalendar stop showing events from controller mvc 4

javascript

jquery

json

fullcalendar

asp.net-mvc-4