FullCalendar - 一天内显示所有事件

问题描述

我正在用 c# 制作 ASP NET MVC 项目,我想使用 FullCalendar 为工作人员安排日程。 当我创建一个新事件时,它总是在同一天写入,但数据库中的日期是正确的。我不知道我在哪里犯了错误或如何修复它。

我的 FullCalendar 代码是:

    <script>
        $(document).ready(function () {
            var events = [];
            var selectedEvent = null;
            FetchEventAndRenderCalendar();
            function FetchEventAndRenderCalendar() {
                events = [];
                $.ajax({
                    type: "GET",url: "/Schedule/GetEvents",success: function (data) {
                        $.each(data,function (i,v) {
                            events.push({
                                eventID: v.EventID,title: v.Worker,description: v.Description,start: moment(v.Start),end: v.End != null ? moment(v.End) : null,color: v.ThemeColor,allDay: v.IsFullDay
                            });
                        })

                        GenerateCalender(events);
                    },error: function (error) {
                        alert('Failed');
                    }
                })
            }

            function GenerateCalender(events) {
                $('#calender').fullCalendar('destroy');
                $('#calender').fullCalendar({
                    contentHeight: 400,defaultDate: new Date(),timeFormat: 'h(:mm)a',header: {
                        left: 'prev,next today',center: 'title',right: 'month,basicWeek,basicDay,agenda'
                    },eventLimit: false,eventColor: '#378006',events: events,eventClick: function (calEvent,jsEvent,view) {
                        selectedEvent = calEvent;
                        $('#myModal #eventTitle').text(calEvent.title);
                        var $description = $('<div/>');
                        $description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
                        if (calEvent.end != null) {
                            $description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
                        }
                        $description.append($('<p/>').html('<b>Description:</b>' + calEvent.description));
                        $('#myModal #pDetails').empty().html($description);

                        $('#myModal').modal();
                    },selectable: true,select: function (start,end) {
                        selectedEvent = {
                            eventID: 0,title: '',description: '',start: start,end: end,allDay: false,color: ''
                        };
                        openAddEditForm();
                        $('#calendar').fullCalendar('unselect');
                    },editable: true,eventDrop: function (event) {
                        var data = {
                            EventID: event.eventID,Worker: event.title,Start: event.start.format('DD/MM/YYYY HH:mm A'),End: event.end != null ? event.end.format('DD/MM/YYYY HH:mm A') : null,Description: event.description,ThemeColor: event.color,IsFullDay: event.allDay
                        };
                        SaveEvent(data);
                    }
                })
            }

            $('#btnEdit').click(function () {
                //Open modal dialog for edit event
                openAddEditForm();
            })
            $('#btnDelete').click(function () {
                if (selectedEvent != null && confirm('Are you sure?')) {
                    $.ajax({
                        type: "POST",url: '/Schedule/DeleteEvent',data: { 'eventID': selectedEvent.eventID },success: function (data) {
                            if (data.status) {
                                //Refresh the calender
                                FetchEventAndRenderCalendar();
                                $('#myModal').modal('hide');
                            }
                        },error: function () {
                            alert('Failed');
                        }
                    })
                }
            })

            $('#dtp1,#dtp2').datetimepicker({
                format: 'DD/MM/YYYY HH:mm A'
            });

            $('#chkIsFullDay').change(function () {
                if ($(this).is(':checked')) {
                    $('#divendDate').hide();
                }
                else {
                    $('#divendDate').show();
                }
            });

            function openAddEditForm() {
                if (selectedEvent != null) {
                    $('#hdEventID').val(selectedEvent.eventID);
                    $('#txtWorker').val(selectedEvent.title);
                    $('#txtStart').val(selectedEvent.start.format('DD/MM/YYYY HH:mm A'));
                    $('#chkIsFullDay').prop("checked",selectedEvent.allDay || false);
                    $('#chkIsFullDay').change();
                    $('#txtEnd').val(selectedEvent.end != null ? selectedEvent.end.format('DD/MM/YYYY HH:mm A') : '');
                    $('#txtDescription').val(selectedEvent.description);
                    $('#ddThemeColor').val(selectedEvent.color);
                }
                $('#myModal').modal('hide');
                $('#myModalSave').modal();
            }

            $('#btnSave').click(function () {
                //Validation/
                if ($('#txtWorker').val().trim() == "") {
                    alert('Worker required');
                    return;
                }
                if ($('#txtStart').val().trim() == "") {
                    alert('Start date required');
                    return;
                }
                if ($('#chkIsFullDay').is(':checked') == false && $('#txtEnd').val().trim() == "") {
                    alert('End date required');
                    return;
                }
                else {
                    var startDate = moment($('#txtStart').val(),"DD/MM/YYYY HH:mm A").toDate();
                    var endDate = moment($('#txtEnd').val(),"DD/MM/YYYY HH:mm A").toDate();
                    if (startDate > endDate) {
                        alert('Invalid end date');
                        return;
                    }
                }

                var data = {
                    EventID: $('#hdEventID').val(),Worker: $('#txtWorker').val().trim(),Start: $('#txtStart').val().trim(),End: $('#chkIsFullDay').is(':checked') ? null : $('#txtEnd').val().trim(),Description: $('#txtDescription').val(),ThemeColor: $('#ddThemeColor').val(),IsFullDay: $('#chkIsFullDay').is(':checked')
                }
                SaveEvent(data);
                // call function for submit data to the server
            })

            function SaveEvent(data) {
                $.ajax({
                    type: "POST",url: '/Schedule/SaveEvent',data: data,success: function (data) {
                        if (data.status) {
                            //Refresh the calender
                            FetchEventAndRenderCalendar();
                            $('#myModalSave').modal('hide');
                        }
                    },error: function () {
                        alert('Failed');
                    }
                })
            }
        })

    </script>

控制器:

    public class ScheduleController : Controller
    {
        // GET: Schedule
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetEvents()
        {
            using (EventsEn dc = new EventsEn())
            {
                var events = dc.Events.ToList();
                return new JsonResult { Data = events,JsonRequestBehavior = JsonRequestBehavior.AllowGet };
            }
        }

        [HttpPost]
        public JsonResult SaveEvent(Event e)
        {
            var status = false;
            using (EventsEn dc = new EventsEn())
            {
                if (e.EventID > 0)
                {
                    //Update the event
                    var v = dc.Events.Where(a => a.EventID == e.EventID).FirstOrDefault();
                    if (v != null)
                    {
                        v.Worker = e.Worker;
                        v.Start = e.Start;
                        v.End = e.End;
                        v.Description = e.Description;
                        v.IsFullDay = e.IsFullDay;
                        v.ThemeColor = e.ThemeColor;
                    }
                }
                else
                {
                    dc.Events.Add(e);
                }

                dc.SaveChanges();
                status = true;

            }
            return new JsonResult { Data = new { status = status } };
        }

        [HttpPost]
        public JsonResult DeleteEvent(int eventID)
        {
            var status = false;
            using (EventsEn dc = new EventsEn())
            {
                var v = dc.Events.Where(a => a.EventID == eventID).FirstOrDefault();
                if (v != null)
                {
                    dc.Events.Remove(v);
                    dc.SaveChanges();
                    status = true;
                }
            }
            return new JsonResult { Data = new { status = status } };
        }

结果看起来:

Fullcalendear View

但在我的数据库中所有日期都是正确的。

enter image description here

错误在哪里?

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)