スケジュールをカレンダーに表示します。
Googleのカレンダーライクです。表示枠（テーブルセル）を超えるとスクロールバーが表示されます。
スケジュールはXMLで出力しています。schedule.xml
便宜上、現在の月以外のスケジュールも格納していますが、動的に出力する事を前提で作っています。
次の月、前の月をクリックするとPOSTでリクエストを送信します。名称：query 値：YYYY-mm 形式の日付
Ext.js 2系で動作確認しています。
※3系 以上では動作しません。
ダウンロード。
schedulecalendar.zip
インストール
以下のソースが含まれています。
***
+ example/
+ resources/
+ css/
+ ux/
+ xcalendar.css
+ source/
+ widgets/
+ ux/
+ schedulecalendar.js
resources/ source/ ディレクトリをExt.js のディレクトリにコピーしてご利用ください。Sample
Source
new Ext.ux.ScheduleCalendar({
width: 600,
height: 450,
margins: "10 10 60 10",
renderTo: "schedulecalendar",
store: new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: "sample.xml",
method: "get"
}),
reader: new Ext.data.XmlReader({
record: "item",
id: "id"
},[
{ name: "id", mapping: "id" },
{ name: "subject", mapping: "title" },
{ name: "startdate", mapping: "date" }
])
}),
listeners: {"scheduleselect": function( element ){
// scheduleselect event
debugger;
Ext.MessageBox.alert( "アラート", "ID: " + element.parameter );
}},
handler: function( e, date ) {
// dayclick event
Ext.MessageBox.alert( "アラート", date.format("Y/m/d") + "をクリックしました。" );
}
});
日付のクリック、スケジュールのクリックにそれぞれイベントを割り当てています。
それぞれ引数は以下を参照ください。
日付クリック:
handler(dayclick): arguments[ this Calendar Component, Datetime Object ]
スケジュールクリック:
scheduleselect: arguments[ { dom: targetDomElement, parameter: "ID" } ]
XMLデータを表示させる場合：
データの関係上、「スケジュールID、スケジュールタイトル、スケジュール日時」のみの対応としています。
XmlReaderで読み込む場合には、mappingを以下の通り指定してください。
スケジュールID: "id"
スケジュールタイトル: "subject"
スケジュール日時: "startdate"
※XML要素名が同じであればmappingを指定する必要はありません。
配列データを表示させる場合：
JsonReader等の処理は行っていません。配列に[ "ID", "タイトル", "日付" ]の順番で入力してください。
コードは以下を参考にしてください。
Source
var schedule = [ [ "1", "テスト", "2010/03/01 10:10" ], // ID, タイトル, 日付(YYYY/mm/dd HH/ii) [ "2", "テスト", "2010/03/01 10:11" ] ]new Ext.ux.ScheduleCalendar({ width: 600, height: 450, margins: "10 10 60 10", renderTo: "schedulecalendar", data: schedule, listeners: {"scheduleselect": function( element ){ // scheduleselect event Ext.MessageBox.alert( "アラート", "ID: " + element.parameter ); }}, handler: function( e, date ) { // dayclick event Ext.MessageBox.alert( "アラート", date.format("Y/m/d") + "をクリックしました。" ); } });