團隊,jquery完整日曆 - 單擊prev和next時將月份名稱作爲參數傳遞給數據庫
我是jquery和C#的新手。我正在嘗試將jquery完整的日曆插件與C#中的代碼整合,以顯示公司資源佔用的葉子。數據庫中有超過10,000條記錄,我希望按照會計年度和財政月度進行過濾。因此,我想當我點擊prev和next按鈕時,將兩個參數傳遞給C#db代碼(年和月)。
我能夠顯示在日曆上從DB第500行(我想我不能顯示更重要的是 - 似乎是一個限制)
下面是代碼
js代碼
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "POST",
contentType: "application/json",
data: "{}",
url: "CalendarPage.aspx/GetEvents",
dataType: "json",
success: function (data) {
$('div[id*=fullcal]').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: $.map(data.d, function (item, i) {
//var eventsUrl = '/events/' + end.year() + '/' + parseInt(end.month());
var event = new Object();
event.id = item.EventID;
event.start = new Date(item.StartDate);
event.end = new Date(item.EndDate);
event.title = item.EventName;
event.url = item.Url;
event.ImageType = item.ImageType;
return event;
}), eventRender: function (event, eventElement) {
if (event.ImageType) {
if (eventElement.find('span.fc-event-time').length) {
eventElement.find('span.fc-event-time').before($(GetImage(event.ImageType)));
} else {
eventElement.find('span.fc-event-title').before($(GetImage(event.ImageType)));
}
}
},
loading: function (bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
}
});
$('#loading').hide();
$('div[id*=fullcal]').show();
});
function GetImage(type) {
if (type == 0) {
return "<br/><img src = 'Styles/Images/attendance.png' style='width:24px;height:24px'/><br/>"
}
else if (type == 1) {
return "<br/><img src = 'Styles/Images/not_available.png' style='width:24px;height:24px'/><br/>"
}
else
return "<br/><img src = 'Styles/Images/not_available.png' style='width:24px;height:24px'/><br/>"
}
</script>
C#代碼
[WebMethod]
public static IList GetEvents()
{
Leave_Management_Leave_TakenTableAdapter LTTA = new Leave_Management_Leave_TakenTableAdapter();
DB.Leave_Management_Leave_TakenDataTable LTTbl = null;
**LTTbl = LTTA.GetForCalendar("I wish to put the parameters here");**
IList events = new List<Event>();
foreach(DataRow dr in LTTbl.Rows)
{
events.Add(new Event
{
EventName = dr["Fullname"] + " Leave",
// DateTime dt = ,
StartDate = DateTime.Parse(dr["leave_days"].ToString()).ToString("MM-dd-yyyy")
});
}
return events;
}
任何人都可以請建議什麼變化?
感謝您的更新。我已經嘗試過..但是,當我點擊左上角的上一個/下一個按鈕後,我會需要。當我單擊prev下一個按鈕時,GetEvents webservice方法不會接到呼叫。有沒有辦法做到這一點? –
而不是進行ajax調用,然後初始化日曆允許日曆自己做。如果您將日曆的events選項設置爲您的url並從web方法返回json,它仍然會像您期望的那樣填充日曆,但是當您單擊上一個或下一個時,它將調用傳遞2 GET參數的相同url。如果你看看我提供的答案中的鏈接,可以進一步解釋這一點。 –
感謝您的解決方案。我實現了你的並通過了它。不過,我找到了更多的方法。它的工作原理是一個簡單的解決方案,以在日曆中引入最大數量的事件。請注意,最多隻有500個活動被填充,我覺得這是對照的限制。解決方案如下所述。 –