标题和日历其余部分之间的间隙

Question

我在 asp.net mvc应用程序中渲染完整日历时遇到问题。我正在使用的库是Fullcalendar jquery。 如图下方的箭头所示，时间之间的蓝色事件日期范围实际上是在上午 12 点到凌晨 1 点之间，但在标记为蓝色的日历事件中超过 1 点。为什么？似乎也存在某种差距，如上面的箭头所示，标题和日历的其余部分之间。请参阅picture_1.请参阅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没有附带的引导.js依赖关系，就像MVC的更高版本(例如MVC5(一样。似乎完整日历jquery以某种方式连接或依赖于引导程序.js因为在我安装booststrap.js(通过Nugget(并将其包含在我的MVC4 procjet之后的那一刻，问题解决了。