どちらが便利かはわかりませんが、カレンダのページを開いたときはつねに現在の月を表示したい、という要望がありました。
Oracle APEXのカレンダ・リージョンはFullCalenderで作られています。
ChatGPTに聞いてみました。
「fullCalenderで現在の月に移動するには？」
.today()か.gotoDate()が使えるよ、とのこと。今日に移動するだけなら、.today()がお勧めとのことです。
実装して動作を確認してみました。
確認にはカレンダ・リージョンが実装されたAPEXアプリケーションが必要です。
アプリケーションの作成を開き、ファイルからのアプリケーション作成を実行します。サンプル・データのプロジェクトとタスクに含まれるStart DateとEnd Dateの値は、今日の日付を起点に前後の日付を算出するので、今回のテストの用途に向いています。
コピー・アンド・ペーストを選択し、サンプル・データとしてプロジェクトとタスクを選択します。CSVデータが画面に表示されます。
次へ進みます。
ロード先は新規表とし、表名に後で削除が楽になるような名前を指定します。その他はデフォルトのまま、データのロードを実行します。
アプリケーション作成ウィザードが開きます。
カレンダのページが含まれていることを確認し、アプリケーションの作成を実行します。
テスト用のアプリケーションが出来上がりました。ページ番号６のカレンダのページを実行します。
表示されるカレンダには、現在の月のカレンダが表示されます。
別の月を表示します。
ナビゲーション・メニューのホームをクリックし、ホーム・ページに移動します。その後、カレンダのページに戻ります。
カレンダには、それまで開いていた月が維持されています。
これから、ページ・ロード時にfullCalenderの.today()を呼び出す実装を追加します。
カレンダ・リージョンからfullCalendarのオブジェクトを取り出すために、カレンダ・リージョンに静的IDを設定します。静的IDはcalendarとします。
ページ・ロード時に実行される動的アクションを作成します。
左ペインで動的アクション・ビューを開き、ページのロードに動的アクションを作成します。
識別の名前はtodayとします。タイミングはページのロードになります。
TRUEアクションにJavaScriptコードの実行を選択し、設定のコードに以下を記述します。
apex.region("calendar").widget().data("fullCalendar").today();
以上で実装は完了です。
カレンダを開くたびに、現在の月が表示されるように動作が変わっています。
簡単な例ですが、いくつかのことを紹介しました。
- カレンダ・リージョンは人気のJavaScriptライブラリであるfullCalendarを使っているので、fullCalendarを指定してChatGPTに聞くと出来ることを教えてくれる。
- リージョンに静的IDを設定すると、apex.region("静的ID").widget().data("fullCalendar")としてfullCalendarのAPIを実装しているカレンダ・オブジェクトを取得できる。
今回の記事は以上です。
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
