Question

我一直在努力解决这个问题。我无法将事件绑定到我的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);
}

Answer 1

您的代码的主要问题是，在您的成功功能中，将所有数据推送到本地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

Answer 2

好的，这是我对此的建议。

在此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) {

            }
        });
    }
}

代码尚未经过测试，如果您遇到问题，请告诉我们，然后我们就可以解决它们。

使用KnockoutJS加载日历事件

2 个答案: