0
我想基於複選框過濾事件。我回顧了邁克史密斯網站http://www.mikesmithdev.com/demo-fullcalendar-with-event-filtering/]上的代碼示例，但我做的事情有點不同，我無法弄清楚如何使它工作。 我爲我的事件創建了一個函數，在日曆初始化時可以正常工作。我參數化了函數，以便我可以將已選擇的組發送回服務器。但我無法弄清楚如何在更改事件中使用此函數來刷新要顯示的事件。這是工作的罰款我的初始化代碼：fullcalendar添加另一個事件來源
$(document).ready(function() {
// page is now ready, initialize the calendar...
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var groupSelectedArray = [];
$('input[type="checkbox"]').each(function() {
if ($(this).is(":checked")) {
groupSelectedArray.push($(this).val());
}
});
var groupData = { selectedGroups: groupSelectedArray };
$('#calendar').fullCalendar({
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
titleFormat: {month: 'MMMM'},
defaultView: 'month',
editable: false,
eventSources: [
{
events: function (start, end, groupSelectedArray, callback) {
$.ajax({
type: "POST",
url: '@Url.Action("GetAllEvents", "Home")',
data: JSON.stringify(groupData),//{ selectedGroups: groupSelectedArray },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (doc) {
var events = [];
$(doc).each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start'),
end: $(this).attr('end'),
id: $(this).attr('id'),
description: $(this).attr('description'),
color: $(this).attr('color'),
textColor: 'black'
});
});
callback(events);
},
error: function() {
alert("There was an error fetching events!")
}
});
}
}
]
});
這是標記：
<div id="groups" style="float:left; width: 200px; height: 100px">
<div style="border: 2px solid black; background-color: lightblue">
<label><input type="checkbox" checked="checked" name="e1" id="e1" value="1" />Warehouse Group</label>
</div>
<div style ="border: 2px solid black; background-color: red">
<label><input type="checkbox" checked="checked" name="e2" id="e2" value="2" />Interface Group</label>
</div>
</div>
<div id='calendar' style="float:right; width: 75%; height: 75%"></div>
這是後面的代碼，使數據庫調用來獲取事件數據：
private static List<Events> GetEventsFromDatabase(string[] selectedGroups)
{
OnCallEntities onCallDB = new OnCallEntities();
List<Events> eventList = new List<Events>();
int[] selectedGroupIDs = Array.ConvertAll(selectedGroups, int.Parse);
var lstSchedules = (from sch in onCallDB.OnCallSchedules.AsEnumerable()
join techs in onCallDB.OnCallTeches.AsEnumerable() on sch.MemberID equals techs.ID
join grp in onCallDB.OnCallGroups.AsEnumerable() on sch.GroupID equals grp.ID
where selectedGroupIDs.Contains(sch.GroupID)
orderby sch.GroupID, sch.OnCallStartTime
select new { sch.GroupID, grp.Name, sch.ID, grp.GroupColor, techs.FirstName, techs.LastName, sch.OnCallStartTime, sch.OnCallEndTime }).ToList();
foreach (var dr in lstSchedules)
{
Events newEvent = new Events
{
id = dr.ID.ToString(),
title = dr.FirstName.ToString() + " " + dr.LastName.ToString(),
start = Convert.ToDateTime(dr.OnCallStartTime.ToString()).ToString("s"),
end = Convert.ToDateTime(dr.OnCallEndTime.ToString()).ToString("s"),
allDay = true,
description = dr.GroupID.ToString(),
color = dr.GroupColor
};
eventList.Add(newEvent);
}
return eventList;
}
當用戶更改複選框選擇時，我想調用上面的事件函數來更改顯示的事件。我無法弄清楚如何做到這一點。
這是我改變功能：
$('input[type="checkbox"]').on('change', function() {
var groupSelectedArray = [];
$('input[type="checkbox"]').each(function() {
if ($(this).is(":checked")) {
groupSelectedArray.push($(this).val());
}
});
var groupData = { selectedGroups: groupSelectedArray };
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar({
events: function (start, end, groupSelectedArray, callback) {
$.ajax({
type: "POST",
url: '@Url.Action("GetAllEvents", "Home")',
data: JSON.stringify(groupData),//{ selectedGroups: groupSelectedArray },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (doc) {
var events = [];
$(doc).each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start'),
end: $(this).attr('end'),
id: $(this).attr('id'),
description: $(this).attr('description'),
color: $(this).attr('color'),
textColor: 'black'
});
});
callback(events);
},
error: function() {
alert("There was an error fetching events!")
}
});
}
});
$('#calendar').fullCalendar('addEventSource', events);
$('#calendar').fullCalendar('refetchEvents');
});
當使用事件功能，讓您的事件數據，如何使用該功能來獲得改變的數據？ 目前我只有2個活動組，但可能還有其他幾個活動組。我不知道會有多少個事件組，所以我認爲使用參數化函數來獲取事件將是獲取數據的最佳方式。
謝謝。
UPDATE 我刪除功能：
$('#calendar').fullCalendar('addEventSource', events);
。當沒有選中時，這兩個組仍然會顯示。數組中只有一個id。然而，當我進入該方法時，數組有2個ID。
爲什麼在客戶端的javascript中重置參數時不重置參數，但在服務器端它與具有兩個ID的初始數組相同？
UPDATE 我添加了函數'addEventSource'，併爲第二個參數嘗試調用事件函數。數組在客戶端正確設置，但在服務器端代碼中，參數selectedGroupArray爲null。 這是代碼：
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', function (start, end, callback) {
$.ajax({
url: '@Url.Action("GetAllEvents", "Home")',
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(groupData),
success: function (doc) {
var events = [];
$(doc).each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start'),
end: $(this).attr('end'),
id: $(this).attr('id'),
description: $(this).attr('description'),
color: $(this).attr('color'),
textColor: 'black'
});
});
callback(events);
},
error: function() {
alert("There was an error fetching events!")
}
});
});
$('#calendar').fullCalendar('refetchEvents');
如何重置的事件函數的參數數組？ UPDATE 我沒有在ajax調用中定義的'type'。一旦我加入：
type: "POST",
selectedGroupArray參數正在發送正確的值。在代碼後面的代碼GetAllEvents中，在參數中設置了正確的值。事件正確的事件從數據庫中返回。但事件不會顯示在日曆上。日曆上不顯示任何事件。
UPDATE 如果我在取消選中某個組之後重新加載頁面，則頁面上會顯示正確的組。我稱之爲「addEventSources功能後，我曾嘗試加入
$('#calendar').fullCalendar('refetchEvents');
$('#calendar').fullCalendar('renderEvents');
但正確的組仍然不會顯示出來，除非我重新加載頁面。