0
我在fullcalender中添加了一個新事件。該事件在「日」視圖中顯示時顯示爲一個div，但當視圖更改爲「Week」時顯示爲兩個附加div。Jquery Fullcalender事件在周視圖中顯示兩次
這裏是我的腳本代碼：
@model Alis.AgentPortal.Models.MeetingVM
@using Alis.AgentPortal.Helpers
@{
ViewBag.Title = "Calender";
Layout = "~/Views/Shared/_LayoutforMarketRep.cshtml";
}
@section scripts{
@Styles.Render("~/Content/Calender")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/scripts")
}
<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({
cache: false
});
function SetValidate() {
var valMessage1 = "";
if ($("#eventTitle").val() == "") {
valMessage1 = valMessage1 + "Please enter subject.";
valMessage1 = valMessage1 + "\n";
}
if ($("#eventDate").val() == "") {
valMessage1 = valMessage1 + "Please enter effective date.";
valMessage1 = valMessage1 + "\n";
}
//if ($("#Status").val() == "") {
// valMessage1 = valMessage1 + "Please enter Meeting Status.";
// valMessage1 = valMessage1 + "\n";
//}
var Req = $('#whoRequired').find(":selected").text();
if (Req == null || Req == "") {
valMessage1 = valMessage1 + "Please enter required person.";
valMessage1 = valMessage1 + "\n";
}
var numbers = /^[0-9]+$/;
if (!$('#eventDuration').val().match(numbers)) {
valMessage1 = valMessage1 + "Please enter appointment length in numeric.";
valMessage1 = valMessage1 + "\n";
}
return valMessage1;
}
$("#btnPopupSave").click(function() {
if (SetValidate() != "") {
alert(SetValidate());
}
else {
$('#popupEventForm').hide();
var blkstr = "";
$.each($("#whoRequired").val(), function (idx2, val2) {
blkstr = val2 + "," + blkstr;
});
var Reminder = "";
if ($('#chkReminder').prop('checked')) {
Reminder = true;
} else {
Reminder = false;
}
var dataRow = {
'MeetingId': $('#MeetingId').val(),
'Title': $('#eventTitle').val(),
'NewEventTime': $('#eventTime').val(),
'WhoRequired': blkstr,
'Descripttion': $('#txtdescription').val(),
'Status': $('#Status').val(),
'NewEventDate': $('#eventDate').val(),
'Remider': Reminder,
'NewEventDuration': $('#eventDuration').val(),
'Notes': $('#txtnotes').val(),
}
ClearPopupFormValues();
$.ajax({
type: 'POST',
url: "/Calender/SaveEvent",
data: dataRow,
success: function (response) {
if (response == 'True') {
$('#calendar').fullCalendar('refetchEvents');
alert('New event saved!');
}
else {
alert('Error, could not save event!');
}
}
});
}
});
var sourceFullView = { url: '/Calender/GetDiaryEvents/' };
var sourceSummaryView = { url: '/Calender/GetDiarySummary/' };
var CalLoading = true;
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaDay',
editable: true,
allDaySlot: false,
selectable: true,
slotMinutes: 15,
events: '/Calender/GetDiaryEvents/',
eventClick: function (calEvent, jsEvent, view) {
ShowEventDetails(calEvent.id);
//alert(JSON.stringify(calEvent));
//alert('You clicked on event id: ' + calEvent.id
// + "\nSpecial ID: " + calEvent.someKey
// + "\nAnd the title is: " + calEvent.title);
},
eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
if (confirm("Confirm move?")) {
UpdateEvent(event.id, event.start);
}
else {
revertFunc();
}
},
eventResize: function (event, dayDelta, minuteDelta, revertFunc) {
if (confirm("Confirm change appointment length?")) {
UpdateEvent(event.id, event.start, event.end);
}
else {
revertFunc();
}
},
dayClick: function (date, allDay, jsEvent, view) {
$('#eventTitle').val("");
$('#eventDate').val($.fullCalendar.formatDate(date, 'dd/MM/yyyy'));
$('#eventTime').val($.fullCalendar.formatDate(date, 'HH:mm'));
ShowEventPopup(date);
},
viewRender: function (view, element) {
if (!CalLoading) {
if (view.name == 'month') {
$('#calendar').fullCalendar('removeEventSource', sourceFullView);
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', sourceSummaryView);
}
else {
$('#calendar').fullCalendar('removeEventSource', sourceSummaryView);
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', sourceFullView);
}
}
}
});
CalLoading = false;
$('#btnPopupCancel').click(function() {
ClearPopupFormValues();
$('#popupEventForm').hide();
});
$('#btnInit').click(function() {
$.ajax({
type: 'POST',
url: "/Calender/Init",
success: function (response) {
if (response == 'True') {
$('#calendar').fullCalendar('refetchEvents');
alert('Database populated! ');
}
else {
alert('Error, could not populate database!');
}
}
});
});
});
function ShowEventDetails(id) {
$.ajax({
type: 'POST',
url: "/Calender/GetDiaryEventsforBinding",
data: { 'id': id },
success: function (data) {
if (data != null) {
$("#MeetingId").val(data.collection[0].MeetingId);
$("#eventTitle").val(data.collection[0].MeetingSubject);
$("#eventDuration").val(data.collection[0].MeetingDuration);
$("#eventDate").val(formatDate(data.collection[0].ScheduledDate));
$("#eventTime").val(formatTime(data.collection[0].ScheduledDate));
var dataReq = data.collection[0].RequiredPersons;
var dataarray = dataReq.split(",");
$("#whoRequired").val(dataarray);
//$("#whoRequired").prop('disabled', 'disabled');
var mstatus = data.collection[0].MeetingStatus;
//alert(JSON.stringify(abc))
//$("#Status").val(data.collection[0].MeetingStatus);
$("#Status option[value= '" + mstatus + "']").attr("selected", "selected");
if (data.collection[0].MeetingRemainder == "0") {
$("#chkReminder").prop('checked', false)
}
else { $("#chkReminder").prop('checked', true) }
$("#txtdescription").val(data.collection[0].MeetingDescription);
$("#txtnotes").val(data.collection[0].Notes);
}
else {
alert('Error, could not populate database!');
}
}
});
//$("#eventDate").val(data.collection.EventStart);
//$("#eventDate").val(data.collection.EventStart);
$('#popupEventForm').show();
}
function ShowEventPopup(date) {
ClearPopupFormValues();
$('#popupEventForm').show();
$('#eventTitle').focus();
}
function ClearPopupFormValues() {
$('#eventID').val('');
$('#eventTitle').val('');
$('#txtdescription').val('');
$('#chkReminder').checked
$('#eventDuration').val('');
$('#txtNotes').val('');
$('#whoRequired').val('');
}
function UpdateEvent(EventID, EventStart, EventEnd) {
var dataRow = {
'ID': EventID,
'NewEventStart': EventStart,
'NewEventEnd': EventEnd
}
$.ajax({
type: 'POST',
url: "/Calender/UpdateEvent",
dataType: "json",
contentType: "application/json",
data: JSON.stringify(dataRow)
});
}
</script>
<link href="~/Content/Calender/fullcalendar.css" rel="stylesheet" />
<script src="~/Scripts/fullcalendar.js"></script>
我已經盡了全力，但失敗了。請幫我解決這個問題。
感謝您的想法....你是對的。 – Janty