Question

我在asp.net mvc应用程序中渲染fullcalendar时遇到问题。我正在使用的库是Fullcalendar jquery。如图中的下箭头所示，蓝色事件日期之间的时间范围实际上是在上午12点到凌晨1点之间，但在日历中，以蓝色标记的事件超过凌晨1点。为什么？似乎还有某种间隙，如标题和日历其余部分之间的上箭头所示。 See the picture_1。See the picture_2

这是cshtml代码：

    model OrdinacijaS.Termin

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

<fieldset>
    <legend>Termin</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.Pocetak)
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.Pocetak, new { id = "textBoxPocetak" })
        @Html.ValidationMessageFor(model => model.Pocetak)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Kraj)
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.Kraj, new { id = "textBoxKraj" })
        @Html.ValidationMessageFor(model => model.Kraj)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Pacijent_PacijentId, "Pacijent")
    </div>
    <div class="editor-field">
        @Html.DropDownList("Pacijent_PacijentId", String.Empty)
        @Html.ValidationMessageFor(model => model.Pacijent_PacijentId)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Zahvat_ZahvatId, "Zahvat")
    </div>
    <div class="editor-field">
        @Html.DropDownList("Zahvat_ZahvatId", String.Empty)
        @Html.ValidationMessageFor(model => model.Zahvat_ZahvatId)
    </div>

    <p>
        <input type="submit" value="Create" id="submitButton" />
    </p>
</fieldset>
}



<div>
    @Html.ActionLink("Back to List", "Index")
</div>

<div id="calendar"></div>

@*<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />@
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print" />*@

<link href='/Content/fullcalendar.css' rel='stylesheet' /> 
<link href='/Content/fullcalendar.print.css' rel='stylesheet' media='print' />

这是javascript代码：

@section Scripts {
    @*@Scripts.Render("~/bundles/jqueryval")*@

@*<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" rel="stylesheet"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js" rel="stylesheet"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/locale/hr.js" rel="stylesheet"></script>*@
<script src='Scripts/jquery.min.js' rel="stylesheet"></script>
<script src='Scripts/moment.min.js' rel="stylesheet"></script>
<script src='Scripts/fullcalendar/fullcalendar.js' rel="stylesheet"></script>
    <script>

        $(document).ready(function(myevents){
            var myevents = [];
            $.ajax({
                cache: false,
                type: "GET",
                asyc:false,
                url: "/Termin/getTermin",
                success: function (data) {
                    $.each(data, function (i, v) {                       

                        myevents.push({
                            title: v.Ime,
                            description: "some description",
                            start: moment(v.Pocetak),
                            end: v.Kraj != null ? moment(v.Kraj) : null,
                            color: "#378006",
                            allDay: false
                        });

                    })
                    alert(myevents.length);
                    GenerateCalendar(myevents);

                },
                error: function (error) {
                    alert(error);
                }
            })
        })

        GenerateCalendar();
            function GenerateCalendar(myevents) {
                $('#calendar').fullCalendar('destroy');
                $('#calendar').fullCalendar({


                    defaultDate: new Date(),
                    defaultView: 'agendaWeek',                  
                    timeFormat: 'h(:mm)a',
                    header: {

                        left: 'prev, next, today',
                        center: 'title',    
                        right: 'month, basicWeek, basicDay, agenda'
                    },

                    eventLimit: true,
                    eventColor: "#378006",                 
                    events: myevents,
                    selectable: true,
                    allDaySlot: false,

                    select: function(start, end, allDay) {
                        endtime = moment(end).format('YYYY/MM/DD hh:mm');
                        starttime = moment(start).format('YYYY/MM/DD hh:mm');
                        var mywhen = starttime + ' - ' + endtime;

                        $("#textBoxPocetak").val(starttime);
                        $("#textBoxKraj").val(endtime);

                    },
                    businessHours: {

                        dow: [1, 2, 3, 4], 

                        start: '8:00am',
                        end: '4:00pm', 
                    }

                })

            }
            $("#submitButton").on('click', function () { 

                //var myEvent = [];

                //myEvent.push({
                //    title: 'Long Event',
                //    start: '2017-08-08T08:30:00',
                //    end: '2017-08-08T09:30:00'
                //}); 


                //myEvent = {
                //    title: 'Long Event',
                //    start: '2017/08/08 08:30',
                //    end: '2017/08/08 09:30'
                //};
                //$('#calendar').fullCalendar('renderEvent', myEvent, 'stick');

                //myEvent = {
                //    title: 'Long Event',
                //    start: $('#textBoxPocetak').val(), 
                //    end: $('#textBoxKraj').val()
                //};


                //$('#calendar').fullCalendar('renderEvent',myEvent,true);

                //$('#calendar').fullCalendar('renderEvent', {
                //    title: 'Long Event',
                //    start: '2017-08-08T08:30:00',
                //    end: '2017-08-08T09:30:00'
                //}, true);

                //$("#calendar").fullCalendar('addEventSource', myEvent);
                //$('#calendar').fullCalendar('updateEvent', myEvent);



            });
    </script>


}

这是css代码：

<style>
    .fc-sun{ 
    color:#FFF; 
    background: red;
}
 .fc-clear { 
    clear: none !important; 
}
</style>

Answer 1

很抱歉延迟回答，但（我认为）我找到了解决方案。我在Visual Studio 2013中使用 MVC 4 应用程序实现了FullCalendar jquery.MVC4没有包含bootstrap.js依赖项，就像更高版本的MVC（例如MVC5）。似乎Full Calendar jquery以某种方式连接或依赖于bootstrap.js因为我安装了booststrap.js（通过Nugget）并将其包含在我的MVC4 procjet中，问题解决了。

标题与日历其余部分之间的差距

1 个答案: