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

使用説明:

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

通常、SelectDay は選択された日付に設定され、この日付のスタイルを設定する関数が onSelectDay に設定されます
たとえば。例では、SelectDay は月の 10 日に設定され、その日のスタイルを onSelect に設定します。

コード コードは次のとおりです。

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]; (var i = 0, len = flag.length; i
this.Days[flag[i]].innerHTML = "" flag[i] "";
}

この日付リストは例では固定されていますが、実際のアプリケーションでは年と月に応じて対応する日付リストを取得できます。
個人的には年と月を使用して取得することをお勧めします。アヤックス経由で。

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

テストコード:

ブログ スタイル カレンダー コントロール_www.jb51.net_Script ホーム<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> </title> <style type="text/css"> .Calendar { font-family:Verdana; font-size:12px; background-color:#e0ecf9; text-align:center; width:200px; height:160px; padding:10px; line-height:1.5em; } .Calendar a{ color:#1e5494; } .Calendar table{ width:100%; border:0; } .Calendar table thead{color:#acacac;} .Calendar table td { font-size: 11px; padding:1px; } #idCalendarPre{ cursor:pointer; float:left; padding-right:5px; } #idCalendarNext{ cursor:pointer; float:right; padding-right:5px; } #idCalendar td.onToday { font-weight:bold; color:#C60; } #idCalendar td.onSelect { font-weight:bold; } </style> <div class="Calendar"> <div id="idCalendarPre"> </div>>>><div id="idCalendarNext"> </div>2008<span id="idCalendarYear">骞</span> </div>