Wijmo では、イベントカレンダーウィジェットにさまざまなビューを追加してカスタマイズできます。デフォルトでは、「 クイックスタート」で示すとおり、Wijeventscalendar には現在の月日とリストが表示されます。2 週間のビュー、2 か月間のビューなどのカスタムビューを Wijeventscalendar に追加することで、イベントカレンダーの表示を簡単にカスタマイズできます。

次の wijeventscalendar は、デフォルトの viewType である「日」ビューを 1 つ表示するほか、タイムライン上の「2 日間」、「2 週間」、「2 か月間」、「2 年間」という 4 つのカスタムビューを表示します。スクリプトでは views および viewType オプションを使用して、さまざまなアイテムをイベントカレンダーに表示します。views は各アイテムをオブジェクトとして受け入れる配列であり、viewType はイベントカレンダー上で現在アクティブなビューを表します。

views 内のオブジェクトとして各アイテムを使用するための書式:

name - （文字列）ツールバーに表示するカスタムビューの一意の名前
unit - （文字列）カスタムビューの時間単位。有効値は「day」、「week」、「month」、「year」です。
count - （数値）時間単位に応じた期間の数

次のスクリプトは、「2 日間」、「2 週間」、「2 か月間」、「2 年間」という 4 つのカスタムビューを wijeventscalendar に追加し、アクティブな viewType を「2 週間」に設定します。

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijevcal", "amplify"], function () {
        $(document).ready(function () {
           $("#eventscalendar").wijevcal({
           //adding custom views
views: ["week", { name: "2 Days", unit: "day", count: 2 }, { name: "2 Weeks", unit: "week", count: 2 }, { name: "2 Months", unit: "month", count: 2 },
{ name: "2 Years", unit: "year", count: 2 }],
viewType: "2 weeks"
     });
$("#eventscalendar").wijevcal("option", "viewType", "2 weeks");
    });
     });
</script>
<style type="text/css">
    #eventscalendar
     {
       width: 700px;
       height:550px;
     }
</style>

Copyright © GrapeCity inc. All rights reserved.