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();
    };
};

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

1 个答案: