10.2.6 カレンダ属性の管理

カレンダを作成すると、プロパティ・エディタで属性を編集することで表示を変更できます。

各カレンダには、2セットの編集可能な属性(リージョン属性とカレンダ属性)があります。

• プロパティ・エディタでのカレンダ属性の編集
  プロパティ・エディタでカレンダ属性にアクセスします。
• 追加および編集機能を含めるように既存のカレンダを編集
  追加および編集機能を含めるように既存のカレンダを編集します。
• カレンダ初期化JavaScriptコードの追加
  「初期化JavaScriptコード」属性を編集して、標準のjQuery FullCalendar初期化属性をオーバーライドするJavaScript関数を追加します。
• 既存のカレンダでのデータのドラッグ・アンド・ドロップの有効化
  カレンダ・リージョンでは、ドラッグ・アンド・ドロップによるカレンダ・イベントの移動または変更をサポートしています。

10.2.6.1 プロパティ・エディタでのカレンダ属性の編集

プロパティ・エディタでカレンダ属性にアクセスします。

リージョン属性は、カレンダのコンテナとして機能するページの領域を定義します。カレンダ属性は、テンプレート、日付列および一般的なカレンダ書式設定を指定します。

カレンダ属性を編集するには:

1. ページ・デザイナでページを表示します。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. ページを選択します。
   ページ・デザイナが表示されます。
2. 「レンダリング」タブで、カレンダを探して選択します。
   プロパティ・エディタに、「リージョン」と「属性」の2つのタブが表示されます。
3. プロパティ・エディタで、適切なタブを選択します。
   • リージョン: リージョン属性は、カレンダのコンテナとして機能するページの領域を定義します。
   • 属性: カレンダ属性は、テンプレート、日付列および一般的なカレンダ書式設定を指定します。
4. カレンダ属性を編集します。

   属性のヘルプを表示するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックします。

5. 変更を保存するには、「保存」をクリックします。ページを保存して実行するには、「ページの保存と実行」をクリックします。

10.2.6.2 追加および編集機能を含めるように既存のカレンダを編集

追加および編集機能を含めるように既存のカレンダを編集します。

ヒント:

デスクトップ・アプリケーションのカレンダのリンクの作成およびリンクの編集を定義する場合、2つの異なるページを定義することをお薦めします。リンクの編集を作成するには、カレンダ属性の主キー列としていずれかの表の列またはSQL問合せ列を選択します。

追加および編集機能を含めるように既存のカレンダを編集するには:

1. ページ・デザイナでページを表示します。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. ページを選択します。
   ページ・デザイナが表示されます。
2. 「レンダリング」タブで、カレンダを探して選択します。
3. プロパティ・エディタで、「属性」タブをクリックします。
   プロパティ・エディタにカレンダ属性が表示されます。
4. 「設定」→「リンクの作成」を編集して、ユーザーが空のセルまたは既存のカレンダ・エントリをクリックしたときにコールされるターゲット・ページを指定します。

   1. 設定、リンクの作成: 「リンクが定義されていません」をクリックします。

      「リンク・ビルダー - リンクの作成」ダイアログが表示されます。

   2. タイプ: リンク・ターゲットのタイプを選択します。

   3. アプリケーション: 「別のアプリケーションのページ」を選択した場合、アプリケーションIDを入力します。

   4. ページ: ターゲット・ページ番号を指定します。

   5. アイテムの設定: カレンダからターゲット・ページに渡される値を構成します。カレンダで日付または日付範囲を選択した後、「リンクの作成」がコールされます。このため、選択した開始日と終了日が「ページの作成」に渡される必要があります。

      • 選択した日付または選択した日付範囲の開始日を渡すには:

        • 名前: イベントの開始日を含むターゲット・ページ・アイテムの名前を指定します。フォームの場合、これを日付ピッカー要素にする必要があります。

        • 値: &APEX$NEW_START_DATE。

      • 日付範囲が選択された場合は、次のように終了日を渡します。

        • 名前: イベントの終了日を含むターゲット・ページ・アイテムの名前を指定します。フォームの場合、これを日付ピッカー要素にする必要があります。

        • 値: &APEX$NEW_END_DATE。

          追加の値は、アプリケーション・ページへの他のリンクと同じ方法で渡すことができます。

        • 「OK」をクリックします。

   ヒント:

   属性についてさらに学習するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。

5. 「設定」→「リンクの編集」を編集して、ユーザーが既存のエントリをクリックしたときにコールされるターゲット・ページを定義します。

   ヒント:

   リンクの編集を作成するには、フォームが表の行を参照するために、主キー値をターゲット・ページに渡す必要があります。

   1. 設定、リンクの編集: 「リンクが定義されていません」をクリックします。

      「リンク・ビルダー - リンクの作成」ダイアログが表示されます。

   2. タイプ: リンク・ターゲットのタイプを選択します。

   3. アプリケーション: 「別のアプリケーションのページ」を選択した場合、アプリケーションIDを入力します。

   4. ページ: ターゲット・ページ番号を指定します。

   5. アイテムの設定: カレンダからターゲット・ページに渡される値を構成します。カレンダで日付または日付範囲を選択した後、「リンクの作成」がコールされます。このため、選択した開始日と終了日が「ページの作成」に渡される必要があります。

      • 名前: 次のような主キー値を含むターゲット・ページ・アイテム(通常、非表示のアイテム)の名前を指定します。

        PX_ID。

      • 値: 次のような主キー値を含む表の列またはSQL問合せ列を指定します。

        &ID。

      • 「OK」をクリックします。

6. 「保存」をクリックします。

10.2.6.3 カレンダ初期化JavaScriptコードの追加

「初期化JavaScriptコード」属性を編集して、標準のjQuery FullCalendar初期化属性をオーバーライドするJavaScript関数を追加します。

この関数は、パラメータとしてカレンダ初期化属性を含むJavaScriptオブジェクトを返す必要があります。

初期化JavaScriptコードを追加するには:

1. ページ・デザイナでページを表示します。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. ページを選択します。
   ページ・デザイナが表示されます。
2. 「レンダリング」タブで、カレンダを探して選択します。
   プロパティ・エディタにリージョン属性が表示されます。
3. プロパティ・エディタで、「属性」タブをクリックします。
   プロパティ・エディタにカレンダ属性が表示されます。
4. 「詳細」を検索します。

   ヒント:

   グループまたは属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。その用語を含むグループと属性が表示されます。

5. 「詳細」の「初期化JavaScriptコード」に、標準のjQuery FullCalendar初期化属性をオーバーライドするJavaScript関数を入力します。

   例: カレンダ・ベースのFullCalendar v5

   function ( pOptions) {
       pOptions.slotMinTime            = "07:00:00";                                               // hide slots before minTime
       pOptions.slotMaxTime            = "21:00:00";                                               // hide slots after maxTime
       pOptions.dayHeaderFormat        = { weekday: 'short', month: 'numeric', day: 'numeric' };   // week view column headings
       pOptions.slotDuration           = "00:15:00";                                               // custom slot duration
       pOptions.weekNumbers            = true;                                                     // show week numbers
       pOptions.weekText               = "CW";                                                     // heading for week numbers
       pOptions.weekNumberCalculation  = "ISO";                                                    // use "ISO" week numbers
       pOptions.displayEventTime       = true;                                                     // show event time ...
       pOptions.displayEventEnd        = false;                                                    // ... but not the end time
       pOptions.disableKeyboardSupport = true;                                                     // disable builtin keyboard navigation
       pOptions.windowResize           = null;                                                     // suppress automatic switch to list view on small screens
       return pOptions;
   }

   例: カレンダ・ベースのFullCalendar v3 (非推奨)

   function ( pOptions) {
       pOptions.titleFormat      = "[Conference Schedule]";                  // custom title
       pOptions.minTime          = "07:00:00";                               // hide slots before minTime
       pOptions.maxTime          = "18:00:00";                               // hide slots after maxTime
       pOptions.columnFormat     = {month: '', week: 'dddd', day: 'dddd'};   // week view column headings
       pOptions.slotDuration     = "00:15:00";                               // custom slot duration
       pOptions.weekNumbers      = true;                                     // show week numbers
       pOptions.weekNumberTitle  = "CW";                                    
       return pOptions;
   }

   ヒント:

   FullCalendar v3に基づくカレンダは非推奨になりました。将来のリリースではサポートされなくなります。

6. 「保存」をクリックします。

10.2.6.4 既存のカレンダでのデータのドラッグ・アンド・ドロップの有効化

カレンダ・リージョンでは、ドラッグ・アンド・ドロップによるカレンダ・イベントの移動または変更をサポートしています。

カレンダ・リージョンのドラッグ・アンド・ドロップのサポートを有効化するには:

1. ページ・デザイナでページを表示します。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. ページを選択します。
   ページ・デザイナが表示されます。
2. プロパティ・エディタで、「属性」タブをクリックします。
   プロパティ・エディタにカレンダ属性が表示されます。
3. 「設定」を検索して、次の属性を編集します。

   1. 設定、主キー列: 表の列またはSQL問合せ列を選択します。

      「ドラッグ・アンド・ドロップ」フィールドがプロパティ・エディタの「追加のカレンダ・ビュー」の下に表示されます。

   2. 設定、ドラッグ・アンド・ドロップ: 「オン」を選択します。

      「PL/SQLコードのドラッグ・アンド・ドロップ」が表示されます。

   3. 設定、PL/SQLコードのドラッグ・アンド・ドロップ: エンド・ユーザーがイベントのドラッグ・アンド・ドロップを完了したときに実行するPL/SQLコードを入力します。

      PL/SQLコード内では、次のように、ドラッグされたイベントのID、新しい開始日および終了日を参照できます。

      :APEX$PK_VALUE, :APEX$NEW_START_DATE amd :APEX$_NEW_END_DATE

      たとえば、エンド・ユーザーがイベントを新しい日付にドラッグした後は、次のコードでPROJECTS表のイベント行が変更されます。

      begin
           update projects
              set start_date = to_date(:APEX$NEW_START_DATE, 'YYYYMMDDHH24MISS'),
                  end_date = to_date(:APEX$NEW_END_DATE, 'YYYYMMDDHH24MISS')
            where id = :APEX$PK_VALUE;
       end;

      さらに学習するには、中央ペインで「ヘルプ」タブをクリックします。

4. 「保存」をクリックします。