将日期保持在FullCalendar和索引视图之间

Question

我正在做一个网站，asp.net MVC之类的东西。在主页上，我有两种不同的看法。一个是jquery FullCalendar，另一个是索引视图，两者都显示数据库中的事件。

我目前可以更改在其中一个视图中查看的月份，但我希望能够将它们链接起来，例如，在日历中更改为查看2013年4月，然后单击"索引视图"，我将在索引视图中看到2013年4月份，而不是默认值。

我的"GetEventsForCalendar"方法如下：

[HttpPost]
public virtual ActionResult GetEventsForCalendar(long start, long end)
{
    var startDateTime = start.ToDateTime();
    var endDateTime = end.ToDateTime();
    var listOfEvents = eventRepository.List.Where(e => e.ToDate >= startDateTime
                                                           && e.FromDate <= endDateTime).ToList()                                             .Select(eventSerialiser.SerialiseForFullCalendarJS);
    return Json(listOfEvents);
}

但我在代码库中找不到任何给定这些参数的地方。指定该功能的唯一位置是日历部分视图草稿部分：

@section scripts {
@Scripts.Render(Links.Bundles.Scripts.calendar)
@Scripts.Render(Links.Bundles.Scripts.events_calendar)
<script type="text/javascript">
    $(document).ready(function() {
        SohoHouse.EventsCalendar.setup("@Url.Action(MVC.Events.GetEventsForCalendar())");
    })
</script>

}

我认为被查看的月份的详细信息会保存在cookie中，但我不确定如何从我的索引视图中访问它。

如果你需要任何其他代码，请问，我对编程和堆栈溢出非常陌生，所以我仍然不确定如何很好地提问：(

Answer 1

最终成功地实现了这一点：放弃了为索引创建单独视图的想法，而是使用jquery创建了一个具有事件列表视图的表。然后用一个按钮在两者之间切换。作为参考，calander.js看起来像这样：

    var report = $("#report");
    var calendar = $("#calendar .fc-content");
    report.hide();
    $("#toggle-view").click(function() {
        calendar.toggle();
        report.toggle();
        $("#calendar").fullCalendar("refetchEvents");
        $("#calendar").fullCalendar("render");
        updateToggleButtonText();
    });
    function updateToggleButtonText() {
        $("#toggle-view").text(report.is(":visible") ? "View Calendar" : "View List");
    }
    function setUpCalendar() {
        $("#calendar").fullCalendar({
            events: {
                url: getEventsUrl,
                type: "POST",
                eventDataTransform: addReportRow
            },
            timeFormat: "H:mm{ - H:mm}",
            allDayDefault: false,
            eventBorderColor: "gray",
            header: {
                left: "prev,next",
                center: "title",
                right: null
            },
            weekMode: "variable",
            loading: function(isLoading) {
                if (isLoading) {
                    $("table#report > tbody:last").empty();
                }
            },
            allDaySlot: false
        });
    }
    function addReportRow(data) {
        var calendarMonth = $("#calendar").fullCalendar("getDate").getMonth();
        var startDate = new Date(data.start);
        var endDate = new Date(data.end);
        if (startDate.getMonth() > calendarMonth || endDate.getMonth() < calendarMonth) {
            return null;
        }
        var tableDetails = [
            data.title,
            $.fullCalendar.formatDate(startDate, "dd MMMM yyyy"),
            $.fullCalendar.formatDate(endDate, "dd MMMM yyyy"),
            data.published ? "Published" : "Not Published"
        ];
        var row = $("<tr></tr>");
        for (var i = 0; i < tableDetails.length; i++) {
            row.append($("<td></td>").text(tableDetails[i]));
        }
        $("table#report > tbody:last").append(row);
        return data;
    }
    function gotoDateFromCookie() {
        var calendarDate = $.cookie("calendarDate");
        if (calendarDate !== null && calendarDate !== "Invalid Date") {
            $("#calendar").fullCalendar("gotoDate", new Date(calendarDate));
            $.cookie("calendarDate", null);
        }
    }
    function storeDateAsCookie() {
        var calendarDate = $("#calendar").fullCalendar("getDate");
        $.cookie("calendarDate", calendarDate);
    }
    window.eventDropdownChanged = function() {
        location.reload();
    };
};