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 に答える