-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午後1時です。あなたはあなたの問題についてより正確になりますか？ 「選択」コールバックが実行されたときに実際の時刻はどのように報告されますか？ – ADyson
"" select "コールバックが実行されたときに実際に何回報告されるのですか？午前12時の開始日から午前1時の終了日までの日付範囲を報告します。カレンダーの日付範囲が何らかの形でシフトされていて、少し午前1時を超えていますが、非常に目立ちます。私の編集した質問のPicture_2を見てください。私は青でマークされた選択をしました。提出されたPocetakは開始日であり、Krajフィールドは選択が返却された日の終了日です。カレンダーでは2:00を超えていますが、Krajテキストフィールドには2:00と表示されています。 – Lotus