fullcalendar.js没有在mvc5中显示来自数据库的事件

时间:2016-11-19 12:34:36

标签: javascript jquery ajax asp.net-mvc-5 fullcalendar

我有一个实体类,如下所示:

 public string Title { get; set; }
    public string Description { get; set; }
    public string  StartDay { get; set; }
    public string StartHour { get; set; }
    public string EndDay { get; set; }
    public string EndHour { get; set; }
    public string Guid { get; set; }  

我发送数据库事件,如下controller

 [HttpPost]
    public JsonResult GetEvents()
    {

        var eventList = from q in _calendarRepository.Table
                        select new
                        {
                            id=q.Id,
                            title=q.Title,
                            description=q.Description,
                            startDate= q.StartDay,
                            startHour=q.StartHour,
                            endDate= q.EndDay,
                            endHour=q.EndHour,
                            guid=q.Guid

                        };
        var rows = eventList.ToList();
        return Json(rows, JsonRequestBehavior.AllowGet);
    }

并且在视图中我有fullcalendar实施如下:

//create Guid
function guid() {
    function s4() {
        return Math.floor((1 + Math.random()) * 0x10000)
          .toString(16)
          .substring(1);
    }
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
      s4() + '-' + s4() + s4() + s4();
}
//ajax request that gets Dates from "Calendar" controller and "Bind" Action
var items = [];
$(document).ready(
    $.ajax({
        url: "/Calender/GetEvents",
        type: 'Post',
        dataType: 'json',
        contentType: 'application/json',
        success: function (result) {
            items = result;
            console.log(items);
            GetEvent();
        },
    })
);
//Calendar Main Script
function GetEvent() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        
        selectable: true,
        selectHelper: true,
        select: function (start, end) {

            //$('#modal-responsive').modal('show');
            document.getElementById("event-title").value = null;
            var title = null;
            $.ajax({
                url: "/Calender/ToPersian",
                type: 'Post',
                data: {
                    start: start,
                    end: end,
                },
                success: function (result) {
                    var startDate = result.SDate.substring(0, 11);
                    var startHour = result.SDate.substring(11, 23);
                    var endDate = result.EDate.substring(0, 11);
                    var endHour = result.EDate.substring(11, 23);
                    document.getElementById("fromDate1").value = startDate;
                    document.getElementById("field-4").value = startHour;
                    document.getElementById("toDate1").value = endDate;
                    document.getElementById("field-6").value = endHour;
                },
            });
            $(function () {
                $("#modal-event").dialog({
                    resizable: true,
                    height: "auto",
                    width: 800,
                    modal: true,
                    show: {
                        effect: 'fade',
                        duration: 350
                    },
                    hide: {
                        effect: 'fade',
                        duration: 50
                    },
                    buttons: {
                        "save": function () {
                            var title = document.getElementById("event-title").value;
                            var description = document.getElementById("field-3").value;
                            var startHour = document.getElementById("field-4").value;
                            var endDay = document.getElementById("toDate1").value;
                            var endHour = document.getElementById("field-6").value;
                            
                            //start = document.getElementById("fromDate1").value;
                            ////////////////////////////////////////////////////////
                            $.ajax({
                                url: "/Calender/ToGregorian",
                                type: 'Post',
                                async: false,
                                data: {
                                    start: document.getElementById("fromDate1").value + ' ' + document.getElementById("field-4").value,
                                    end: document.getElementById("toDate1").value + ' ' + document.getElementById("field-6").value,
                                },
                                success: function (result) {
                                    var mystart = result.SDate;
                                    var myend = result.EDate;
                                    start = mystart;
                                    end = myend;
                                }
                            });

                            ////////////////////////////////////////////////////////
                            if (title) {
                                var uid = guid();
                                $.ajax({
                                    url: "/Calender/Save",
                                    type: 'Post',
                                    data: {
                                        Title: title,
                                        Description: description,
                                        StartDay: start,
                                        StartHour: startHour,
                                        EndDay: end,
                                        EndHour: endHour,
                                        EventGuid:uid
                                    }
                                });
                                calendar.fullCalendar('renderEvent',
                                    {
                                        id:uid,
                                        title: title,
                                        start: start,
                                        end: end
                                       
                                    },
                                    true // make the event "stick"

                                );

                                $(this).dialog("close");
                                $('.fc-event-inner').attr({ 'data-start': start, 'data-end': end });
                                $('.fc-event-inner').uniqueId();
                            }

                            calendar.fullCalendar('unselect');
                            $(this).dialog("close");
                        },
                        "close": function () {
                            calendar.fullCalendar('unselect');
                            $(this).dialog("close");
                        }
                    }
                });
            });
        },
        editable: false,
        events: items,
        

        //////////////////////////////////////////////////////////////////////////////////
        ///////////////////////////////////Update Event////////////////////////////////////
        ///////////////////////////////////////////////////////////////////////////////////
        eventClick: function (event, jsEvent, view) {
            var title = event.title;
            var EventStart = event.start;
            var EventEnd = event.end;
            //var eventAllday = event.allDay;
            document.getElementById("toDate1").value = EventEnd;
            $.ajax({
                url: "/Calender/ToPersian",
                type: 'Post',
                data: {
                    start: EventStart,
                    end: EventEnd,
                },
                success: function (result) {
                    var startDate = result.SDate.substring(0, 11);
                    var startHour = result.SDate.substring(11, 23);
                    var endDate = result.EDate.substring(0, 11);
                    var endHour = result.EDate.substring(11, 23);
                    document.getElementById("fromDate1").value = startDate;
                    document.getElementById("field-4").value = startHour;
                    document.getElementById("toDate1").value = endDate;
                    document.getElementById("field-6").value = endHour;

                },
            });
            $(function () {
                $("#modal-event").dialog({
                    resizable: true,
                    height: "auto",
                    width: 800,
                    modal: true,
                    show: {
                        effect: 'fade',
                        duration: 350
                    },
                    hide: {
                        effect: 'fade',
                        duration: 50
                    },
                    buttons: {
                        "save": function () {
                            var title = document.getElementById("event-title").value;
                            var ndescription = document.getElementById("field-3").value;
                            var nstartHour = document.getElementById("field-4").value;
                            var nendHour = document.getElementById("field-6").value;

                            ////////////////////////////////////////////////////////
                            $.ajax({
                                url: "/Calender/ToGregorian",
                                type: 'Post',
                                async: false,
                                data: {
                                    start: document.getElementById("fromDate1").value + ' ' + document.getElementById("field-4").value,
                                    end: document.getElementById("toDate1").value + ' ' + document.getElementById("field-6").value,
                                },
                                success: function (result) {
                                    var mystart = result.SDate;
                                    var myend = result.EDate;
                                    start = mystart;
                                    end = myend;
                                }
                            });

                            ////////////////////////////////////////////////////////
                            if (title) {
                                title = document.getElementById("event-title").value;
                                $.ajax({
                                    url: "/Calender/UpdateEvent",
                                    type: 'Post',
                                    dataType: "Json",
                                    data: {
                                        eventid:event._id,
                                        Title: title,
                                        Description: ndescription,
                                        StartDay: start,
                                        StartHour: nstartHour,
                                        EndDay: end,
                                        EndHour: nendHour,
                                    }
                                });
                                event.id
                                event.start = start;
                                event.end = end;
                                //event.allDay = event.allDay;
                                event.title = title;
                                calendar.fullCalendar('updateEvent', event);
                                $(this).dialog("close");
                                $('.fc-event-inner').attr({ 'data-start': start, 'data-end': end });

                            }

                            calendar.fullCalendar('unselect');
                            $(this).dialog("close");
                        },
                        "close": function () {
                            calendar.fullCalendar('unselect');
                            $(this).dialog("close");
                        }
                    }
                });
            });
        },

        editable: false

    });
};

我在浏览器中获得了对象,但我无法在fullcalendar视图中显示事件。任何人都可以帮助我吗?它的紧急课程。

0 个答案:

没有答案