ShowTable of Contents
アプリケーションプロパティの設定 (Application Properties)
アプリケーションのプロパティで「詳細」タブを開き、「XPages ライブラリ」セクションのライブラリ ID で「com.ibm.xsp.extlibrary」をチェックして保存する。
You have to select "com.ibm.xsp.extlibrary"in "Detail" tab of Application properties.
フォームの作成 (Creating a form)
フォーム を作成し、以下のフィールドを配置する。
フォーム名 (Form name)： Event
フィールド名
(Field Name) |
フィールドの種類
(Field type) |
その他の設定
(Other options) |
|
EventDate |
日付/時刻 (Date/Time) |
スタイル： 日付/時刻制御
表示： 日付のみ
(Date/Time style shows date only) |
|
StartDateTime |
日付/時刻 (Date/Time) |
スタイル： 日付/時刻制御
表示： 時刻のみ
(Date/Time style shows time only) |
|
EndDateTime |
日付/時刻 (Date/Time) |
スタイル： 日付/時刻制御
表示： 時刻のみ
(Date/Time style shows time only) |
|
Subject |
テキスト (Text) |
|
|
From |
テキスト/計算結果
(Text/Computed) |
値： @UserName |
|
Icon |
数値
(Number) |
|
ビューの作成 (Creating a view)
ビューを作成し、以下のカラムを配置する。
ビュー名 (View name)： calendarOutline
列のタイトル
（「列の情報」タブ）
(Column title) |
列の名前
（「詳細」タブ）
(Column name) |
ソート
（「ソート」タブ）
(Sort) |
スタイル
（「拡張フォーマット」タブ）
(Style) |
表示
（「拡張フォーマット」タブ）
(Display) |
列の値
(Value) |
|
CalDateTime |
CalDateTime |
昇順
(ascending) |
日付/時間 (Date/Time) |
日付のみ (Date only) |
DT := @Text(@Date(EventDate)) + " " + @Text(@Time(StartDateTime));
@TextToTime(DT) |
|
StartDateTime |
StartDateTime |
なし |
日付/時間 (Date/Time) |
時刻のみ (Time only) |
DT := @Text(@Date(EventDate)) + " " + @Text(@Time(StartDateTime));
@TextToTime(DT) |
|
EndDateTime |
EndDateTime |
なし |
日付/時間 (Date/Time) |
時刻のみ (Time only) |
DT := @Text(@Date(EventDate)) + " " + @Text(@Time(EndDateTime));
@TextToTime(DT) |
|
Icon |
Icon |
なし |
一般 (General) |
|
Icon |
|
For |
For |
なし |
一般 (General) |
|
Subject |
|
Chair |
Chair |
なし |
一般 (General) |
|
@Name([CN];From) |
ここで列のプロパティインフォボックスの「詳細」タブの列の名前を設定することを忘れずに行う。
Column name must be specified at "Detail"tab of column property infobox
XPage の作成 (Creating a XPage)
XPage を作成し、以下のソースを記述する。
XPage 名 (XPage name)： mycalendar
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xe:restService id="restService2" pathInfo="/inoteslegacyjson"
preventDojoStore="false">
<xe:this.service>
<xe:calendarJsonLegacyService viewName="calendarOutline"
var="entry" contentType="text/plain" colCalendarDate="CalDateTime"
colEntryIcon="Icon" colStartTime="StartDateTime" colEndTime="EndDateTime"
colSubject="For" colChair="Chair">
</xe:calendarJsonLegacyService>
</xe:this.service>
</xe:restService>
<xe:calendarView id="calendarView1" jsId="cview1"
storeComponentId="restService2" style="width:100%" type="M">
</xe:calendarView>
</xp:view>
イベント処理 (Event handling)
Calendar コントロールで、エントリをクリックしたときのイベント処理を追加します。
<xe:calendarView> タグ内に以下のように記述して、onOpenEntry イベントでのクライアントサイド JavaScript を記述することができます。この例ではダイアログを表示します。
Some event handling can be added to Calendar control.
You can add Client-side JavaScript for "onOpenEntry" event handling as the following XPage source. This code will show a dialog on the event.
<xe:calendarView id="calendarView1" jsId="cview1"
storeComponentId="restService2" style="width:100%" type="M">
<xe:this.onOpenEntry>
<![CDATA[alert("Hello Calendar Control !");]]>
</xe:this.onOpenEntry>
</xe:calendarView>
スケジュールエントリの表示 (Open a schedule document)
Calendar コントロールで選択されたスケジュール文書を表示するためには、先のクライアントサイド JavaScript イベントで文書を開く処理を記述しています。
To open a schedule document by clicking the Calendar control, you can add JavaScript code to do do.
var path = "";
var sUnid = items[0].unid;
if(dojo.isMozilla || dojo.isWebKit){
path = #{javascript:"\"" + @FullUrl('/') + "\""};
path = path + "myevent.xsp?documentId=" + sUnid + "&action=openDocument";
}else{
path = "myevent.xsp?documentId=" + sUnid + "&action=openDocument";
}
document.location.href = path;
なおここでは、スケジュール文書を開くための 「myevent」 XPage があらかじめ作成されていることとします。
この JavaScript を含む 「mycalendar」 XPage のソースの全体は以下になります。
In this implementation, we assume "myevent" XPage was already created to show the schedule document.
The whole XPage source including the JavaScript code is as the following:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xe:restService id="restService2" pathInfo="/inoteslegacyjson"
preventDojoStore="false">
<xe:this.service>
<xe:calendarJsonLegacyService viewName="calendarOutline"
var="entry" contentType="text/plain" colCalendarDate="CalDateTime"
colEntryIcon="Icon" colStartTime="StartDateTime" colEndTime="EndDateTime"
colSubject="For" colChair="Chair">
</xe:calendarJsonLegacyService>
</xe:this.service>
</xe:restService>
<xe:calendarView id="calendarView1" jsId="cview1"
storeComponentId="restService2" style="width:100%" type="M">
<xe:this.onOpenEntry>
<![CDATA[
var path = "";
var sUnid = items[0].unid;
if(dojo.isMozilla || dojo.isWebKit){
path = #{javascript:"\"" + @FullUrl('/') + "\""};
path = path + "myevent.xsp?documentId=" + sUnid + "&action=openDocument";
}else{
path = "myevent.xsp?documentId=" + sUnid + "&action=openDocument";
}
document.location.href = path;
]]>
</xe:this.onOpenEntry>
</xe:calendarView>
</xp:view>