JavaScript ブログスタイルのカレンダー コントロールの新しいアルゴリズム

使用説明:

プログラムは比較的単純で、コード内に使用方法が記載されています。
最初のステップは、カレンダーをインスタンス化し、パラメーターを設定することです。
パラメータの説明:
Year: 表示する年
Month: 表示する月
SelectDay: 日付を選択
onSelectDay: 選択した日付でトリガー
onToday: 現在の日にトリガー
onFinish: カレンダーが表示された後にトリガー

一般的な SelectDay 設定を選択した日付に描画し、onSelectDay に関数を設定してこの日付のスタイルを設定します。
たとえば、この例では、SelectDay は今月 10 日に設定され、スタイルは onSelect on に設定されますその日:

SelectDay: new Date().setDate(10), 
onSelectDay: function(o){ o.className = "onSelect"; },

そして、onToday は今日の日付のスタイルを設定するために使用されます。
たとえば、この例では、今日の日付のスタイルは onToday:

onToday: function(o){ o.className = " に設定されています。 onToday"; },
onFinishには、カレンダーを設定する必要があるプログラムを置くことができます。
this.yearとthis.Monthにより、現在のカレンダーで表示されている年と月を取得できます。
データのある日付もここで設定されます。たとえば、この例では、今月のデータのある日付のリストがあり、このリストに基づいて対応する日付が設定されます。

var flag = [10,15,20]; 
for(var i = 0, len = flag.length; i < len; i++){ 
this.Days[flag[i]].innerHTML = "<a href=&#39;javascript:void(0);&#39; onclick=\"alert(&#39;日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"&#39;);return false;\">" + flag[i] + "</a>"; 
}

この例では、次のようになります。実際のアプリケーションでは、年と月に従って対応する日付リストを取得できます。個人的には、年と月を使用して ajax を使用して取得することをお勧めします。

プログラムには、PreMonth (前月を表示) と NextMonth (翌月を表示) という 2 つの便利なメソッドもあります。

テストコード:

 
 
 
 
 
 
 
 
 
 
<<
 
>>
 
2008年 8月 
 
 
 
日
 
一
 
二
 
三
 
四
 
五
 
六
 
 
 
 
 
 
 
 
 

JavaScriptブログスタイルカレンダーコントロールの新しいアルゴリズムに関連するその他の記事については、PHP中国語Webサイトに注目してください。