0

这是我的日历的一个（不完整，因为代码太多）视图

@using DayPilot.Web.Mvc;
@using DayPilot.Web.Mvc.Events.Calendar;

@{
    ViewBag.Title = "Home Page";
}

<script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script>

<div>
        @Html.DayPilotCalendar("dp", new DayPilotCalendarConfig
        {
            BackendUrl = Url.Action("Backend", "Calendar"),
            ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Week,
        })
    </div>

<button id="Day">Day</button>
<button id="Week">Week</button>
<button id="Month">Month</button>

如何使用按钮单击和 JavaScript 更改值，例如 ViewType？

4

1 回答 1

0

我没有使用 DayPilot 的经验，但从他们的 API 来看，使用 javascript (wo/jquery)，你会写这样的东西：

(function()
{
    var dpc = new DayPilot.Calendar("dp");
    dpc.startDate = "2013-03-25";
    dpc.viewType = "Week";
    dpc.update();
    var updateCalendar = function(viewType)
    {
        dpc.viewType = viewType;
        dpc.update();
    };

    document.getElementById('Day').addEventListener('click', function(e)
    {
        updateCalendar('Day');
    });
    document.getElementById('Week').addEventListener('click', function(e)
    {
        updateCalendar('Week');
    });
    document.getElementById('Month').addEventListener('click', function(e)
    {
        updateCalendar('Month');
    });
})();

使用 jQuery，它看起来像这样：

(function($)
{
    var dpc = new DayPilot.Calendar("dp");
    dpc.startDate = "2013-03-25";
    dpc.viewType = "Week";
    dpc.update();

    $(document).on('click', '#Day, #Week, #Month', function(e)
    {    
        dpc.viewType = $(e.target).attr('id'); //realistically, this should probably be a data-attribute or what not
        dpc.update();
    });
})(jQuery);

你仍然会保留你的 Razor 代码，你应该能够添加这些 JS 调用或类似的东西。获取 DayPilotCalendar 对象可能是更难的部分，而且还不太清楚如何做到这一点。让我知道这是否有帮助。

于 2016-11-16T05:09:30.160 回答