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="2012-12-25" onclientcustomizedate="customizeDate"> </cc1:C1Calendar> |
|
このトピックの作業結果
カスタム日付に対してカスタム画像が指定されます。
関連トピック