-1
我在我的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>
您必须至少包含用于渲染此日历的cshml部分，相关的css，并且还要提及它来自哪个库。 –
“如图中的下箭头所示，两次之间的蓝色事件日期范围实际上是在上午12点到凌晨1点之间”。是吗？在你所展示的照片上，箭头显然在下午1点左右，蓝色区域也是如此。你能更准确地解答你的问题吗？当“select”回调运行时，什么时候会得到报告？ “ – ADyson
”在“select”回调运行时会报告什么实际时间？“它报告的日期范围从早上12点到结束日期凌晨1点。就好像日历上显示的日期范围不知怎么改变了一样，它稍微超过了1点 - 但非常明显。请在我编辑的问题中查看Picture_2。我做了一个标记为蓝色的选择。 Pocetak提交日期是开始日期，而Kraj字段是选择返回的日期结束日期。您可以在日历中看到超过2点，但在Kraj文本字段中显示为2:00。 – Lotus