我一直在努力解决这个问题。我无法将事件绑定到我的fullcalendar。我不知道该怎么做。我读过很多关于绑定但没有成功的文章。我的数据没有加载,我没有收到任何错误。我的问题是我需要为我的活动创建自定义绑定吗?
视图模型
function CalendarVM() {
this.calendarViewModel = ko.observable();
this.viewDate = ko.observable(Date.now());
// Observable functions
this.LoadCalendar = function (events) {
var self = this;
//alert(self.calendarEvents().length);
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
theme: true,
selectable: true,
selectHelper: true,
editable: true,
viewDate: self.viewDate,
defaultView: 'month',
eventLimit: true, // allow "more" link when too many events
select: function (start, end, allDay) {
// Show modal
$('#myModal').modal('show');
self.SelectedDate(formatDate(start));
},
events: function (start, end, timezone, callback) {
$.ajax({
type: 'GET',
url: '/Admin/GetCalendarEvents',
dataType: 'json',
contentType: 'application/json',
success: function (result) {
var events = [];
if (result != undefined && result.length > 0) {
result.forEach(function (entry) {
var sDate = formatDate(eval(entry.StartDate.replace(/\/Date\((\d+)\)\//gi, "new Date($1)")));
if (sDate != 'NaN-NaN-NaN') {
events.push({
title: entry.Title,
start: sDate,
end: formatDate(eval(entry.EndDate.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))),
allDay: entry.AllDay
});
}
});
//self.calendarEvents(ko.utils.unwrapObservable(ko.mapping.fromJS(events)));
}
console.log(events);
callback(events);
}
});
},
//events,
// add event name to title attribute on mouseover
eventMouseover: function (event, jsEvent, view) {
if (view.name !== 'agendaDay') {
$(jsEvent.target).attr('title', event.title);
}
}
});
};
};
JQUERY
$(document).ready(function () {
// Activates Knockout
var vm = new CalendarVM();
ko.applyBindings(vm);
vm.LoadCalendar();
});
HTML
<div id="calendar" data-bind="fullCalendar: calendarViewModel" class="fc fc-ltr fc-unthemed">
</div>
代码背后
[HttpGet]
public JsonResult GetCalendarEvents()
{
calendarRepo = new CalendarRepository();
return Json(calendarRepo.GetCalendarEvents(),JsonRequestBehavior.AllowGet);
}
答案 0 :(得分:3)
您的代码的主要问题是,在您的成功功能中,将所有数据推送到本地events
变量并且您不会使用它。
您应该将GetEvents方法更改为以下内容:
this.GetEvents = function (start, end, timezone, callback) {
var self = this;
$.ajax({
type: 'GET',
url: '/Admin/GetCalendarEvents',
dataType: 'json',
contentType: 'application/json',
success: function (result) {
var events = [];
if (result != undefined && result.length > 0) {
result.forEach(function (entry) {
events.push({
title: entry.Title,
start: entry.startDate,
end: entry.endDate
});
});
callback(events);
}
},
error: function (err) {
if (err.responseText == "success") {
self.EquiptingTracks(result);
}
else {
alert(err.responseText);
}
}
});
};
另外你应该在初始化中调用该函数 - 只需传递它:
events: vm.GetEvents
答案 1 :(得分:1)
好的,这是我对此的建议。
在此fiddle上,有一个为日历构建自定义绑定的示例。
您需要的是以下内容:
ko.fullCalendar = {
// Defines a view model class you can use to populate a calendar
viewModel: function(configuration) {
this.events = configuration.events;
this.header = configuration.header;
this.editable = configuration.editable;
this.viewDate = configuration.viewDate || ko.observable(new Date());
}
};
// The "fullCalendar" binding
ko.bindingHandlers.fullCalendar = {
// This method is called to initialize the node, and will also be called again if you change what the grid is bound to
update: function(element, viewModelAccessor) {
var viewModel = viewModelAccessor();
element.innerHTML = "";
$(element).fullCalendar({
events: ko.utils.unwrapObservable(viewModel.events),
header: viewModel.header,
editable: viewModel.editable
});
$(element).fullCalendar('gotoDate', ko.utils.unwrapObservable(viewModel.viewDate));
}
};
这就是你如何使用它
<div data-bind="fullCalendar: calendarViewModel"> </div>
将您的代码修改为以下内容:
var vm = function() {
var self = this;
self.calendarViewModel = ko.observable();
self.viewDate = ko.observable(Date.now());
self.GetEvents = function () {
$.ajax({
type: 'GET',
url: '/Admin/GetCalendarEvents',
dataType: 'json',
contentType: 'application/json',
success: function (result) {
var events = [];
if (result != undefined && result.length > 0) {
result.forEach(function (entry) {
events.push({
title: entry.Title,
start: entry.startDate,
end: entry.endDate
});
});
self.calendarViewModel(new ko.fullCalendar.viewModel({
events: events,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
viewDate: self.viewDate
}));
}
},
error: function (err) {
}
});
}
}
代码尚未经过测试,如果您遇到问题,请告诉我们,然后我们就可以解决它们。