Fullcalendar停止显示控制器MVC 4中的事件

fullcalendar stop showing events from controller mvc 4

本文关键字：事件 MVC 控制器 显示 Fullcalendar      更新时间：2023-09-26

我有一个问题，简单的事件显示在完整的日历。当我第一次使用这个代码时，这个日历从数据库中显示我的事件，两天后我必须改变一些东西，现在它完全坏了。谢谢你的帮助!

This is my 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();
    }
}

我建议您更改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并参考它以获得未来的完整日历支持

如果你有任何疑问，请参考这个问题

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

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;
                }),
            });
        }
    });
    }
相关文章：