Wijeditor タスク別ヘルプ
1. ASP.NET MVC 3 Wijmo アプリケーション を作成します。
2. ソリューションエクスプローラで、View → Shared フォルダを展開し、_Layout.cshtml をダブルクリックして ファイルを開きます。
3. 以下のマークアップをページの <body> タグ内に追加します。
<body>
<div class="demo">
<textarea id="wijeditor" style="width: 400px; height: 400px;">
<h1>Windows フォームから Silverlight 開発まで活用できるオールインワンパッケージ</h1>
<p>ComponentOne Studio Enterprise は Windows フォーム、ASP.NET、WPF、Silverlight、
Windows Phone 向けのコンポーネントを収録したスイート製品です。プラットフォームごとにデータグリッドや チャート、帳票に加え、コンテナやナビゲーションといったユーザーインタフェース、PDF や Excel ファイルへの 出力機能を提供しています。Windows フォームはもちろんのこと、WPF ででも対話性の高いユーザーインタフェ ースの業務システムを開発することができ、さらには Silverlight や Ajax 対応 ASP.NET でリッチな Web アプリケ ーション開発も可能です。また、モバイルデバイス向けの開発にも活躍します。スマートフォンなどでの閲覧に適 した Web サイトや ASP.NET アプリケーション制作にも対応できるうえ、Windows Phone のネイティブアプリ 開発のためのコンポーネントも収録しています。各コンポーネントは用途に適した機能が充実。小規模な Web フ ォームから大規模エンタープライズシステムまで、あらゆるニーズに柔軟に対応し開発生産性を大幅に向上させま す。</p>
</textarea>
</div>
4. 前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力して wijeditor ウィジェットを初 期化します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { $("#wijeditor").wijeditor({
mode: "simple"
});
});
</script>
5. ［F5］を押して、アプリケーションを実行します。 簡単なツールバーを使用して、テキストと書式を選択します。
WijEditor での BBCode の使用
wijeditor ウィジェットは、メッセージボード内のポストの書式設定に使用するマークアップ言語である、BBCode
（Bulletin Board Code の略）をサポートします。 この機能を利用するには、単にスクリプトで mode オプショ ンを設定します。 Web サイト（http://demo.componentone.com/ASPNET/MVCExplorer/editor/BBCode、）
にアクセスし、MVC コントロールエクスプローラの Editor > BBCode サンプルのライブデモをご覧ください。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#wijeditor").wijeditor({ mode: "bbcode", editorMode: "split" });
});
</script>
1. ASP.NET MVC 3 Wijmo アプリケーション を作成します。
2. ソリューションエクスプローラで、View → Shared フォルダを展開し、_Layout.cshtml をダブルクリックし てファイルを開きます。
3. 以下のマークアップをページの <body> タグ内に追加します。
<body>
<div class="demo">
<textarea id="wijeditor" style="width: 450px; height: 200px;">
[B]サンプルテキスト[/B]。 [URL=http://www.grapecity.com/tools/]Grapecity Web サイト[/URL] をご参照 ください。
</textarea>
</div>
4. 前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力して wijeditor ウィジェットを 初期化します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { $("#wijeditor").wijeditor({ mode: "bbcode", editorMode:
"split" }); });
</script>
5. ［F5］を押して、アプリケーションを実行します。
Wijeventscalendar
wijeventscalendar ウィジェットは、ユーザーによる予定の追加、編集、および管理が可能なフル機能のスケジュー ルです。
wijeventscalendar を表示するビューの .cshtml ファイルを開きます。次のマークアップのように、DOM 要素を 追加します。
<div id="eventscalendar"></div>
ここで、ウィジェットを初期化する必要があります。これを行うには、次のスクリプトを .cshtml ファイルに追加 できます。
<script type="text/javascript">
$(document).ready(function () { $("#eventscalendar").wijevcal();
});
</script>
プロジェクトを実行すると、カレンダーはこのような表示になります。
Wijeventscalendar チュートリアル
以下のチュートリアルでは、イベントカレンダーを含む MVC プロジェクトの作成手順について説明します。
このトピックでは、ASP.NET MVC 3 Wijmo アプリケーションを作成済みであることが前提となります。作成して いない場合は、「MVC Classic プロジェクトの作成」を参照してください。
手順 1：ビューの設定
この手順では、マークアップを追加し、コンテンツをアコーディオンのペインに追加します。以下を実行します。
1. ソリューションエクスプローラで、Views | Shared フォルダを展開し、_Layout.cshtml をダブルクリックし て、ファイルを開きます。
2. 以下のマークアップをページの <body> タグ内に追加します。このマークアップはイベントカレンダーをページに 追加します。
<div id="eventscalendar"></div>
手順 2：ウィジェットの初期化とカスタマイズ
前の手順では、イベントカレンダーのプレースホルダーのマークアップを追加しました。ここでは、jQuery スクリ プトを追加し、ウィジェットを初期化できます。その後、一部のオプションを追加し、イベントカレンダーをカスタ マイズします。
1. 前の手順で追加した終了の </div> タグの後に、次の jQuery スクリプトを入力して、wijeventscalendar ウィ ジェットを初期化します。
<script type="text/javascript">
$(document).ready(function () { $("#eventscalendar").wijevcal();
});
</script>
2. 表示される時間間隔を決定するオプションを設定し、wijeventscalendar をカスタマイズします。設定するオプシ ョンは下表のとおりです。
オプション 値 説明
timeInterval 60 このオプションは日ビューの時間間隔（分単位）を指定します。
timeIntervalHeight 25 このオプションは日ビューの時間間隔行の高さ（ピクセル単位）を指定しま す。
timeRulerInterval 120 このオプションは日ビューのタイムルーラ間隔（分単位）を指定します。
3. これらのオプションをスクリプトに追加します。次のようになります。
<script type="text/javascript">
$(document).ready(function () { $("#eventscalendar").wijevcal({
timeInterval: 60, timeIntervalHeight: 25, timeRulerInterval: 120
});
});
</script>
下図は、時間間隔オプションどうしの違いを示します。
手順 3：プロジェクトの実行
この手順では、アプリケーションを実行し、イベントカレンダーを表示します。
［F5］を押して、アプリケーションを実行します。指定した時間間隔に注意してください。
Wijeventscalendar タスク別ヘルプ
C1EventsCalendar での開始日の変更
デフォルトでは、イベントカレンダーの DayView は現在の日付から始まります。 selectedDate オプションを使 用して日付を変更できます。
1. 以下の jQuery スクリプトを入力し、selectedDate オプションを設定します。
<script type="text/javascript">
$(document).ready(function () { $("#eventscalendar").wijevcal({
selectedDate: new Date(2015, 12, 20) });
});
</script>
2. アプリケーションを実行すると、イベントカレンダーは次のように表示されます。
C1EventsCalendar のカルチャの変更
各カルチャには、日付、時刻、数値、およびその他の情報を表示するためのさまざまな表記規則と書式があります。
このトピックでは、culture オプションを使用してイベントカレンダーのカルチャを設定する方法について説明しま す。
1. 参照内の </script> 終了タグの後に、以下の jQuery スクリプトを入力し、selectedDate オプションを設定しま す。
<script type="text/javascript">
$(document).ready(function () { $("#eventscalendar").wijevcal({
culture: "ja-JP"
});
});
</script>
2. アプリケーションを実行すると、イベントカレンダーは日本語で表示されます。