首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在完整日历的月份部分中显示结束时间

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

Stack Overflow用户
提问于 2018-05-28 18:30:26
回答 3查看 636关注 0票数 0

我无法在日历的月份部分中查看结束时间。我尝试了许多示例,但仍无法修复它。当我选择日section.For示例时,我可以查看我的结束时间检查这些屏幕截图

这是我的视图代码:

代码语言:javascript
复制
@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>
}

这是我的控制器代码:

代码语言:javascript
复制
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中的修复,但它仍然不起作用。

EN

回答 3

Stack Overflow用户

发布于 2018-05-28 19:51:01

我已经修复了它,只需添加

代码语言:javascript
复制
displayEventEnd: true

在我的code.This中是我的代码

代码语言:javascript
复制
  $('#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'
                                },
票数 1
EN

Stack Overflow用户

发布于 2018-05-28 18:33:49

您只需将allday值更改为false

代码语言:javascript
复制
selectedEvent = {
    userid: 0,
    logintime: logintime,
    logouttime: logouttime,
    allDay: false
};
票数 0
EN

Stack Overflow用户

发布于 2018-05-28 19:53:13

更新您的GenerateCalender函数:

代码语言:javascript
复制
 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();
                                        }
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50564325

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档