Calendar for ASP.NET Web Forms

Transcription

1 更 新 グレープシティ 株 式 会 社

2 目 次 製 品 の 概 要 3 ComponentOne Studio for ASP.NET Web Forms のヘルプ 3 主 な 特 長 4-7 クイックスタート 8 手 順 1:アプリケーションの 作 成 8 手 順 2:コントロールのカスタマイズ 8 手 順 3:アプリケーションの 実 行 8 アクセス 9 カルチャ( 地 域 ) 設 定 10 デザイン 時 のサポート 11 C1Calendar スマートタグ C1Calendar コレクションエディター 12 DateTime コレクションエディター カレンダーの 要 素 14 月 ビュー 要 素 14 ナビゲーション 要 素 プレビュー 要 素 タイトル 要 素 C1Calendar の 外 観 19 テーマ C1Calendar CSS セレクタ C1Calendar の 動 作 24 遷 移 効 果 アニメーションの 特 続 時 間 25 カレンダーのナビゲーション 内 側 と 外 側 の 前 へ / 次 へ ナビゲーション 26 ナビゲーションのツールチップ 26 カレンダープレビュー 初 期 カレンダービュー マルチカレンダービュー ポップアップカレンダー 29 1 Copyright GrapeCity inc. All rights reserved.

3 カレンダー 選 択 カレンダーのセレクタ 30 カレンダー 日 日 付 書 式 パターン 31 選 択 した 日 31 無 効 な 日 サーバー 側 カレンダー 33 クライアント 側 の 機 能 34 クライアント 側 イベント 34 タスク 別 ヘルプ 35 カスタム 日 付 の 作 成 ポップアップカレンダーの 作 成 C1Calendar の 外 観 のカスタマイズ テーマの 変 更 38 カスタムテーマの 追 加 カレンダータイトルへの 組 み 込 み 日 付 形 式 パターンの 適 用 39 カレンダーの 月 の 完 全 名 と 年 の 表 示 カレンダーの 月 の 省 略 名 と 年 の 表 示 40 カレンダーの 月 と 年 の 表 示 カレンダータイトルへのカスタム 日 付 書 式 パターンの 適 用 41 月 ビューでのカレンダータイトルに 日 付 書 式 の 適 用 ナビゲーションタスク 42 外 側 のナビゲーションボタンを 使 用 したカレンダーの 移 動 次 のカレンダー 月 のプレビュー 選 択 タスク 44 カレンダーの 週 番 号 の 選 択 カレンダー 月 の 選 択 45 カレンダーの 曜 日 の 選 択 最 小 および 最 大 日 付 範 囲 の 設 定 クライアント 側 からの 日 付 の 選 択 カルチャの 設 定 Copyright GrapeCity inc. All rights reserved.

4 製 品 の 概 要 Calendar for ASP.NET Web Forms を 使 用 して Web サイト 上 に 高 度 に 洗 練 されたカレンダーを 追 加 します 単 一 の 月 ある いはカスタマイズ 可 能 なスタイルおよびナビゲーション 要 素 を 含 む 複 数 の 月 の 表 を 表 示 できます ComponentOne Studio for ASP.NET Web Forms のヘルプ ComponentOne Studio for ASP.NET Web Forms の 各 コントロールで 共 通 したトピック アセンブリの 追 加 テーマの 適 用 ク ライアント 側 情 報 などについては ASP.NET Web Forms ユーザーガイド を 参 照 してください 3 Copyright GrapeCity inc. All rights reserved.

5 主 な 特 長 Calendar for ASP.NET Web Forms の 主 な 特 長 は 以 下 の 通 りです 選 択 モード Calendar は 単 一 または 複 数 の 日 付 選 択 をサポートします また 曜 日 セレクタと 週 番 号 セレクタから 火 曜 日 となるすべての 日 週 の 特 定 の 日 など 日 付 グループを 選 択 することもできます さらに 月 セレクタを 使 用 し 月 全 体 の 日 を 選 択 することも 可 能 です 月 のプレビュー Calendar には 前 のカレンダー 月 と 次 のカレンダー 月 を 表 示 するプレビューペイン(オプション)が 用 意 されています このペイ ンを 使 用 して 次 前 の 月 に 移 動 せずに その 月 の 開 始 日 と 終 了 日 からなる 日 付 期 間 を 閲 覧 できます 一 つのプロパティを 設 定 するだけで この 機 能 を 有 効 にすることができます 4 Copyright GrapeCity inc. All rights reserved.

6 アニメーション 効 果 カレンダーコントロールには 上 下 右 左 からカレンダーをスライドする 組 み 込 みのアニメーション 効 果 が 含 まれています 1 つだけのプロパティを 設 定 することで C1Calendar のアニメーション 効 果 のタイプを 指 定 できます プロパティビルダ カレンダーコントロールには カレンダーのすべての 要 素 を 論 理 的 なグループに 割 り 当 てるプロパティビルダーが 含 まれていま す この 機 能 により [プロパティ]ウィンドウに 含 まれているプロパティの 一 覧 をスクロールせずに 変 更 対 象 の 特 定 の 要 素 が 簡 単 に 見 つけられます この 機 能 は 毎 度 繰 り 返 すタスクを 毎 度 実 行 せずに 実 装 できるために 役 に 立 ちます ローカライズ Calendar は 曜 日 とタイトルの 完 全 なローカライズをサポートしています 曜 日 とタイトルに 表 示 される 文 字 列 は 指 定 された 言 語 によって 決 定 されます クイックナビゲーション Calendar は カレンダー 月 のナビゲーションとして 以 下 の3 種 類 の 方 法 を 提 供 します 前 へ または 次 へ ボタンをクリック し 前 の 月 または 次 の 月 に 移 動 できます クイック- 前 へ または クイック- 次 へ ボタンをクリックし 前 の 複 数 月 または 次 の 複 数 月 をジャンプできます ポップアップカレンダーの 月 と 年 セレクタ-カレンダータイトルをクリックすると ポップアップカレ ンダーが 開 き ポップアップカレンダーから 月 と 年 を 選 択 できます 5 Copyright GrapeCity inc. All rights reserved.

7 カレンダーの 方 向 複 数 のカレンダーを 表 示 する 場 合 カレンダーの 方 向 を 変 更 する 必 要 があるかもしれません Calendar は カレンダーを 水 平 方 向 または 垂 直 方 向 に 表 示 できます 初 期 ビュー カレンダーをDay Month Year またはDecade のいずれかのビューで 表 示 できます さらに これらのビューのいずれかをデ フォルトまたはカレンダーの 初 期 ビューとして 指 定 することも 可 能 です マルチカレンダービュー Calendar はカレンダー 領 域 に 複 数 の 月 を 表 示 できます この 機 能 を 有 効 にするには マルチカレンダービューで 月 の 列 数 と 行 数 を 指 定 する 必 要 があります テーマ スマートタグをクリックするだけで 10 種 類 のプレミアムテーマ(Arctic Lucid Metro Metro-Dark Midnight Aristo Rocket Cobalt Stafford および Sterling)のいずれかを 選 択 して 外 観 を 変 更 します オプションとして jquery UI から ThemeRoller を 使 用 してカスタマイズしたテーマを 作 成 します 6 Copyright GrapeCity inc. All rights reserved.

8 CSS のサポート CSS(Cascading Style Sheet)のスタイルを 使 用 して カスタムスキンを 定 義 します カレンダーコントロールを 組 織 の 基 準 に 合 致 させます 7 Copyright GrapeCity inc. All rights reserved.

9 クイックスタート このクイックスタートは Calendar for ASP.NET を 初 めて 使 用 するユーザーのために 用 意 されています このクイックスタート では C1Calendarコントロールを 含 むASP.NET アプリケーションを 作 成 し C1Calendar にデータを 追 加 し C1Calendar をカ スタマイズします 手 順 1:アプリケーションの 作 成 このトピックでは C1Calendar コントロールを 追 加 します 1. まず ASP.NET Web アプリケーションを 作 成 します 2. コントロールをツールボックスに 追 加 します~コントロールをツールボックスに 追 加 します 3. デザイン タブを 選 択 します 4. デザイン タブをクリックしてデザインビューを 開 き Visual Studio ツールボックスに 移 動 して C1Calendar コントロー ルをダブルクリックしてフォームのメインコンテンツに 追 加 します 手 順 2:コントロールのカスタマイズ このトピックでは C1Calendar コントロールのいくつかのプロパティを 設 定 します 1. Visual Studio のメニューから[ [ 表 示 ] [プロパティウィンドウ]を 選 択 します 2. [プロパティ]ウィンドウの 上 部 にあるドロップダウンリストをクリックし リストからC1Calendar を 選 択 します 3. AllowPreview プロパティを true に 設 定 します 4. MinDate プロパティのドロップダウン 矢 印 をクリックして 2011/7/11 に 設 定 します 5. MaxDateプロパティのドロップダウン 矢 印 をクリックして 2011/7/18 に 設 定 します 6. NavButtons プロパティを Quick に 設 定 します C1Calendar コントロールのマークアップは 次 のようになります ソースビュー <cc1:c1calendar ID="C1Calendar1" runat="server" AllowPreview="True" MaxDate=" " MinDate=" " NavButtons="Quick"> </cc1:c1calendar> アプリケーションを 実 行 して 書 式 付 けのカレンダーを 表 示 します 手 順 3:アプリケーションの 実 行 プロジェクトを 実 行 して 以 下 を 表 示 するには [F5]を 押 してください カレンダー 上 にMinDate からMaxDate までのみが 有 効 になっています 前 の 月 または 次 の 月 のカレンダーを 表 示 するには プレビューインジケータ 上 にマウスを 移 動 します クイック- 前 へ または クイック- 次 へ ボタンをクリックし 前 の 年 または 次 の 年 をジャンプできます 8 Copyright GrapeCity inc. All rights reserved.

10 アクセス TabIndex プロパティを 設 定 すると [Tab]キーを 使 用 して コントロールとその 要 素 を 移 動 できます [Tab]キーを 押 すと コ ントロールの 標 準 入 力 フォーカスの 外 観 が 取 得 され コントロール 内 の 項 目 の 内 枠 の 周 囲 が 点 線 で 表 示 されま す C1Calendar が Web ページ 上 の 唯 一 のコントロールである 場 合 [Tab]キーをもう 一 度 押 すとフォーカスが C1Calendar のナビゲーションボタンに 移 動 し クイック - 前 へ ボタンから クイック - 次 へ ボタンへと 左 から 右 への 順 序 で 移 動 します Web ページ 上 に 複 数 のコントロールがある 場 合 は [Tab]キーをもう 一 度 押 すとフォーカスは C1Calendar の 要 素 ではなく 次 のコントロールに 移 動 します フォーカスがナビゲーションボタンのどれかにある 場 合 [Enter]キーを 押 すと 選 択 されたナビゲーションボタンに 対 応 するアク ションが 呼 び 出 されます たとえば フォーカスが 前 へ ボタンにある 場 合 に[Enter]キーを 押 すと 前 のカレンダー 月 に 移 動 できます 9 Copyright GrapeCity inc. All rights reserved.

11 カルチャ( 地 域 ) 設 定 地 域 設 定 は C1Calendar 機 能 のほとんどの 面 に 影 響 を 与 えます データ 入 力 の 書 式 設 定 と 実 行 は 文 字 列 比 較 数 値 およ び 日 時 書 式 パターン および 特 殊 文 字 ( 小 数 点 文 字 など)のカルチャ 設 定 によって 決 まります C1Calendar は System.Globalization 名 前 空 間 全 体 の 曜 日 とタイトルの 完 全 なローカライズをサポートしています この 名 前 空 間 は 言 語 国 / 地 域 使 用 するカレンダー 日 付 / 通 貨 / 数 値 の 書 式 パターン および 文 字 列 のソート 順 序 など カルチャに 関 連 す る 情 報 を 含 むいくつかのクラスから 構 成 されています 曜 日 とタイトルに 表 示 される 文 字 列 は Culture プロパティに 指 定 された 言 語 によって 決 まります C1Calendar のカルチャを 簡 単 に 定 義 するには デザイナ.aspx ファイル 内 での 宣 言 またはコードビハインドファイルでのプログラムを 使 用 し Culture プロパティの 値 を 設 定 します C1Calendar へのカルチャ 設 定 の 適 用 方 法 の 詳 細 については カルチャの 設 定 を 参 照 してください 10 Copyright GrapeCity inc. All rights reserved.

12 デザイン 時 のサポート C1Calendar は カスタマイズされたコンテキストメニュー スマートタグ および 充 実 したデザイン 時 サポートを 提 供 するデザ イナを 備 えており オブジェクトモデルの 操 作 が 簡 素 化 されています 以 下 のセクションでは C1Calendar のデザイン 時 環 境 を 使 用 してC1Calendarコントロールを 構 成 する 方 法 について 説 明 しま す C1Calendar スマートタグ Visual Studio では C1Calendar コントロールはスマートタグを 備 えています スマートタグは C1Calendar で 最 もよく 一 般 的 に 使 用 されるプロパティを 提 供 するショートカットタスクメニューです C1Calendar コントロールでは スマートタグを 使 用 することによってプロパティビルダや 一 般 的 なプロパティにすばやく 簡 単 に アクセスできます [C1Calendar タスク]メニューにアクセスするには C1Calendar コントロールの 右 上 端 にあるスマートタグ( す これによって [C1Calendar タスク]メニューが 開 きます ) をクリックしま [C1Calendar タスク]メニューは 以 下 のように 操 作 します 他 の 月 日 の 表 示 [ 他 の 月 日 の 表 示 ]チェックボックスを ON にすると カレンダーの 現 在 の 月 には 属 さない 他 の 月 日 が 表 示 されます こ れはデフォルトで ON です 曜 日 の 表 示 [ 曜 日 の 表 示 ]チェックボックスを ON にすると カレンダーに 現 在 の 月 の 曜 日 が 表 示 されます これはデフォルトで ON です 週 番 号 の 表 示 [ 週 番 号 の 表 示 ]チェックボックスを ON にすると カレンダーに 現 在 の 月 の 週 番 号 が 表 示 されます これはデフォルト で OFF です 曜 日 の 書 式 [ 曜 日 の 書 式 ]ドロップダウンボックスをクリックすると 異 なる 書 式 (FirstLetter FirstTwoLetters Abbreviated)のリス トが 表 示 され カレンダーの 曜 日 の 書 式 を 選 択 できます 11 Copyright GrapeCity inc. All rights reserved.

13 プレビューを 有 効 にする [プレビューを 有 効 にする]を 選 択 すると 実 行 時 に 前 のカレンダー 月 と 次 のカレンダー 月 をプレビューできます テーマ [テーマ]ドロップダウンボックスでは Theme プロパティを 設 定 し C1Calendar コントロールの 外 観 を 定 義 済 みの テーマの1つに 変 更 できます デフォルトでは これは Aristo テーマに 設 定 されます 使 用 可 能 なテーマについての 詳 細 は テーマ を 参 照 してください 新 しいテーマの 作 成 [ 新 しいテーマの 作 成 ]オプションをクリックすると ThemeRoller for Visual Studio が 開 きます したがって 開 発 環 境 内 でテーマをカスタマイズすることができます アプリケーションで ThemeRoller for Visual Studio を 使 用 する 方 法 については ThemeRoller for Visual Studio を 参 照 してください CDN の 使 用 [CDN の 使 用 ]チェックボックスを ON にすると CDN からクライアントリソースがロードされます これはデフォルトで OFF です CDN パス CDN の URL パスを 表 示 します Bootstrap の 使 用 [Bootstrap の 使 用 ]オプションを 選 択 すると コントロールに Bootstrap テーマを 適 用 することができます アプリケー ションで Bootstrap テーマを 使 用 する 方 法 については Bootstrap for ASP.NET Web Forms クイックスタート を 参 照 してください バージョン 情 報 [バージョン 情 報 ]をクリックすると 製 品 のバージョン 情 報 を 確 認 できるダイアログボックスが 表 示 されます C1Calendar コレクションエディター C1Calendar には 以 下 のコレクションエディターが 含 まれており これを 使 って 選 択 した 日 と 無 効 な 日 を 追 加 / 削 除 すること ができます Date Time コレクションエディター DateTime コレクションエディター [DateTime コレクションエディター]では ユーザーは C1Calendar 内 で 選 択 したカレンダー 日 または 無 効 な 日 を 追 加 / 削 除 できます 12 Copyright GrapeCity inc. All rights reserved.

14 選 択 した 日 の[DateTime コレクションエディター]にアクセスするには 以 下 の 手 順 を 実 行 します 1. C1Calendarコントロールを 右 クリックし コンテキストメニューから[プロパティ]を 選 択 します 2. C1Calendar のプロパティウィンドウで SelectedDates プロパティを 選 択 します 3. SelectedDates プロパティの 横 の ボタンをクリックし [DateTime コレクションエディター]を 表 示 します 無 効 な 日 の[DateTime コレクションエディター]にアクセスするには 以 下 の 手 順 を 実 行 します 1. C1Calendar コントロールを 右 クリックし コンテキストメニューから[プロパティ]を 選 択 します 2. C1Calendar のプロパティウィンドウで DisabledDates プロパティを 選 択 します 3. DisabledDates プロパティの 横 の ボタンをクリックし [DateTime コレクションエディター]を 表 示 します 13 Copyright GrapeCity inc. All rights reserved.

15 カレンダーの 要 素 このセクションでは C1Calendar コントロールを 構 成 する 要 素 の 概 要 について 視 覚 的 に 説 明 します 各 トピックは カレン ダーコントロールのさまざまな 特 徴 を 表 す 各 種 の 要 素 に 分 類 されます 各 トピックで 提 供 される 情 報 は 次 のとおりです 要 素 の 目 的 とそのコントロール 内 の 位 置 要 素 の 基 本 部 分 要 素 の 概 観 と 機 能 に 影 響 する 要 素 のスタイルとプロパティ 月 ビュー 要 素 月 ビュー 領 域 は 7 日 x6 週 のカレンダーマトリックスを 表 示 します この 中 に カレンダー 上 部 には 曜 日 の 名 前 現 在 のカレン ダー( 月 ビュー 領 域 ) 上 のすべての 日 ShowWeekNumbers プロパティが 有 効 な 場 合 には 週 番 号 カレンダー 月 の 選 択 が 有 効 な 場 合 には 月 セレクタが 含 まれます 月 セレクタに 加 え C1Calendar には 週 番 号 と 曜 日 セレクタもあり 特 定 の 曜 日 ま たは 週 番 号 を 選 択 できます カレンダーのセレクタの 詳 細 については カレンダーのセレクタ を 参 照 してください カレンダーの 月 ビュー 領 域 を 構 成 する 各 要 素 の 名 称 は 次 のとおりです 月 ビュー 領 域 には 次 の 日 タイプを 含 めることができます 通 常 日 ー 現 在 の 月 に 表 示 される 日 を 含 みます 無 効 な 日 ー 無 効 な 日 がコレクションに 追 加 されたときに 表 示 します 他 の 月 日 ー ShowOtherMonthDays プロパティが True に 設 定 されたときに 表 示 します 選 択 した 日 ー 選 択 されたとき および 選 択 した 日 付 コレクションに 追 加 されたときに 表 示 される 日 を 示 します 今 日 日 付 の 周 囲 が 塗 りつぶされた 矩 形 ボックスで 囲 まれた 現 在 の 日 を 示 します カレンダー 月 領 域 の 外 観 に 影 響 するプロパティは 次 のとおりです DisplayDate ー 現 在 表 示 している 月 の 日 を 取 得 または 設 定 します ShowOtherMonthDays ー 前 後 の 月 に 属 する 日 を 表 示 するかどうかを 決 定 します ShowWeekNumbers ー 週 番 号 を 表 示 するかどうかを 決 定 します 14 Copyright GrapeCity inc. All rights reserved.

16 ナビゲーション 要 素 C1Calendar には 複 数 のカレンダー 月 を 移 動 するための 高 度 なナビゲーションシステムが 含 まれています カレンダーのナ ビレーション 要 素 は カレンダータイトル 上 に 表 示 され 以 下 の 各 項 目 から 構 成 します 前 へ と 次 へ ボタン - または をクリックし 前 の 月 または 次 の 月 に 移 動 できます これは カレンダーコントロー ルのデフォルトのスタイルになります クイック - 前 へ と クイック - 次 へ ボタン - クイック - 前 へ または クイック - 次 へ ボタンをクリックし 前 の 複 数 月 または 次 の 複 数 月 をジャンプできます この 機 能 は NavButtons プロパティが Quick に 設 定 されている 場 合 に 有 効 になります ポップアップカレンダーの 月 と 年 セレクタ カレンダータイトルをクリックすると 月 ビュー 領 域 が 開 き その 年 の 12 カ 月 (1 月 から 12 月 まで)が 表 示 します アニメーションが 有 効 になっている 場 合 日 の 元 の 月 ビュー 領 域 が 最 少 化 され 新 しい 月 ビュー 領 域 が 徐 々に 現 れます カレンダータイトルの 年 を2 回 目 にクリックすると 2000 年 から 2011 年 までの 新 しい 月 ビュー 領 域 が 表 示 します 前 の 月 ビューに 戻 るには 月 ビュー 領 域 で 選 択 した 項 目 をクリックします プレビューボタン-AllowPreview プロパティを 有 効 にした 場 合 プレビューボタンはカレンダーコントロールの 左 側 と 右 側 に 表 示 します 左 側 のプレビューボタンをクリックすると 前 のカレンダー 月 は 現 在 のカレンダーコントロールの 隣 に 表 示 され 右 側 のプレビューボタンをクリックすると 次 のカレンダー 月 は 現 在 のカレンダーコントロールの 次 に 表 示 し ます カレンダーのナビゲーションシステムを 構 成 する 各 要 素 の 名 称 は 次 のとおりです 各 ナビゲーション 要 素 には 固 有 のプロパティスタイルが 関 連 付 けられているため ナビゲーション 要 素 をカスタマイズできま す プレビュー 要 素 C1Calendar には 現 在 の 月 を 表 示 したままでカレンダーの 前 の 月 と 次 の 月 をプレビューするためのプレビューバーが 含 まれ ます プレビューバーは AllowPreview プロパティが True に 設 定 された 場 合 に カレンダーコントロールの 左 端 と 右 端 に 表 示 します プレビューバー 上 でマウスポインタを 置 いて 前 の 月 と 次 の 月 を 表 示 できます プレビュー 要 素 は 以 下 の 各 項 目 から 構 成 します 前 月 プレビューボタン 15 Copyright GrapeCity inc. All rights reserved.

17 前 月 プレビューバー 翌 月 プレビューボタン 翌 月 プレビューバー 各 プレビュー 要 素 には 固 有 のスタイルがあります プレビューカレンダーを 構 成 する 各 要 素 の 名 称 は 次 のとおりです タイトル 要 素 カレンダータイトルは すべての 月 ビューで 共 有 されるグループタイトルです 月 ビューまたはマルチ 月 ビューのカレンダーの 上 部 に 表 示 します カレンダータイトルの 表 示 は TitleFormat プロパティに 適 用 される 書 式 文 字 列 のタイプによって 影 響 しま す 月 ビューのタイトル 16 Copyright GrapeCity inc. All rights reserved.

18 マルチ 月 ビューのタイトル カレンダータイトルの 表 示 TitleFormat プロパティを 標 準 またはカスタム 日 付 書 式 文 字 列 に 設 定 すると プロパティに 入 力 されたデータが 書 式 設 定 しま す C1Calendar タイトルのデフォルトの 書 式 文 字 列 は yyyy 年 MMMM です TitleFormat プロパティに 提 供 された 日 付 書 式 文 字 列 は 下 の 表 のとおりです タイトル 書 式 文 字 列 yyyy 年 MMMM 説 明 MMMM デフォルトの DateTime 書 式 文 字 列 現 在 の 年 カレンダーの 月 の 完 全 名 の 順 に 表 示 します 例 表 示 する 現 在 の 月 が12 月 である 場 合 カレン ダータイトルは 2011 年 12 月 のように 表 示 しま す MMM yyyy カレンダーの 開 始 月 と 終 了 月 の 省 略 名 現 在 の 年 の 順 に 表 示 します 表 示 する 現 在 の 月 が12 月 である 場 合 カレン ダータイトルは のように 表 示 します MM-yyyy カレンダーに 表 示 する 現 在 の 月 の 整 数 値 ダッシュ(-) 現 在 の 年 の 順 に 表 示 します 表 示 する 現 在 の 月 が12 月 である 場 合 カレン ダータイトルは のように 表 示 します 17 Copyright GrapeCity inc. All rights reserved.

19 カレンダーの Month ビューで カレンダーのタイトルを 指 定 もできます 詳 細 については Apply Date Format to Calendar Title in Month View を 参 照 してください 18 Copyright GrapeCity inc. All rights reserved.

20 C1Calendar の 外 観 C1Calendar の 外 観 は 組 み 込 みのテーマか CSS スタイルによって 制 御 されます カレンダーのテーマは ナビゲーションボ タン プレビューボタン 月 タイトル 月 領 域 など すべてのカレンダー 要 素 の 外 観 に 影 響 を 及 ぼします C1Calendar は ユーザーがカスタマイズしやすいように 設 計 されています デフォルトの 外 観 を 数 限 りなくさまざまに 変 更 でき ます CSS スタイルを 適 用 して C1Calendar の 要 素 を 変 更 できます C1Calendar には C1Calendar.CSSClass プロパティの 横 に あるドロップダウン 矢 印 をクリックすると 表 示 される 組 み 込 みの CSS セレクタが 用 意 されています テーマ C1Calendarは コントロール 用 に Arctic Aristo Cobalt Lucid Metro Metro-Dark Midnight Rocket Stafford および Sterling という10 種 類 の 組 み 込 みテーマを 備 えています これらは Theme プロパティを 設 定 して 簡 単 にコントロール に 適 用 できます マウスが 上 に 置 かれた 状 態 で 表 示 される10 種 類 の 組 み 込 みテーマは 次 の 通 りです テーマ 外 観 Arctic Aristo(デフォルト) 19 Copyright GrapeCity inc. All rights reserved.

21 Cobalt Lucid Metro 20 Copyright GrapeCity inc. All rights reserved.

22 Metro-Dark Midnight Rocket 21 Copyright GrapeCity inc. All rights reserved.

23 Stafford Sterling C1Calendar CSS セレクタ CSS を 使 用 して C1Calendar の 任 意 の 要 素 をスタイル 設 定 し その 外 観 を 真 に 独 特 のものにすることができます ツリー ビューのカスタマイズ 処 理 を 簡 素 化 するために ComponentOne Studio for ASP.NET Web Forms には その6 種 類 の 組 み 込 みテーマごとに CSS セレクタが 組 み 込 まれています 枠 背 景 テキスト フォント マージン 埋 め 込 み リスト 輪 郭 表 などの 一 般 的 な CSS プロパティを 該 当 する CSS セレクタに 適 用 できます 一 般 に 使 用 される 個 々の CSS セレクタとグループ 化 された CSS セレクタの 一 覧 について プロジェクト 内 のC1Calendar コント ロールを 選 択 し C1Calendar Visual Studio のプロパティウィンドウの CssClass プロパティの 横 にあるドロップダウンリストを 表 示 します C1Calendar CSS セレクタは wijmo-wijcalendar で 始 まります 22 Copyright GrapeCity inc. All rights reserved.

24 23 Copyright GrapeCity inc. All rights reserved.

25 C1Calendar の 動 作 ユーザーのニーズに 合 わせて C1Calendar の 動 作 をカスタマイズできます カレンダーをポップアップC1Calendar の 動 作 に 変 更 したり ユーザーによるカレンダー 上 の 日 付 の 選 択 方 法 をカスタマイズしたり ユーザーによるカレンダーのナビゲーション 方 法 をカスタマイズしたり プレビューカレンダーの 表 示 / 非 表 示 を 決 定 したりできます 遷 移 効 果 アニメーション 化 されたスライド/フェイド 状 態 の 間 に 遷 移 効 果 を 追 加 すれば それらの 状 態 間 にシームレスな 流 れが 生 まれ カレンダーの 魅 力 を 高 めることができます C1Calendar には スライドアニメーションの 遷 移 の 視 覚 効 果 を 高 める 32 種 類 の 遷 移 効 果 が 含 まれています カレンダー 月 の 間 をナビゲートする 場 合 左 側 または 右 側 にスライドインされたりするのではな く スライドインするときにはバウンスインし スライドアウトときはバウンスアウトします デフォルトでは Easing プロパティは EaseLinear に 設 定 され カレンダー 月 を 切 り 替 える 際 に 各 カレンダーはスムーズで 直 線 的 な 遷 移 効 果 を 表 示 します 以 下 の 遷 移 効 果 は 状 態 間 の 遷 移 をアニメーション 化 するために 使 用 できます これにより メニューが 拡 張 / 縮 小 する 間 ユーザーにとって 動 きがスムーズに 見 えます 遷 移 の 名 前 EaseInBack EaseInBounce EaseInCirc EaseInCubic EaseInElastic EaseInExpo EaseInOutBack EaseInOutBounce EaseInOutCirc EaseInOutCubic EaseInOutElastic EaseinOutExpo EaseInOutQuad EaseInOutQuart 遷 移 の 説 明 バックのイージングイン 開 始 は 遅 く それから 加 速 します バウンスしながらのイージングイン 開 始 は 遅 く それから 加 速 します バウンスの 回 数 は 持 続 時 間 に 関 係 します 持 続 時 間 が 延 びれば バウンスの 回 数 は 多 くなります 円 形 のイージングイン 開 始 は 遅 く それから 加 速 します 3 次 型 のイージングイン 開 始 は 速 度 ゼロで それから 加 速 し ます しなやかなイージングイン 開 始 は 遅 く それから 加 速 しま す 級 数 的 なイージングイン 開 始 は 遅 く それから 加 速 します バックのイージングインとイージングアウト 開 始 は 遅 く 途 中 まで 加 速 し それから 減 速 します /td> バウンスしながらのイージングインとイージングアウト 開 始 は 遅 く 途 中 まで 加 速 し それから 減 速 します 円 形 のイージングインとイージングアウト 開 始 は 遅 く 途 中 まで 加 速 し それから 減 速 します 3 次 型 のイージングインとイージングアウト 開 始 は 速 度 ゼロ で 途 中 まで 加 速 し それから 再 び 速 度 ゼロまで 減 速 します しなやかなイージングインとイージングアウト 開 始 は 遅 く 途 中 まで 加 速 し それから 減 速 します 級 数 的 なイージングインとイージングアウト 開 始 は 遅 く 途 中 まで 加 速 し それから 減 速 します 2 次 型 のイージングインとイージングアウト 開 始 は 遅 く 途 中 まで 加 速 し それから 再 び 速 度 ゼロまで 減 速 します 4 次 型 のイージングインとイージングアウト 開 始 は 速 度 ゼロ で 途 中 まで 加 速 し それから 再 び 速 度 ゼロまで 減 速 します 24 Copyright GrapeCity inc. All rights reserved.

26 EaseInOutQuint EaseInOutSine EaseInQuad EaseInQuart EaseInQuint EaseInSine EaseOutBack EaseOutBounce EaseOutCirc 5 次 型 のイージングインとイージングアウト 開 始 は 速 度 ゼロ で 途 中 まで 加 速 し それからゼロまで 減 速 します 正 弦 型 のイージングインとイージングアウト 開 始 は 遅 く 途 中 まで 加 速 し それから 減 速 します 2 次 型 のイージングイン 開 始 は 速 度 ゼロで それから 加 速 し ます 4 次 型 のイージングイン 開 始 は 遅 く それから 加 速 します 5 次 型 のイージングイン 開 始 は 速 度 ゼロで それから 加 速 し ます 正 弦 型 のイージングイン 開 始 は 遅 く それから 加 速 します バックのイージングアウト 開 始 は 速 く それから 減 速 します バウンスしながらのイージングアウト 開 始 は 速 く それから 減 速 します バウンスの 回 数 は 持 続 時 間 に 関 係 します 持 続 時 間 が 延 びれば バウンスの 回 数 は 多 くなります 円 形 のイージングアウト 開 始 は 速 く それから 減 速 します EaseOutCubic 3 次 型 のイージングインとイージングアウト 開 始 は 全 速 で それからゼロまで 減 速 します EaseOutElastic EaseOutExpo EaseOutQuad EaseOutQuart EastOutQuint EaseOutSine Linear Swing しなやかなイージングアウト 開 始 は 全 速 で それからゼロま で 減 速 します 級 数 的 なイージングアウト 開 始 は 速 く それから 減 速 しま す 2 次 型 のイージングアウト 開 始 は 全 速 で それからゼロまで 減 速 します 4 次 型 のイージングアウト 開 始 は 速 く それから 減 速 しま す 5 次 型 のイージングアウト 開 始 は 全 速 で それからゼロまで 減 速 します 正 弦 型 のイージングアウト 開 始 は 遅 く それから 加 速 しま す 直 線 的 なイージング 始 めから 終 わりまで 加 速 も 減 速 もなく スムーズに 移 行 します 始 めから 終 わりまで 加 速 も 減 速 もなくスムーズに 移 行 しま す アニメーションの 特 続 時 間 アニメーション 効 果 では タイミングが 重 要 な 役 割 を 果 たします アニメーション 効 果 と 遷 移 効 果 の 持 続 時 間 は Duration プ ロパティに 大 して 整 数 値 を 指 定 することで 制 御 できます 持 続 期 間 のデフォルト 値 は 500 ミリ 秒 (0.5 秒 )です アニメーション 効 果 を 長 くするには この 値 を 大 きくし アニメーション 効 果 を 短 くするには この 値 を 小 さくします カレンダーのナビゲーション 25 Copyright GrapeCity inc. All rights reserved.

27 C1Calendar は カレンダー 月 のナビゲーションとして 以 下 の3 種 類 の 方 法 を 提 供 します 前 へ と 次 へ - または ボタンをクリックし 前 の 月 または 次 の 月 に 移 動 できます クイック - 前 へ と クイック - 次 へ - クイック - 前 へ または クイック - 次 へ ボタンをクリックし 前 の 複 数 月 または 次 の 複 数 月 をジャンプできます ポップアップカレンダーの 月 と 年 セレクタ-カレンダータイトルをクリックすると ポップアップカレンダーが 開 き ポップ アップカレンダーから 月 と 年 を 選 択 できます 内 側 と 外 側 の 前 へ / 次 へ ナビゲーション C1Calendar は 標 準 の ASP.NET Web Server Calendar コントロールに 相 当 する 追 加 のナビゲーションボタンを 提 供 します 内 側 の 前 へ / 次 へ ナビゲーションボタン および 外 側 の 前 へ / 次 へ ナビゲーションボタンがあり カレンダー 月 の 間 を 移 動 するために 使 用 します 内 側 と 外 側 のナビゲーションボタンに 別 々のナビゲーションを 指 定 できます 内 側 のナビゲーションボタン 内 側 のナビゲーションボタンは 単 一 矢 印 の 前 へ / 次 へ ボタンを 表 します カレンダー 月 の 間 を 移 動 する 方 法 を 決 定 できます 前 へ / 次 へ ナビゲーションボタンのクリック 回 数 を 最 小 限 にする 場 合 QuickNavStep プロパティの 整 数 値 を 大 きくします デフォルトは 1 で 前 へ / 次 へ ナビゲーションボタンをクリック すると 一 度 に1カ 月 ずつ 移 動 することを 意 味 します 外 側 のナビゲーションボタン 外 側 のナビゲーションボタンは 二 重 矢 印 の 前 へ / 次 へ ボタンを 表 します QuickNavStep プロパティは 外 側 のナビゲーションボタンに 適 用 します このプロパティのデフォルト 値 は 12 に 設 定 され 前 へ / 次 へ ナビゲーションボタンをクリックすると カレンダー 月 が12カ 月 分 ずつ 移 動 することを 意 味 します ナビゲーションのツールチップ 内 側 の 次 へ / 前 へ ナビゲーションボタンおよび 外 側 の 次 へ / 前 へ ナビゲーションボタンにツールチップを 追 加 し ユーザーの 操 作 性 を 向 上 させることができます 内 側 のナビゲーションボタンにツールチップを 追 加 するには 次 へ ボタンの 場 合 は NextTooltip プロパティを 使 用 し 前 へ ボタンの 場 合 は PrevTooltip プロパティを 使 用 します 外 側 のナビゲーショ ンボタンにツールチップを 追 加 するには 次 へ / 前 へ ボタンに 対 して QuickNextTooltip と QuickPrevTooltip をそれ ぞれ 使 用 します 26 Copyright GrapeCity inc. All rights reserved.

28 カレンダープレビュー 現 在 の 月 を 切 り 替 えずに 次 の 月 や 前 の 月 の 開 始 日 と 終 了 日 を 確 認 する 場 合 カレンダープレビュー 機 能 を 使 用 できます カ レンダープレビューは 前 の/ 次 のカレンダービュー( 月 )のポップアップカレンダーを 表 示 するプレビュー 領 域 を 提 供 します この 機 能 は AllowPreview プロパティを True に 設 定 した 場 合 に 使 用 できます 初 期 カレンダービュー C1Calendarにて デフォルトで 日 ビューが 表 示 され 月 の 日 を 表 示 します ユーザーが 日 付 を'yyyy/MM' 形 式 に 設 定 して 年 の 月 も 表 示 することができます ユーザーの 選 択 に 従 ってデフォルトビューまたは 初 期 ビューを 有 効 にするには InitialViewプ ロパティを 使 用 します InitialView プロパティは 以 下 のような 利 用 可 能 な 値 があります: 日 月 年 十 年 以 下 の 画 像 はC1CalendarのInitialViewプロパティが 上 記 に 記 載 された 値 に 設 定 した 場 合 を 示 します 27 Copyright GrapeCity inc. All rights reserved.

29 マルチカレンダービュー デフォルトカレンダーは 1つの 月 を 表 示 します 1つの 月 は 1 列 と1 行 から 構 成 します C1Calendar にMonthColsプロパ ティとMonthRowsプロパティの 値 を 変 更 して 同 じ 年 の 複 数 の 月 を 表 示 できます マルチカレンダー 表 示 MonthCols またはMonthRows を 2 以 上 の 整 数 値 に 設 定 し 複 数 のカレンダーを 表 示 できます MonthCols プロパティは 月 ビューの 列 数 を 決 定 し MonthRowsプロパティは 月 ビューの 行 数 を 決 定 します 水 平 方 向 のカレンダー 水 平 方 向 のカレンダーは 行 数 よりも 列 数 が 多 くなります 以 下 のカレンダーには 2 列 (4 月 に1 列 5 月 に1 列 ) および1 行 ( 両 方 のカレンダー 月 を 水 平 方 向 に 表 示 )があります 垂 直 方 向 のカレンダー 垂 直 方 向 のカレンダーは 列 数 より 行 数 が 多 くなります MonthRows プロパティを 1 だけ 大 きくすると 現 在 の 月 の 下 に 12 カ 月 表 示 カレンダーでの 次 の 月 が 追 加 します 以 下 の 画 像 は MonthColsまたはMonthRowsの 値 が2であるC1Calenderを 示 しています 28 Copyright GrapeCity inc. All rights reserved.

30 ポップアップカレンダー C1Calendar は C1Calendar.Popup クライアント 側 メソッドを 使 用 し PopupMode プロパティを 有 効 にすると ポップアップ カレンダーとして 動 作 できます ポップアップカレンダーを 作 成 する 方 法 についての 詳 細 は ポップアップカレンダーの 作 成 を 参 照 してください カレンダー 選 択 C1Calendar には SelectionMode プロパティからカレンダー 上 の 単 一 または 複 数 の 日 を 選 択 するためのマルチカレン ダー 選 択 オプションがあります デフォルト 選 択 は 単 一 の 日 の 選 択 に 設 定 します SelectionMode プロパティに 含 まれる 選 択 タイプは 次 のとおりです 選 択 タイプ Day Days Month WeekDay WeekNumber 説 明 単 一 の 日 を 選 択 できます 単 一 の 日 を 選 択 できます 月 全 体 を 選 択 できます 月 全 体 を 選 択 できます 月 全 体 を 選 択 できます 各 選 択 タイプには 固 有 のスタイルプロパティが 含 まれ ユーザーは 各 選 択 タイプに 異 なるスタイルを 適 用 できるため カレン ダーコントロール 上 の 各 選 択 タイプを 視 覚 的 に 区 別 できます MaxDate と MinDate プロパティから カレンダー 上 での 日 付 選 択 の 最 大 日 付 と 最 小 日 付 を 指 定 できます デフォルトでは 最 小 日 付 は 1900/1/1 最 大 日 付 は 2099/12/31 です 最 大 日 付 と 最 小 日 付 が 適 用 された 場 合 これらの 値 を 超 えた 日 付 は 29 Copyright GrapeCity inc. All rights reserved.

31 選 択 できなくなります そのため ユーザーが 指 定 した 範 囲 外 の 日 付 を 選 択 しようとすると 選 択 スタイルまたはアクションは 適 用 できなくなります カレンダーの 第 1 週 のすべての 日 またはすべての 週 末 など 特 定 の 範 囲 の 日 付 を 選 択 する 必 要 がある 場 合 1 回 の 選 択 で 自 動 的 にそれらの 日 を 選 択 するには カレンダーのセレクタを 使 用 できます マウスを 何 度 もクリックしたり キーを 何 度 も 押 し たりしなくても 単 にセレクタの 上 にマウスを 置 くだけで 指 定 した 範 囲 の 日 を 選 択 できます セレクタの 詳 細 については カレ ンダーのセレクタ を 参 照 してください カレンダーのセレクタ C1Calendar は 曜 日 セレクタ 週 番 号 セレクタ および 月 セレクタを 提 供 し 曜 日 週 番 号 月 全 体 の 日 を 迅 速 に 選 択 できま す SelectionMode と ShowWeekNumbers の 各 プロパティをカスタマイズし 3つのセレクタをすべて 使 用 することも 3つ の 中 から1つまたは2つ 使 用 することもできます 月 セレクタ SelectionMode プロパティで 月 値 を 有 効 にし ShowWeekNumbers を 有 効 にした 場 合 月 ビューの 左 上 端 にデフォルトの MonthSelectorImage が 表 示 します [ 月 セレクタ]は マウスカーソルがその 上 に 置 かれたときに 月 のすべての 日 付 を 選 択 します 曜 日 セレクタ 曜 日 セレクタは カレンダータイトルの 下 (またはカレンダーにヘッダーがあるときはヘッダーの 下 )に 表 示 します 日 曜 日 ~ 土 曜 日 の 曜 日 名 を 表 し カレンダー 日 の 上 に 水 平 方 向 に 表 示 します SelectionMode プロパティで 日 と 曜 日 の 値 を 有 効 にした 場 合 実 行 時 に 曜 日 セレクタを 使 用 し カレンダー 内 の 曜 日 を 選 択 で きます 週 番 号 セレクタ ShowWeekNumbers が 有 効 にされた 場 合 カレンダーの 左 側 に 垂 直 方 向 に 週 番 号 が 表 示 します 週 番 号 は カレンダー 月 の 各 週 の 週 番 号 を 表 します カレンダー 年 には 合 計 52 週 あるため 週 番 号 は1~ 52 の 範 囲 となります SelectionMode プロパティで 日 と 曜 日 の 値 を 有 効 にした 場 合 実 行 時 に 週 番 号 セレクタを 使 用 し カレンダー 内 の 週 番 号 を 選 択 できます デフォルトでは SelectionMode プロパティで 日 のみが 有 効 です カレンダー 月 の 特 定 の 週 を 選 択 するには カーソルを 週 番 号 の 上 に 移 動 します カレンダー 日 デフォルトの C1Calendar コントロールは 1つのカレンダー 月 に 対 して7 日 x6 週 のカレンダーマトリックスを 表 示 します 7 列 は カレンダー 上 に 表 示 される 曜 日 ( 日 曜 日 ~ 土 曜 日 )を 表 し 6 行 はカレンダー 上 に 表 示 される 週 を 表 します DayRows プロパ ティの 整 数 値 を 大 きくすると カレンダー 上 に 表 示 されるカレンダー 日 数 を 変 更 できます デフォルトのカレンダーでは 最 小 と 最 大 カレンダー 日 がデフォルトで 1900/1/1 と 2099/12/31 の 日 付 に 設 定 されているた め 1900/1/1 ~ 2099/12/31 の 範 囲 の 日 付 を 選 択 できます オプションとして MaxDate と MinDate プロパティの 日 付 値 を 指 定 し 選 択 可 能 な 日 付 をカスタマイズできます デフォルトコントロールは 一 度 に1つのカレンダー 月 の 日 付 を 表 示 します オプションとして MonthCols また は MonthRows を2 以 上 の 整 数 値 に 設 定 し 一 度 に 複 数 のカレンダー 月 を 表 示 できます マルチカレンダービューとそのレイ アウトの 詳 細 については マルチカレンダービュー を 参 照 してください コントロールでサポートされている 日 付 タイプは 下 の 表 のとおりです 日 付 タイプ DisplayDate 説 明 現 在 の 表 示 月 の 選 択 を 取 得 または 設 定 します 表 示 日 と 他 の 日 付 を 視 覚 的 に 区 別 するには 表 示 日 の 外 観 を 他 のタイプの 日 付 から 一 意 に します 表 示 日 の 外 観 は そのプロパティスタイルを 使 用 してカスタマイ ズできます 30 Copyright GrapeCity inc. All rights reserved.

32 DisabledDates これは ユーザーがカレンダー 上 で 選 択 して 無 効 にする 日 ( 複 数 可 )を 指 定 する 日 付 または 日 付 範 囲 です 無 効 な 日 と 他 の 日 付 を 視 覚 的 に 区 別 するには 無 効 な 日 の 外 観 を 他 のタイプの 日 付 から 一 意 にしま す 無 効 な 日 の 外 観 は そのプロパティスタイルを 使 用 してカスタマイ ズできます SelectedDate, SelectedDates これは ユーザーがカレンダー 上 で 選 択 した 日 を 指 定 する 日 付 (SelectedDate) または 日 付 範 囲 (SelectedDates) です 選 択 した 日 と 他 の 日 を 視 覚 的 に 区 別 するには 選 択 した 日 の 外 観 を 他 のタイプの 日 から 一 意 にします 選 択 した 日 の 外 観 は そのプロパティスタイルを 使 用 してカスタマイズできます 日 付 書 式 パターン C1Calendar によってサポートされている 標 準 の 日 付 書 式 文 字 は 下 の 表 のとおりです 書 式 文 字 は 大 文 字 小 文 字 を 区 別 します たとえば d と D は 異 なるパターンを 表 します 書 式 文 字 関 連 するプロパティ/ 説 明 データ 書 式 の 使 用 例 d 短 い 形 式 の 日 付 パターン 2007/1/23 D 長 い 形 式 の 日 付 パターン 2007 年 1 月 23 日 dddd, MMMMM dd 月 の 完 全 名 月 の 日 にち 曜 日 の 完 全 名 7 月 1 日 日 曜 日 d MMMM 月 の 完 全 名 月 の 日 にち 7 月 1 日 ddd 曜 日 の 完 全 名 火 曜 日 "d 曜 日 の 略 名 火 "'d 月 の 日 にち 23 標 準 の 日 付 書 式 は 文 字 列 要 素 と 組 み 合 わせて より 高 度 な 日 付 処 理 と 表 示 を 達 成 できます C1Calendar の TitleFormat プロパティは カレンダータイトルと 月 ビュータイトルの 表 示 の 日 付 ピクチャ 文 字 列 要 素 から 処 理 される いくつかの 定 義 済 みの 書 式 を 提 供 します カレンダータイトルの 書 式 設 定 における 書 式 文 字 列 の 使 用 方 法 の 詳 細 については カレ ンダータイトルへの 組 み 込 み 日 付 形 式 パターンの 適 用 を 参 照 してください 選 択 した 日 SelectedDate プロパティを 設 定 すると コントロール 内 で 個 々の 日 付 が 強 調 表 示 します 選 択 した 日 値 を[DateTime コレク ションエディター]に 追 加 し 複 数 の 選 択 した 日 を 設 定 できます [DateTime コレクションエディター]にアクセスする [DateTime コレクションエディター]にアクセスするには 以 下 の 手 順 を 実 行 します 1. C1Calendar のプロパティウィンドウから SelectedDates プロパティを 検 索 します 2. SelectedDates プロパティの 横 にある ボタンをクリックします オプションとして ユーザーは 日 付 をクリックするか 月 の 間 を 移 動 して 任 意 の 日 付 に 移 動 できます ユーザーが 複 数 の 日 付 週 全 体 または 月 全 体 を 選 択 できるようにカレンダーを 構 成 できます 無 効 な 日 C1Calendar.DisableDates プロパティを 設 定 すると コントロール 内 の 特 定 の 日 付 が 無 効 になります 31 Copyright GrapeCity inc. All rights reserved.

33 無 効 な 日 C1Calendar は カレンダーコントロールの 無 効 な 日 を 指 定 できる DateTime コレクションエディターを 提 供 します 追 加 ま たは 削 除 ボタンをクリックし 日 付 を 簡 単 にエディタに 追 加 したり エディタから 削 除 したりできます DateTime コレクションエディターは 下 図 のように 表 示 します [DateTime コレクションエディター]にアクセスする [DateTime コレクションエディター]にアクセスするには 以 下 の 手 順 を 実 行 します: 1. C1Calendar のプロパティウィンドウから DisableDates プロパティを 検 索 します 2. DisableDates プロパティの 横 にある ボタンをクリックします 32 Copyright GrapeCity inc. All rights reserved.

34 サーバー 側 カレンダー C1Calendar には コードビハインドでプログラムによってカレンダーをカスタマイズできるいくつかのサーバー 側 イベントが 含 まれます サーバー 側 イベントを 呼 び 出 すには AutoPostBack プロパティを True に 設 定 し サーバー 側 にデータをポスト バックする 必 要 があります 下 の 表 に サーバー 側 で 使 用 できるイベントを 示 します イベント DisplayDateChanged SelectedDatesChanged 説 明 ナビゲーションによって DisplayDate プロパティが 変 更 されたときに 発 生 します マウスクリックによって SelectedDates プロパティが 変 更 されたときに 発 生 します 33 Copyright GrapeCity inc. All rights reserved.

35 クライアント 側 の 機 能 C1Calendar のクライアント 側 には サーバー 側 コントロールにおけるオブジェクトモデルに 匹 敵 する 非 常 に 充 実 したクライア ント 側 オブジェクトモデルがあります C1Calendar コントロールが 表 示 されると クライアント 側 カレンダーのインスタンスが 自 動 的 に 作 成 されます これは サー バーにポストバックすることなく C1Calendar コントロールのあらゆるプロパティとメソッドに 簡 単 にアクセスできることを 意 味 し ます たとえば C1Calendar1 という 名 前 の C1Calendar コントロールが Web ページ 上 に 配 置 されると 仮 定 します ページが 表 示 されると C1Calendar1_Client という 名 前 の 対 応 するクライアントカレンダーオブジェクトが 作 成 されます C1Calendar のクライアント 側 コードを 使 用 すれば 時 間 をかけて Web サーバーに 情 報 を 送 信 しなくても Web ページに 多 く の 機 能 を 実 装 できます そのため クライアント 側 コードを 使 用 すると Web サイトの 効 率 を 向 上 させることができます クライアント 側 イベント C1Calendar には 以 下 のアクションが 発 生 するときに C1Calendar を 操 作 できるいくつかのクライアント 側 イベントが 含 まれます カレンダーが 閉 じた 後 ポップアップカレンダーが 表 示 された 後 カレンダーが 閉 じる 前 カレンダー 上 で 日 付 選 択 が 変 更 されるとき JavaScript などのクライアント 側 コードを 使 用 すれば Web サーバーへの 時 間 のかかる 情 報 送 信 を 行 わずに Web ページに 多 くの 機 能 を 実 装 できるため クライアント 側 コードを 使 用 すると Web サイトの 効 率 が 向 上 します C1Calendarコントロールは 実 行 時 にアクションが 発 生 したときに 実 行 させる 対 応 のクライアント 側 イベント( 上 記 の 表 参 照 )を 指 定 する 以 下 の 文 字 列 プロパティを 公 開 します プロパティ OnClientAfterSelect OnClientAfterSlide OnClientBeforeSelect OnClientBeforeSlide OnClientCustomizeDate OnClientSelectedDatesChanged 説 明 日 付 が 選 択 された 後 に 発 生 します 月 ビューがスライドされた 後 に 発 生 します 日 付 が 選 択 される 前 に 発 生 します 月 ビューがスライドされる 前 に 発 生 します 日 のセルのコンテンツ スタイルと 属 性 をカスタマイズするためのコールバック 関 数 です 選 択 した 日 のコレクションが 変 更 される 前 に 発 生 します これらのイベントは クライアント 側 で 対 話 性 を 実 現 する 際 に 便 利 です これらのイベントを 利 用 すれば ユーザーとC1Calendarの 対 話 方 法 を 制 御 することによって C1Calendar の 制 御 を 強 化 できます これらのイベントを 処 理 するには Web フォームのソースページに JavaScript 関 数 を 追 加 し コントロールにC1Calendarクライアン ト 側 イベントに 応 答 してこれらの 関 数 を 呼 び 出 させる 必 要 があります 上 記 の 表 にリストされたサーバー 側 プロパティを 使 用 して 特 定 のクライアント 側 イベントに 反 応 する JavaScript 関 数 の 名 前 を 指 定 できます たとえば AfterSelect 関 数 を 割 り 当 てて カレンダーが 閉 じたときにカレンダーに 応 答 させるに は OnClientAfterSelect プロパティを AfterSelect に 設 定 します 34 Copyright GrapeCity inc. All rights reserved.

36 タスク 別 ヘルプ タスク 別 ヘルプは ASP.NET のプログラミングに 習 熟 し コントロールの 使 用 方 法 を 全 般 的 に 理 解 しているユーザーを 対 象 とし ています ヘルプに 記 述 された 手 順 に 従 うことによって さまざまな C1Calendar の 機 能 をデモンストレーションするプロジェク トを 作 成 して C1Calendar コントロールの 用 途 を 理 解 することができます カスタム 日 付 の 作 成 C1Calendar はクライアント 上 の 各 日 付 セルの 表 示 のカスタマイズをサポートします 日 付 セルのカスタマイズ は OnClientCustomizeDate プロパティで 指 定 されたクライアント 側 コールバック 関 数 を 実 装 することで 実 行 されます コールバック 関 数 の 引 数 は 次 のとおりです daycell カスタマイズする 日 付 のテーブルセルを 表 す jquery オブジェクト date セルの 日 付 daytype 日 のタイプ Hover マウスが 日 セル 上 にあるかどうか Preview プレビュー コンテナにレンダリングするかどうか カスタム 日 付 を 作 成 するには OnClientCustomizeDate プロパティによって 指 定 されたクライアント 側 コールバック 関 数 を 次 のように 実 装 します ソースビュー <script type="text/javascript"> function customizedate($daycell, date, daytype, hover, preview) { if (date.getmonth() === 11 && date.getdate() === 25) { var $img = $('<div></div>').width(16).height(16).css('background-image', 'url(images/xmas.png)'); $daycell.attr('align', 'right').empty().append($img); } if ($daycell.hasclass('ui-datepicker-current-day')) { $daycell.css('background-color', '#aaa'); } else $daycell.css('background-color', hover? 'lightgray' : ''); return true; } return false; </script> <cc1:c1calendar ID="C1Calendar1" runat="server" DisplayDate=" " onclientcustomizedate="customizedate"> </cc1:c1calendar> このトピックの 作 業 結 果 カスタム 日 付 に 対 してカスタム 画 像 が 指 定 されます 35 Copyright GrapeCity inc. All rights reserved.

37 ポップアップカレンダーの 作 成 以 下 の 手 順 では クライアント 側 オブジェクトモデルを 使 用 して C1Calendar をポップアップカレンダーにし サーバーにポスト バックすることなく 充 実 したポップアップカレンダーを 作 成 する 方 法 について 説 明 します クライアント 側 カレンダーにスクリプ トを 割 り 当 てて C1Calendar のデフォルト 動 作 を 簡 単 にポップアップカレンダーに 設 定 できます 数 行 の JavaScript を 記 述 して click イベントを HTML マークアップ.aspx ページ 内 でそれに 関 連 付 けたコントロール (TextBox コントロールなど)に 宣 言 するだけで ポップアップカレンダーを 作 成 できます C1Calendarポップアップカレンダーをテキストボックスコントロールなどの 入 力 コントロールに 関 連 付 けて ユーザーがポップ アップカレンダー 上 の 日 付 を 選 択 した 場 合 にポップアップコントロールを 閉 じるようにします この 手 順 を 実 行 すると ユーザーは 以 下 の 操 作 が 可 能 になります C1Calendar のクライアント 側 オブジェクトのアクセス 操 作 ポップアップカレンダーを 入 力 コントロールに 関 連 付 ける Offset プロパティを 使 用 してポップアップカレンダーの 位 置 を 決 定 する ユーザーが 日 付 を 選 択 したときにポップアップカレンダーを 閉 じる 実 行 時 にユーザーがボタンコントロールをクリックしたときにテキストボックスコントロールの 左 下 に 表 示 されるクライアント 側 ポップアップカレンダーを 作 成 するには Popupメソッドを 使 用 してクライアント 側 関 数 を 作 成 します 以 下 の 手 順 を 実 行 しま す 1. ページに HTML TextBox およびC1Calendar の 各 コントロールを 追 加 します 2..aspx ページで Click と SelectDate 関 数 に 対 して 以 下 のスクリプトを 追 加 します ソースビュー <script type="text/javascript"> function customizedate($daycell, date, daytype, hover, preview) { if (date.getmonth() === 11 && date.getdate() === 25) { var $img = $('<div></div>').width(16).height(16).css('background-image', 'url(images/xmas.png)'); $daycell.attr('align', 'right').empty().append($img); if ($daycell.hasclass('ui-datepicker-current-day')) { $daycell.css('background-color', '#aaa'); } else $daycell.css('background-color', hover? 'lightgray' : ''); 36 Copyright GrapeCity inc. All rights reserved.

38 } return true; } return false; </script> <cc1:c1calendar ID="C1Calendar1" runat="server" DisplayDate=" " onclientcustomizedate="customizedate"> </cc1:c1calendar> 上 記 の 最 初 の Click 関 数 は Click イベントと offset プロパティを 使 用 し ポップアップカレンダーのドッキング 配 置 を 決 定 し ユーザーが 関 連 付 けられている 要 素 (TextBox1 など) 内 にクリックすると ポップアップカレンダーを 表 示 させ ます 上 記 2 番 目 の SelectDate 関 数 は ポップアップカレンダーが 閉 じたときに 選 択 した 日 の 値 をテキストコントロールに 割 り 当 てます 3. デザインビューに 切 り 替 えて サーバー 側 プロパティに 割 り 当 てます OnClientSelectedDatesChanged プロパティを 関 数 名 ʺSelectDateʺ に PopupMode プロパティを True に 設 定 します OnClientSelectedDatesChanged プロパ ティは ポップアップカレンダーが 閉 じた 後 に SelectDate 関 数 を 呼 び 出 し 選 択 した 日 の 値 をテキストボックスに 割 り 当 てます Web ページを 実 行 し 実 行 時 に 以 下 のタスクを 実 行 します テキストボックスコントロール 内 にクリックされた 場 合 C1Calendar コントロールがその 下 に 表 示 されるようにします ポップアップカレンダーから 日 付 を 選 択 します ポップアップカレンダーが 閉 じ 選 択 した 日 付 がテキストボックスコントロールに 割 り 当 てられます C1Calendar の 外 観 のカスタマイズ このセクションでは カレンダーの 要 素 にスタイルを 適 用 し 基 本 的 な 外 観 プロパティを 設 定 して C1Calendar の 外 観 をカスタ 37 Copyright GrapeCity inc. All rights reserved.

39 マイズする 手 順 について 説 明 します テーマの 変 更 C1Calendar には 数 回 クリックするだけでコントロールに 適 用 できる6つのテーマが 組 み 込 まれています このトピックでは デザインビューおよびソースビューを 使 用 してテーマを 変 更 する 方 法 を 説 明 します 視 覚 スキームの 詳 細 については テーマ を 参 照 してください デザインビューでのテーマの 変 更 C1Calendarのテーマを 変 更 するには 以 下 の 手 順 を 実 行 します 1. C1Calendar のスマートタグをクリックし [C1Calendar タスク]メニューを 開 きます 2. テーマのドロップダウン 矢 印 をクリックし リストからテーマを 選 択 します この 例 では Cobaltを 選 択 します C1Calendar コントロールが Cobaltのテーマを 採 用 します このトピックの 作 業 結 果 次 の 図 は テーマ Cobalt を 適 用 した C1Calendar を 示 しています 38 Copyright GrapeCity inc. All rights reserved.

40 カスタムテーマの 追 加 Calendar for ASP.NET Web Forms には6 種 類 の 組 み 込 みテーマが 用 意 されていますが 異 なるテーマを 使 用 する 場 合 は CDN URL を 使 用 して 既 存 のテーマを 選 択 するか jquery ThemeRoller Web アプリケーションを 使 用 して 独 自 のカスタム テーマを 作 成 することができます CDN URL の 使 用 1. C1Calendar のスマートタグをクリックし [タスク]メニューを 開 きます 2. [CDN の 使 用 ]を 選 択 します 3. Theme プロパティに CDN URL を 入 力 してテーマを 指 定 します CDN URL は 確 認 できます この 例 では 次 の Sunny テーマを 使 用 し ます: このテーマ 設 定 は Web.config ファイルの <appsettings> に 格 納 されています ソリューションエクスプローラで Web.config ファイルをダブルクリックします <appsettings> タグに WijmoTheme キーと 値 が 含 まれていることに 注 意 してください これは 追 加 した CDN URL が 指 定 されている 場 所 です 4. プロジェクトを 実 行 し テーマが Calendar に 適 用 されていることを 確 認 してください jquery ThemeRoller の 使 用 1. に 移 動 します 2. Roll Your Own タブで 設 定 を 変 更 してカスタムテーマを 作 成 します フォント 色 背 景 枠 線 などをカスタマイズで きます または Gallery タブをクリックして 既 存 のテーマを 選 択 します 3. Download ボタンをクリックし Build Your Download ページでもう 一 度 Download をクリックします 4. テーマの.zip ファイルを Visual Studio プロジェクトフォルダ 内 のフォルダに 保 存 し 解 凍 します この 例 では Themes フォルダを 作 成 しました 5. ソリューションエクスプローラで プロジェクト 名 を 選 択 して 更 新 ボタンをクリックすると プロジェクト 内 に Themes フォルダが 表 示 されます 6. C1Calendar のスマートタグをクリックし [タスク]メニューを 開 きます 7. [CDN の 使 用 ]を 選 択 します 8. C1Calendar コントロールを 右 クリックして プロパティウィンドウの Theme プロパティに 移 動 し カスタムテーマ.css へのパス(たとえば Themes/css/custom-theme/jquery-ui custom.css)を 入 力 します このテーマ 設 定 は Web.config ファイルの <appsettings>に 格 納 されています ソリューションエクスプローラで Web.config ファイルをダブルクリックします <appsettings> タグに WijmoTheme キーと 値 が 含 まれていることに 注 意 してください これは 追 加 したカスタムテーマが 指 定 されている 場 所 です 9. プロジェクトを 実 行 し テーマが C1Calendar に 適 用 されていることを 確 認 してください カレンダータイトルへの 組 み 込 み 日 付 形 式 パターンの 適 用 このトピックでは 組 み 込 みの 日 付 形 式 パターンを 使 用 し カレンダータイトルをカスタマイズして 特 定 の 日 付 書 式 を 表 示 する 方 法 について 説 明 します TitleFormatプロパティを 使 用 してカレンダータイトルを 書 式 設 定 する 場 合 カレンダーの 月 の 完 全 名 年 月 の 省 略 名 年 月 日 年 月 の 省 略 名 範 囲 年 (マルチカレンダーの 場 合 ) 月 の 完 全 名 範 囲 年 (マルチカレンダーの 場 合 ) 月 日 範 囲 年 (マルチカレンダーの 場 合 )のいずれかを 表 示 できます 以 下 のトピックでは カレンダータイトルをカスタマイズする 各 種 のオプションについて 説 明 します カレンダーの 月 の 完 全 名 と 年 の 表 示 カレンダーの 月 の 完 全 名 と 年 を 表 示 するには 以 下 の 手 順 を 実 行 します 39 Copyright GrapeCity inc. All rights reserved.

41 1. ページに C1Calendar を 追 加 します 2. C1Calendar のプロパティウィンドウで TitleFormatプロパティを 選 択 して 日 付 書 式 パターン yyyy 年 MMMM を 入 力 します カレンダータイトルに カレンダーの 月 の 完 全 名 と 年 が 表 示 します カレンダーの 月 の 省 略 名 と 年 の 表 示 カレンダーの 月 の 省 略 名 と 年 を 表 示 するには 以 下 の 手 順 を 実 行 します 1. Web フォームに C1Calendar を 追 加 します 2. C1Calendar のプロパティウィンドウで TitleFormatプロパティのドロップダウンボタンをクリックして カスタム 日 付 書 式 パターンの 一 覧 を 開 きます 3. 日 付 書 式 パターン "yyyy/mmm" を 選 択 します カレンダータイトルに カレンダーの 月 の 省 略 名 と 年 が 表 示 します カレンダーの 月 と 年 の 表 示 カレンダーの 月 と 年 を 表 示 するには 以 下 の 手 順 を 実 行 します 1. Web フォームに C1Calendar を 追 加 します 2. C1Calendar のプロパティウィンドウで TitleFormatプロパティのドロップダウンボタンをクリックして カスタム 日 付 書 式 パターンの 一 覧 を 開 きます 3. 日 付 書 式 パターン yyyy-mm を 選 択 します カレンダータイトルに カレンダーの 日 月 と 年 が 表 示 します 40 Copyright GrapeCity inc. All rights reserved.

42 カレンダータイトルへのカスタム 日 付 書 式 パターンの 適 用 組 み 込 みのカスタム 日 付 書 式 パターンに 加 え カスタム 日 付 書 式 パターンを 適 用 して カレンダータイトルまたは 月 ビュータイ トルをカスタマイズすることもできます C1Calendar は すべての 日 付 書 式 パターンをサポートしているため 任 意 の 日 付 書 式 パターンを TitleFormat に 適 用 できます カレンダータイトルにカスタム 日 付 書 式 パターンを 適 用 するには 以 下 の 手 順 を 実 行 します 1. ページにC1Calendarを 追 加 します 2. C1Calendar のプロパティウィンドウで TitleFormat プロパティに yyyy/mm/dd 値 を 設 定 します カレンダータイトルに カスタム 日 付 書 式 パターンが 表 示 します 月 ビューでのカレンダータイトルに 日 付 書 式 の 適 用 C1Calendarの 月 ビューにて タイトルはMonthViewTitleFormatのプロパティで 設 定 されます MonthViewTitleFormatプロパティのデフォルト 値 は yyyy です 以 下 の 画 像 は 月 ビューのデフォルトタイトルを 表 示 します 41 Copyright GrapeCity inc. All rights reserved.

43 また 月 ビューにてカスタムフォーマットを 表 示 するには タイトルをカスタマイズすることができます たとえば 以 下 の 画 像 はMonthViewTitleFormatが gg yy に 設 定 したカレンダータイトルを 示 します ナビゲーションタスク 以 下 のトピックでは カレンダーのナビゲーションオプションを 使 用 する 方 法 を 示 します 外 側 のナビゲーションボタンを 使 用 したカレンダーの 移 動 外 側 のナビゲーションボタンは 二 重 矢 印 の 前 へ / 次 へ ボタンを 表 します NavButtons プロパティを quick に 設 定 し 外 側 のナビゲーションボタンを 表 示 します QuickNavStep プロパティは 外 側 のナビゲーションボタンに 適 用 されます このプロパティのデフォルト 値 は 12 に 設 定 され 前 へ / 次 へ ナビゲーションボタンをクリックすると カレンダー 月 が 12 カ 月 分 ずつ 移 動 することを 意 味 します デザインビューの 場 合 : 外 側 のナビゲーションボタンを 使 用 してカレンダー 月 を3カ 月 分 ずつ 移 動 するには 以 下 の 手 順 を 実 行 します 1. Web フォームに C1Calendar を 追 加 します 2. C1Calendar のプロパティウィンドウで NavButtons プロパティのドロップダウンボタンをクリックして Quick を 選 択 し ます 3. QuickNavStep プロパティを 3 に 設 定 します ソースビューの 場 合 : ソースビュー <cc1:c1calendar ID="C1Calendar1" runat="server" NavButtons="Quick" QuickNavStep="3"> 42 Copyright GrapeCity inc. All rights reserved.

44 </cc1:c1calendar> このトピックの 作 業 結 果 クイック - 次 へ ボタンをクリックして カレンダー 月 を3カ 月 先 へジャンプします 次 のカレンダー 月 のプレビュー 現 在 の 月 を 切 り 替 えずに 次 の 月 や 前 の 月 の 開 始 日 と 終 了 日 を 確 認 する 場 合 カレンダープレビュー 機 能 を 使 用 できます カレンダープレビューは 前 の/ 次 のカレンダービュー( 月 )のポップアップカレンダーを 表 示 するプレビュー 領 域 を 提 供 しま す この 機 能 は allowpreview オプションを True に 設 定 した 場 合 に 使 用 できます デザインビューの 場 合 : 外 側 のナビゲーションボタンを 使 用 してカレンダー 月 を3カ 月 分 ずつ 移 動 するには 以 下 の 手 順 を 実 行 します 1. Web フォームに C1Calendar を 追 加 します 2. C1Calendar のプロパティウィンドウで AllowPreviewプロパティを True に 設 定 します ソソースビューの 場 合 : ソースビュー <cc1:c1calendar ID="C1Calendar1" runat="server" AllowPreview="True"> </cc1:c1calendar> このトピックの 作 業 結 果 プロジェクトをロードすると いずれかの 側 のコントロールの 上 にマウスポインタを 置 くことによって 次 の 月 または 前 の 月 をプレ ビューできます 43 Copyright GrapeCity inc. All rights reserved.

45 選 択 タスク 以 下 のトピックでは カレンダーの 選 択 オプション 使 用 する 方 法 を 示 します カレンダーの 週 番 号 の 選 択 カレンダーの ShowWeekNumbers プロパティが 有 効 にされた 場 合 カレンダーの 左 側 に 垂 直 方 向 に 週 番 号 が 表 示 します 週 番 号 は カレンダー 月 の 各 週 の 週 番 号 を 表 します カレンダー 年 には 合 計 52 週 あるため 週 番 号 は1~ 52 の 範 囲 となり ます SelectionMode プロパティで 日 と 週 番 号 の 値 を 有 効 にした 場 合 実 行 時 に 週 番 号 セレクタを 使 用 し カレンダー 内 の 週 番 号 を 選 択 できます デフォルトでは SelectionMode プロパティで 日 のみが 有 効 です デザインビューの 場 合 : 週 番 号 の 選 択 を 有 効 にするには 以 下 の 手 順 を 実 行 します 1. Web フォームに C1Calendar を 追 加 します 2. C1Calendar のプロパティウィンドウで ShowWeekNumbers プロパティを True に 設 定 します 3. C1Calendar のプロパティウィンドウで SelectionMode プロパティのノードを 展 開 し WeekNumber を True に 設 定 します ソースビューの 場 合 : ソースビュー <cc1:c1calendar ID="C1Calendar1" runat="server" ShowWeekNumbers="True"> <SelectionMode WeekNumber="True" /> </cc1:c1calendar> このトピックの 作 業 結 果 カレンダー 月 の 特 定 の 週 を 選 択 するには カーソルを 週 番 号 の 上 に 移 動 します 44 Copyright GrapeCity inc. All rights reserved.

46 カレンダー 月 の 選 択 カレンダー 月 の 選 択 を 有 効 にするには 次 のように SelectionMode プロパティの month 値 を true に 設 定 し ShowWeekNumbers を true に 設 定 します デザインビューの 場 合 : 1. Web フォームにC1Calendar を 追 加 します 2. C1Calendar のプロパティウィンドウで ShowWeekNumbers プロパティを True に 設 定 します 3. C1Calendar のプロパティウィンドウで SelectionMode プロパティのノードを 展 開 し Month を True に 設 定 します ソソースビューの 場 合 : ソースビュー <cc1:c1calendar ID="C1Calendar1" runat="server" ShowWeekNumbers="True"> <SelectionMode Month="True" /> </cc1:c1calendar> このトピックの 作 業 結 果 MonthSelectorImage が 月 ビューの 左 上 端 に 表 示 します 月 セレクタは マウスカーソルがその 上 に 置 かれたときに 月 の すべての 日 付 を 選 択 します カレンダーの 曜 日 の 選 択 45 Copyright GrapeCity inc. All rights reserved.

47 曜 日 セレクタは カレンダータイトルの 下 (またはカレンダーにヘッダがあるときはヘッダの 下 )に 表 示 します 日 曜 日 ~ 土 曜 日 の 曜 日 名 を 表 し カレンダー 日 の 上 に 水 平 方 向 に 表 示 します SelectionMode プロパティで 日 と 曜 日 の 値 を 有 効 にした 場 合 実 行 時 に 曜 日 セレクタを 使 用 し カレンダー 内 の 曜 日 を 選 択 で きます デザインビューの 場 合 : 1. Web フォームに C1Calendar を 追 加 します 2. C1Calendar のプロパティウィンドウで SelectionMode プロパティのノードを 展 開 し WeekDay を True に 設 定 しま す ソソースビューの 場 合 : ソースビュー <cc1:c1calendar ID="C1Calendar1" runat="server"> <SelectionMode WeekDay="True" /> </cc1:c1calendar> このトピックの 作 業 結 果 カレンダー 日 の 上 に 水 平 方 向 に 表 示 される 日 や 月 など 任 意 の 曜 日 名 を 選 択 します 最 小 および 最 大 日 付 範 囲 の 設 定 以 下 の 手 順 では MinDate プロパティと MaxDate プロパティを 設 定 し 特 定 の 日 付 範 囲 を 表 示 する 方 法 を 示 します デザインビューの 場 合 : 1. Web フォームに C1Calendar を 追 加 します 2. C1Calendar のプロパティウィンドウで MinDate プロパティのドロップダウンボタンをクリックして それを 2013/1/16 に 設 定 します 3. MaxDate プロパティを 2013/1/28に 設 定 します ソソースビューの 場 合 : ソースビュー <cc1:c1calendar ID="C1Calendar1" runat="server" AllowPreview="True"> </cc1:c1calendar> このトピックの 作 業 結 果 46 Copyright GrapeCity inc. All rights reserved.

48 以 下 のカレンダーは 2013 年 1 月 16 日 ~ 2013 年 1 月 28 日 までの 特 定 の 日 付 範 囲 を 表 示 します クライアント 側 からの 日 付 の 選 択 クライアント 側 からカレンダーの 日 付 を 選 択 するには OnClientSelectedDatesChanged プロパティの 使 用 を 有 効 にして 選 択 した 日 付 の 値 を 箇 条 書 きリストに 割 り 当 て SelectedDatesChanged イベントをOnClientSelectedDatesChanged プロパ ティに 割 り 当 ててサーバー 側 から 選 択 した 日 付 を 取 得 し クライアント 側 から 日 付 が 選 択 されたときに AutoPostback プロパ ティを 有 効 にして 自 動 ポストバックを 有 効 にします ソソースビューの 場 合 : ソースビュー <cc1:c1calendar ID="C1Calendar1" runat="server" AutoPostBack="true" ShowWeekNumbers="true" onclientselecteddateschanged="c1calendar1_selecteddateschanged"> <SelectionMode Month="True" WeekDay="True" WeekNumber="True" /> </cc1:c1calendar> <p> 選 択 された 日 付 :</p> <asp:bulletedlist ID="BulletedList1" runat="server"> </asp:bulletedlist> このトピックの 作 業 結 果 カレンダーの 日 付 をいくつか 選 択 し 選 択 した 日 付 が 箇 条 書 きリストに 表 示 されることに 注 意 してください 47 Copyright GrapeCity inc. All rights reserved.

49 カルチャの 設 定 このトピックでは Culture プロパティを 使 用 して カレンダーのカルチャをスペイン 語 (アルゼンチン)に 設 定 する 方 法 について 説 明 します デザイン 時 にカルチャを 選 択 するには: C1Calendar コントロールに 対 して 特 定 のカルチャを 選 択 できます コントロールのCulture プロパティを 設 定 するには その プロパティウィンドウを 開 き ドロップダウンリストからカルチャを 選 択 するだけです HTML コードを 使 用 してカルチャを 選 択 するには: Culture 値 を 設 定 するには.aspx ページ 内 で 次 のソースコードを 使 用 します ソースビュー <cc1:c1calendar ID="C1Calendar1" runat="server" AllowPreview="True"> </cc1:c1calendar> このトピックの 作 業 結 果 カルチャ - スペイン 語 (スペイン)を 適 用 した C1Calendar コントロールは 次 のような 表 示 になります 48 Copyright GrapeCity inc. All rights reserved.

50 49 Copyright GrapeCity inc. All rights reserved.