Gap between header and rest of calendar - asp.net-mvc

Question

I am having problem with rendering fullcalendar in my asp.net mvc application. Library I am using is Fullcalendar jquery.
As shown by the lower arrow in picture,blue event date range between times is actually between 12 am and 1 am, but in calendar event marked in blue exceeds 1 am. Why? It also seems that there is some kind of a gap as shown by the above arrow between header and the rest of calendar. See the picture_1.See the picture_2
Here is cshtml code:
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' />
Here is javascript code:
#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>
}
Here is css code:
<style>
.fc-sun{
color:#FFF;
background: red;
}
.fc-clear {
clear: none !important;
}
</style>

Answer 1

Sorry for delayed answer, but (I think) I found a solution. I implemented FullCalendar jquery using MVC 4 application in Visual Studio 2013. MVC4 doesn't come with included bootstrap.js dependency,like later versions of MVC (MVC5 for example). It seems that Full Calendar jquery is somehow connected or depended on bootstrap.js becasue the moment after I installed booststrap.js (via Nugget)and included it in my MVC4 procjet the problem solved.