Question

我无法在我的日历中查看月份部分的结束时间。我已经尝试了许多仍然无法修复它的示例。我可以在选择日期部分时查看结束时间。例如检查这些截图

这是我的观看代码：

@section Scripts{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"> </script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <script>
        $(document).ready(function () {
            debugger;

            var event_array = [];

            var selectedEvent = null;
            FetchEventAndRenderCalendar();
            function FetchEventAndRenderCalendar() {
                events = [];

                $.ajax({
                    url: "/Home/GetEvents",
                    //data: { 'id': selectedId },
                    type: "GET",
                    dataType: "json",
                    async: true,
                    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),
                                allDay: true,
                                eventAfterRender: function (event, $el, view) {
                                    $el.removeClass('fc-short');
                                }

                            });

                        })

                        GenerateCalender(event_array);
                    },
                    error: function (error) {
                    alert('failed');
                }
            })
        }

        function GenerateCalender(event_array) {

            //$('#calender').fullCalendar('destroy');
            $('#calendar').empty();
            $('#calender').fullCalendar({
                contentHeight: 400,
                defaultDate: new Date(),
                timeFormat: 'h(:mm)a',
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay,agenda'
                },
                eventLimit: true,
                eventColor: '#378006',
                events: event_array,
                eventClick: function (calEvent, jsEvent, view) {
                    selectedEvent = calEvent;
                    $('#myModal #eventTitle').text(calEvent.userid);
                    var $description = $('<div/>');
                    $description.append($('<p/>').html('<b>LoginTime:</b>' + calEvent.logintime.format("DD-MMM-YYYY HH:mm a")));
                    if (calEvent.end != null) {
                        $description.append($('<p/>').html('<b>LogoutTime:</b>' + calEvent.logouttime.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 (logintime, logouttime) {
                selectedEvent = {
                    userid: 0,
                    logintime: logintime,
                    logouttime: logouttime,
                    allDay: true

                };
                openAddEditForm();
                $('#calendar').fullCalendar('unselect');
            },
            editable: true,
            eventDrop: function (event) {
                var data = {
                    UserId: event.userid,
                    LoginTime: event.logintime.format('DD/MM/YYYY HH:mm A'),
                    //LogoutTime: event.logouttime.format('DD/MM/YYYY HH:mm A'),
                    LogoutTime: event.logouttime.format('DD/MM/YYYY HH:mm A') 

                };
                SaveEvent(data);
                }

            });
        }

    });
    </script>
}

这是我的控制器代码：

public JsonResult GetEvents()
{
    string username = User.Identity.Name;
    int isessionid = Convert.ToInt32(Session["userid"]);
    List<SelectListItem> userList = Getuser();
    if (isessionid == 0)
    {
        return null;
    }
    else
    {

        //int userid = int.Parse(username);

        RegMVCEntities svc = new RegMVCEntities();
        svc.Configuration.ProxyCreationEnabled = false;
        svc.Configuration.LazyLoadingEnabled = false;
        // var oCampaigns = svc.User_LogTime;
        var oReturn =
            (from c in svc.User_LogTime.AsEnumerable()
            where c.UserId == isessionid
            select new 
            {
                LoginTime = c.LoginTime,
                Logouttime = c.LogoutTime
            }).ToList();
        //var events = dc.User_LogTime.ToList();
        //dc.Configuration.ProxyCreationEnabled = false;
        //   dc.Configuration.LazyLoadingEnabled = false;
        return new JsonResult { Data = oReturn.ToList(), JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }



}

我已尝试This Link中的修复程序，但它仍无效。

Answer 1

您只需将allday值更改为false

selectedEvent = {
    userid: 0,
    logintime: logintime,
    logouttime: logouttime,
    allDay: false
};

Answer 2

我已经通过添加

修复了它

displayEventEnd: true

在我的代码中。这是我的代码

  $('#calender').fullCalendar({
                                contentHeight: 400,
                                displayEventEnd: true,

                                defaultDate: new Date(),
                                timeFormat: 'h(:mm)a',
                                header: {
                                    left: 'prev,next today',
                                    center: 'title',
                                    right: 'month,basicWeek,basicDay,agenda'
                                },

Answer 3

更新您的GenerateCalender功能：

 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: true,
                                        eventColor: '#378006',
                                        events: events,
                                        eventClick: function (calEvent, jsEvent, view) {

                                            $('#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));
                                            $description.append($('<p/>').html('<b>Status :  </b>' + calEvent.Status));
                                            $('#myModal #pDetails').empty().html($description);

                                            $('#myModal').modal();
                                        }

如何在完整日历中的月份部分中显示结束时间

3 个答案: