# DOC-0024 — Calendar 操作・HTML Functional Class ## 0. 文書情報 - DOC ID: `DOC-0024` - TOC ID: `TOC-0024` - 対象UI: `UI-024` - Component: `#024 Calendar` - Runtime Version: `1.0.44` - HTML Functional Class: `bf-calendar` - DOC Version: `1.0.44` - DOC Type: `html-functional-class` - Status: `active` このDOCは現行 #024 Calendar Runtime 1.0.44 と実テスト画面を根拠に、通常操作、HTML Functional Class、Property、Public API、Security、#022/#040/#002との責務境界を説明します。存在しない `commit` / `invoke` / `OUT` は追加しません。 --- ## 1. Calendarの役割 CalendarはPicker等から再利用するPrimitive UIの共通日付選択基盤です。月表示、月移動、日付セル、選択日、今日、`min / max / step`、Theme、開始曜日、Annotation、親依存または単体サイズ/配置を扱い、選択結果は `bone-calendar:select` Eventまたは `onSelect` callbackで呼び出し元へ返します。 Calendar自身は入力コンポーネントの編集中/確定済み状態を所有せず、`commit`、`invoke`、`OUT`、Delivery Channel、WAIT/FIFO/BLOCKEDを持ちません。 --- ## 2. HTML Functional Class `bf-calendar` ### 2.0 現行実装ID - Runtime: `BoneCalendar 1.0.44` - HTML Functional Class: `bf-calendar` / `BoneCalendarFunctionalClass 1.0.15` - 最小HTMLは手動 `BoneCalendar.create()` なしでFunctional Class自身がmountします。 - Sample専用変数やSample controllerを前提にしません。 ### 2.1 最小利用 ```
``` `bf-calendar` を付けた要素をhostとして #024 Calendar Runtimeを子要素へmountします。通常利用Classはこの1個だけです。`inheritParent=true` の場合、生成された `.bone-calendar` から見た直接の親はこの `bf-calendar` hostになるため、同期させたい親外観はhostへ設定します。24個のPublic API名をClassへ変換する旧方式は使用しません。 ### 2.2 設定付き利用 ```
``` `data-*` は同名Runtime Propertyへ変換され、最終検証は `BoneCalendar.create()` が行います。無効なRuntime値はRuntime自身の `CALENDAR_*` Errorで拒否されます。 Annotationは `data-annotations` にJSON Object文字列を指定できます。JSONとして読めない場合はFunctional Class側で `BF_CALENDAR_ANNOTATIONS_JSON_INVALID` として拒否します。 ### 2.3 設定 → 実表示サンプル ここでは「何を設定すると、Calendarのどこがどう変わるか」をHTML Functional Classの契約として示します。**ガイドのHTML例はそのまま有効な `bf-calendar` 契約です。** 初期表示のためにサンプル用JavaScript変数や `BoneCalendar.create()` / `setTaskData()` を追加してはいけません。 実ブラウザで同じ契約を確認する専用ページは `/boneflow/sample/024/calendar/minimal.html` です。このページはCSS/JS読込以外に補助JavaScriptを持たず、次の `div` 自体を `bf-calendar` が直接mountします。 #### Sample 1 — `value`: 選択日を表示する 設定: ```
``` この3属性の例は専用Minimalページと同一です。手動Runtime呼出しやSample変数で補完しません。 表示結果: - 2026年8月を表示します。 - 13日のセルがAccent背景で選択状態になります。 - Footerの値表示も `2026-08-13` になります。 [[BF-CALENDAR-SAMPLE:value]] #### Sample 2 — `min` / `max` / `step`: 選択可能日を絞る 設定: ```
``` 表示結果: - 10日より前、20日より後は選択不可です。 - `step=2` の基準が10日なので、10 / 12 / 14 / 16 / 18 / 20日が選択可能です。 - 11 / 13 / 15 / 17 / 19日は範囲内でもstep条件により無効表示になります。 [[BF-CALENDAR-SAMPLE:range-step]] #### Sample 3 — `theme`: 4 Themeの違い `theme` はCalendar全体のbackground / surface / header / text / border / accentをまとめて切り替えます。 設定 `default`: ```
``` 表示結果: 標準Dark系Theme。Runtime Defaultです。 [[BF-CALENDAR-SAMPLE:theme-default]] 設定 `dark`: ```
``` 表示結果: `default` より暗いbackground / surfaceになります。 [[BF-CALENDAR-SAMPLE:theme-dark]] 設定 `light`: ```
``` 表示結果: 白系surface + 濃色textのCalendarになります。 [[BF-CALENDAR-SAMPLE:theme-light]] 設定 `neon`: ```
``` 表示結果: シアンAccentを中心としたNeon Themeになります。これは#022 Hover Border EffectのON/OFFとは別です。 [[BF-CALENDAR-SAMPLE:theme-neon]] #### Sample 4 — `weekStart`: 曜日の左端を変える 月曜開始: ```
``` 表示結果: 曜日列の左端が月曜日になります。 [[BF-CALENDAR-SAMPLE:week-monday]] 日曜開始: ```
``` 表示結果: 曜日列の左端が日曜日になります。 [[BF-CALENDAR-SAMPLE:week-sunday]] #### Sample 5 — `annotations` / `iconVisual=emoji`: 祝日・休日・記念日・Task 設定: ```
``` 表示結果: - 11日 `holiday` → **🎌** - 12日 `customHoliday` → **🏖️** - 15日 `anniversary` → **⭐** - 10日 `task` → 日付セル下部にtask dot、Hover/FocusでTooltip - 祝日の `🎌` は通常Annotation iconより大きい16px表示です。 [[BF-CALENDAR-SAMPLE:annotations]] #### Sample 6 — `showTasks=false`: Taskだけ消す 設定: ```
``` 表示結果: - Taskのdot / Tooltip項目だけ非表示になります。 - 祝日の **🎌** は残ります。 [[BF-CALENDAR-SAMPLE:tasks-off]] #### Sample 7 — `disabled=true` + `showTodayButton=false` 設定: ```
``` 表示結果: - Calendar全体がdisabled状態になります。 - 日付セル・前月/次月操作は選択操作できません。 - Footerの「今日」ボタン自体が非表示になります。 [[BF-CALENDAR-SAMPLE:disabled]] #### Sample 8 — `width` / `height` / `position=bottom-right` 設定: ```
``` 表示結果: - Calendar本体は260×300pxになります。 - 親領域内の右下へ配置されます。 - `inheritParent=true` にするとこの単体サイズ・Position指定より親吸着が優先されます。 [[BF-CALENDAR-SAMPLE:position-bottom-right]] #### Sample 9 — `inheritParent=true`: 親へ100%吸着 設定: ```
``` 表示結果: - Calendarが直接親の幅・高さへ100%吸着します。 - 親の幅・高さへ100%吸着し、radius等のレイアウト情報を `syncParentStyle()` で同期します。Themeのbackground / text / border色は維持します。 - `width` / `height` / `position` の単体指定は視覚上優先されません。 [[BF-CALENDAR-SAMPLE:inherit-parent]] #### Sample 10 — #022 Hover Border Effectを日付セルへ付ける 設定: ```
``` 表示結果: - CalendarのThemeを変えるのではなく、各日付セルのmouseover時だけ#022の枠Effectが動きます。 - 月移動・日付選択でセルが再描画された後も新セルへ再attachします。 - #022が未読込ならCalendar自体を偽Effectで代替せず、依存Errorになります。 [[BF-CALENDAR-SAMPLE:hover-neon]] ### 2.4 18 Property「設定 → 表示結果」早見 1. `value` — 指定日が選択色になり、表示月とFooter値の基準になります。 2. `min` — 指定日より前の日付セルが選択不可表示になります。 3. `max` — 指定日より後の日付セルが選択不可表示になります。 4. `step` — 基準日からN日刻み以外の日付セルが選択不可表示になります。 5. `theme` — Calendar全体の背景・surface・文字・枠・Accent配色が変わります。 6. `iconVisual` — `fontawesome` は内蔵SVG、`emoji` は前後月とAnnotationを絵文字表示します。祝日は **🎌** です。 7. `disabled` — `true` でCalendar全体が無効表示になり操作不可になります。 8. `className` — それ単体では見た目を変えません。生成rootへ任意Classを追加し、利用者CSSを当てるための入口です。 9. `ariaLabel` — 見た目は変わりません。Calendar rootの `aria-label` が変わります。 10. `showTodayButton` — `false` でFooterの「今日」ボタンが消えます。 11. `weekStart` — 曜日列と月Matrixの左端が月曜または日曜に変わります。 12. `locale` — 表示言語を指定します。開始曜日には影響しません。開始曜日は `weekStart` / `data-week-start` で独立して指定します。 13. `annotations` — 祝日/休日/記念日のセルicon、task dot、Tooltip内容が追加されます。 14. `showTasks` — `false` でtaskのdot / Tooltip項目だけ消え、祝日等は残ります。 15. `inheritParent` — `true` でCalendarが親へ100%吸着し、親外観同期が優先されます。 16. `width` — `inheritParent=false` 時のCalendar横幅が240～1200pxで変わります。 17. `height` — `inheritParent=false` 時のCalendar高さが280～1200pxで変わります。 18. `position` — `inheritParent=false` 時に親領域内の9方向配置が変わります。 --- ### 2.5 タスク区分 — HTML Class仕様 / 使用方法 / サンプル 既存の `bf-calendar` に外部のタスク区分マスタを渡せます。タスク区分は `id` を主キーとし、タスク側は `typeId` で参照します。区分名・アイコン・背景色・文字色・透過率などは区分マスタ側で管理し、タスクへ重複保持しません。 データ例: ```json [ { "id": "meeting", "label": "会議", "kind": "meeting", "icon": "●", "backgroundColor": "#2563EB", "backgroundOpacity": 100, "textColor": "#FFFFFF", "textOpacity": 100 } ] ``` HTML Functional Classへ直接渡す場合: ```html
``` 外部API / DB Adapter等から取得した配列をRuntimeへ渡す場合: ```javascript const host = document.querySelector(".bf-calendar"); const calendar = BoneCalendarFunctionalClass.getInstance(host); BoneCalendar.setTaskTypes(calendar, taskTypesFromApi); ``` Calendar下部の **「タスク区分」** ボタン、または `BoneCalendar.openTaskTypeManager(calendar)` で管理画面をモーダル表示します。表示/非表示は `data-show-task-type-manager-button="true|false"` / Property `showTaskTypeManagerButton` で制御します。 ### 2.6 タスク — HTML Class仕様 / 使用方法 / サンプル タスクは将来DB管理へ移行できるよう、`taskId` を識別子としてタスク区分とは別データで管理します。`date / start / end / typeId / label` を基本とし、`content / memo / showInRemarks` を持てます。`start`・`end`・`typeId` は必須です。 ```json [ { "taskId": "task-001", "date": "2026-09-20", "start": "10:00", "end": "11:00", "typeId": "meeting", "label": "定例会議", "content": "週次進捗を確認", "memo": "資料は事前共有", "showInRemarks": true } ] ``` HTML Functional Classへ渡す場合: ```html
``` タスク区分とタスクを外部からまとめて渡す場合: ```javascript BoneCalendar.setTaskData(calendar, { taskTypes: taskTypesFromApi, tasks: tasksFromApi }); ``` Calendar下部の **「タスク」** ボタン、または `BoneCalendar.openTaskManager(calendar)` で追加・編集・削除します。タスクツールチップは **`開始時間~終了時間 タスク名`**、例 `10:00~11:00 定例会議` です。表示/非表示は `data-show-task-manager-button` / Property `showTaskManagerButton` で制御します。 Calendarの日付下には、その日にタスクがある場合、既定で `📑` を表示します。`calendarTaskIcon` で文字を変更でき、`calendarTaskIconPosition` は `right`（既定）/ `center` / `left`、`calendarIconSizePx` は 🎌 / 🏖️ / ⭐ / 📑 の共通アイコンサイズです。 ### 2.7 イベント — HTML Class仕様 / 使用方法 / サンプル カスタム休日と記念日は **イベント** として管理します。日時ではなく年月日 `YYYY-MM-DD` を持ち、`eventId / date / kind / emoji / label` の形式です。 ```json [ { "eventId": "event-001", "date": "2026-09-23", "kind": "anniversary", "emoji": "⭐", "label": "設立記念日" }, { "eventId": "event-002", "date": "2026-08-13", "kind": "customHoliday", "emoji": "🏖️", "label": "お盆休み" } ] ``` HTML Functional Classへ渡す場合: ```html
``` Runtimeへ外部データを渡す場合: ```javascript BoneCalendar.setEvents(calendar, eventsFromApi); ``` Calendar下部の **「イベント」** ボタン、または `BoneCalendar.openEventManager(calendar)` で追加・編集・削除します。年月日は管理画面の **📅** を押して #024 Calendar（ノーマル）から選択します。表示/非表示は `data-show-event-manager-button` / Property `showEventManagerButton` で制御します。 ### 2.8 祝日 — HTML Class仕様 / 使用方法 / サンプル 国民の祝日はイベントとは分離し、既存Annotation契約の `kind: "holiday"` として扱います。Calendar下部の **🎌** ボタンから `Annotation IN / 祝日CSV変換` 管理画面を開きます。 ```json { "2026-09-21": { "items": [ { "kind": "holiday", "label": "敬老の日", "icon": true, "emoji": "🎌" } ] } } ``` HTML Functional Classへ渡す場合: ```html
``` Runtimeへ外部データを渡す場合: ```javascript BoneCalendar.setAnnotations(calendar, annotationsFromApi); ``` 🎌管理画面は `BoneCalendar.openAnnotationManager(calendar)` でも開けます。表示/非表示は `data-show-annotation-manager-button` / Property `showAnnotationManagerButton` で制御します。内閣府CSVはRuntime内で自動取得せず、画面で選択したCSVをAnnotationへ変換して適用します。 ### 2.9 SampleフォルダでHTML Functional Classを確認する Installerは確認用Sampleを次へ配置します。 - `/boneflow/sample/024/calendar/bf-calendar.html` - `/boneflow/sample/024/calendar/bf-calendar.js` - `/boneflow/sample/024/calendar/bf-calendar.css` - `/boneflow/sample/024/calendar/index.html` ブラウザ確認URL: ```text http://localhost/boneflow/sample/024/calendar/bf-calendar.html ``` このSampleは `bf-calendar` を実際にmountし、タスク区分・タスク・イベント・祝日Annotationを **`data-task-types` / `data-tasks` / `data-events` / `data-annotations` から直接初期登録**します。初期表示のための `BoneCalendar.create()` / `setTaskData()` / `setEvents()` / `setAnnotations()` は使用しません。Calendar自身の **タスク区分 / タスク / イベント / 🎌** ボタンから登録・更新・削除・一括操作を確認できます。 最小契約だけを確認する場合は `/boneflow/sample/024/calendar/minimal.html` を開いてください。 Sampleの実行依存は `./bf-calendar.css` 1本と `./bf-calendar.js` 1本だけです。`bf-calendar.css` は#024が実使用する正式依存CSSとCalendar CSSを内包し、`bf-calendar.js` は正式依存Runtime（#001/#002/#020/#022/#118/#040）とBoneCalendar Runtime / HTML Functional Classを正式順で内包します。Sample controller、手動 `BoneCalendar.create()`、初期表示用の追加変数は含みません。ダウンロード用ZIPは `bf-calendar.html / bf-calendar.css / bf-calendar.js` の3ファイルだけで完結し、`../../../css/bone-calendar.css` 等の外部相対参照を持ちません。 ## 2.10 実用ガイド — 「設定すると画面の何が変わるか」 この章はProperty名の一覧ではなく、**実際に設定したときの効果**を確認するためのガイドです。HTMLでは `bf-calendar` の `data-*` に指定します。`true/false` は文字列としてHTML属性へ書きます。 | やりたいこと | HTML設定 | 設定したときの効果 | OFF/別値にしたとき | |---|---|---|---| | 初期選択日を決める | `data-value="2026-09-24"` | 2026年9月を開き、24日を選択状態にする | 省略時は未選択 | | 選択日詳細を出す | `data-selected-day-visible="true"` | Calendar下部に選択日・その日のタスク/祝日/イベント詳細を表示する | `false` で詳細領域だけ非表示。日付クリック自体は可能 | | タスクをCalendarへ出す | `data-show-tasks="true"` | タスクがある日へ📑等を表示し、詳細/Tooltipのタスク情報を有効にする | `false` でタスク表示だけ隠す。祝日・イベントは残る | | 今日ボタンを出す | `data-show-today-button="true"` | Footerに今日へ移動/選択するボタンを表示 | `false` でボタンを隠す | | 週を日曜始まりにする | `data-week-start="sunday"` | 左端が日曜日になる | `monday` は月曜、`auto` は後方互換で日曜 | | 見た目を変える | `data-theme="light"` | Calendar全体をLight Themeへ変更 | `default/dark/neon` に切替可能 | | 操作禁止にする | `data-disabled="true"` | 日付・月移動等を操作不可にする | `false` で通常操作 | | 親幅へ吸着させる | `data-inherit-parent="true"` | Calendar幅を親content幅へ合わせ、必要高さは内容に応じて拡張 | `false` ではwidth/height/positionを使用 | | タスク区分管理ボタン | `data-show-task-type-manager-button="true"` | Footerに「タスク区分」を表示し管理Modalを開ける | `false` でボタンだけ隠す。登録データは消えない | | タスク管理ボタン | `data-show-task-manager-button="true"` | Footerに「タスク」を表示 | `false` でボタンだけ隠す | | イベント管理ボタン | `data-show-event-manager-button="true"` | Footerに「イベント」を表示 | `false` でボタンだけ隠す | | 祝日CSV管理ボタン | `data-show-annotation-manager-button="true"` | Footerに🎌管理ボタンを表示 | `false` でボタンだけ隠す | ### 選択日の表示 — 完成例 ```html
``` **効果:** 24日が選択状態になり、Calendar下部の選択日詳細領域に `2026-09-24` と、その日に登録されているタスク・祝日・イベント内容が表示されます。`data-selected-day-visible="false"` にすると、この詳細領域だけが消えます。**選択状態そのものを消す設定ではありません。** Runtime Defaultは `false` です。 ### タスク区分だけをHTMLから登録 — タスク0件で使用可能 ```html
``` **効果:** タスクが0件でもタスク区分マスタだけを先に登録できます。`id` はTask側の `typeId` から参照する主キーです。色・アイコン・透過率はTaskへ重複コピーしません。 ### タスク区分 + タスクをまとめて初期登録 ```html
``` **効果:** 9/24に会議タスクが登録されます。`typeId:"meeting"` は上のTask Typeを参照します。存在しない `typeId` はエラーです。 ### 「一括置換」と「追加/更新」の違い - `setTaskTypes(calendar, array)` は **全体置換** です。渡した配列が新しいTask Type全体になります。既存Taskが参照している `typeId` を消す置換は整合性エラーになります。 - `addTaskType(calendar, item)` は **1件追加**、`updateTaskType(calendar, id, changes)` は **指定IDだけ更新** です。他のTask Typeを残します。 - Taskも `setTasks()` は全体置換、`addTask()` / `updateTask()` は1件追加・更新です。 - `data-task-types` / `data-tasks` / `data-events` は **初期mount時に渡すデータ** です。mount後の追加・更新にはPublic APIを使います。 ### データ項目 — 省略しない実用定義 **Task Type:** `id`=参照ID、`label`=表示名、`kind`=区分類、`icon`=表示アイコン、`backgroundColor`=背景色、`backgroundOpacity`=背景透過率(0–100)、`textColor`=文字色、`textOpacity`=文字透過率(0–100)、`showCalendarIcon`=Calendar上へ区分アイコンを表示するか。 **Task:** `taskId`=タスクID、`date`=`YYYY-MM-DD`、`start/end`=`HH:MM`、`typeId`=Task Typeのid、`label`=タスク名、`content`=内容、`memo`=備考、`showInRemarks`=備考出力対象か。 **Event:** `eventId`=イベントID、`date`=`YYYY-MM-DD`、`kind`=`anniversary/customHoliday`、`emoji`=表示記号、`label`=表示名。 ### よくある「効かない」の確認順 1. `data-selected-day-visible="true"` のように、対象PropertyのHTML属性名が正しいか。 2. `data-task-types` / `data-tasks` はJSONとして正しいか。属性をシングルクォート、JSON文字列をダブルクォートにすると安全です。 3. Taskの `typeId` がTask Typeの `id` に存在するか。 4. 管理ボタンの表示Propertyは**ボタンを隠すだけ**で、登録済みデータを削除しません。 5. `showTasks=false` はTask表示だけを隠し、Taskデータそのものは削除しません。 6. `selectedDayVisible=false` は選択日詳細だけを隠し、日付選択そのものは無効化しません。 --- ### 2.3 言語 / Redmine連携 `data-locale="auto"`（またはlocale未指定）は、まずページの `` を読みます。RedmineがEnglishなら ``、日本語なら `` を優先するため、OS/ブラウザが日本語でもRedmine English時はCalendar表示を英語へ合わせられます。 優先順位は `data-locale` 明示値 → ページ `` → `navigator.language` → `Intl` → `en-US` です。明示値には `ja` / `en` / `ja-JP` / `en-US` 等を使用できます。 ```html
``` ## 3. Runtime Property 全30件 — 個別Reference この章は一覧を圧縮せず、18 Propertyを1件ずつ説明します。Runtime Defaultは `BoneCalendar.defaults`、HTML属性は `bf-calendar` の `data-*` 変換契約を基準にしています。Property Editorで値を変更する場合も最終検証はRuntime側が行います。 ### 3.1 `value` - 目的: 現在の選択日を指定します。 - 型: `string` または `null`。 - Runtime Default: `null`。未選択状態です。 - Property Editor初期値: `2026-08-10`。これはテスト画面のfixtureであり、Runtime Defaultとは別です。 - 許容形式: 厳密な `YYYY-MM-DD`。例: `2026-08-10`。 - 無効値: 実在しない日付、`2026-8-10` のような別形式、文字列以外。 - 無効時: `CALENDAR_DATE_FORMAT_INVALID` / `CALENDAR_DATE_INVALID` / `CALENDAR_DATE_TYPE_INVALID`。 - HTML指定: `data-value="2026-08-10"`。省略時は `null`。 - 表示への影響: 選択セルを表示し、初期表示月の基準になります。 - 関連Property: `min` / `max` / `step` / `disabled`。これらの条件で選択不可なら設定できません。 - 関連API: `setValue()` / `getValue()` / `validateDate()` / `isDateSelectable()`。 ### 3.2 `min` - 目的: 選択可能な最小日を設定します。 - 型: `string` または `null`。 - Runtime Default: `null`。下限なし。 - Property Editor初期値: `2026-08-01`。テスト用選択範囲の開始日です。 - 許容形式: 厳密な `YYYY-MM-DD`。 - 無効値: 不正日付、または `max` より後の日付。 - 無効時: 日付自体のError、または `CALENDAR_MIN_MAX_INVALID`。 - HTML指定: `data-min="2026-08-01"`。 - 表示への影響: `min` より前の日付セルは選択不可になります。 - 関連Property: `max` / `step` / `value`。`step` の基準日は `min` がある場合は `min` です。 - 関連API: `setOptions()` / `validateDate()` / `isDateSelectable()`。 ### 3.3 `max` - 目的: 選択可能な最大日を設定します。 - 型: `string` または `null`。 - Runtime Default: `null`。上限なし。 - Property Editor初期値: `2027-08-10`。テスト用選択範囲の終了日です。 - 許容形式: 厳密な `YYYY-MM-DD`。 - 無効値: 不正日付、または `min` より前の日付。 - 無効時: 日付自体のError、または `CALENDAR_MIN_MAX_INVALID`。 - HTML指定: `data-max="2027-08-10"`。 - 表示への影響: `max` より後の日付セルは選択不可になります。 - 関連Property: `min` / `step` / `value`。 - 関連API: `setOptions()` / `validateDate()` / `isDateSelectable()`。 ### 3.4 `step` - 目的: 選択可能日をN日刻みに制限します。 - 型: 1～3650の整数、または文字列 `any`。 - Runtime Default: `1`。毎日選択できます。 - Property Editor初期値: `1`。 - 単位: 日。 - 許容値: `any`、1～3650の整数。 - 無効値: 0、負数、小数、3651以上、数値化できない値。 - 無効時: `CALENDAR_STEP_INVALID`。 - HTML指定: `data-step="2"` または `data-step="any"`。 - 基準日: `min` があれば `min`、なければ `1970-01-01`。 - 関連Property: `min` / `max` / `value` / `disabled`。 - 関連API: `validateDate()` / `isDateSelectable()`。 ### 3.5 `theme` - 目的: Calendar全体のThemeを選択します。 - 型: enum。 - Runtime Default: `default`。 - Property Editor初期値: `default`。 - 許容値: `default` / `dark` / `light` / `neon` の4値のみ。 - 無効値: `cyber` 等の未定義値。 - 無効時: `CALENDAR_OPTION_ENUM_INVALID`。 - HTML指定: `data-theme="neon"`。 - 表示への影響: background / surface / header / text / border / accent / muted / Sunday / SaturdayのTheme変数を一括変更します。 - 関連Property: `inheritParent=true` の場合、親同期した色がTheme色より優先されます。 - 関連API: `setOptions()` / `getOptions()`。 ### 3.6 `iconVisual` - 目的: 前後月ナビとAnnotation iconの表現を選びます。 - 型: enum。 - Runtime Default: `fontawesome`。 - Property Editor初期値: `emoji`。今回のユーザー指定により、テスト画面では祝日を `🎌` で表示します。Runtime Default自体は互換性維持のため `fontawesome` のままです。 - 許容値: `fontawesome` / `emoji` の2値。 - `fontawesome`: CDNを使わずRuntime内蔵SVGを表示します。 - `emoji`: 前月 `◀️`、次月 `▶️`、祝日 `🎌`、カスタム休日 `🏖️`、記念日 `⭐` を表示します。 - このDOCの祝日サンプル: **祝日は `emoji` を使用し、日付セルへ `🎌` を表示します。** - 無効値: `cdn` 等の未定義値。 - 無効時: `CALENDAR_OPTION_ENUM_INVALID`。 - HTML指定: `data-icon-visual="emoji"`。 - 関連Property: `annotations`。taskは日付セルiconを持たないため、`iconVisual` の対象外です。 - 関連API: `setOptions()`。 ### 3.7 `disabled` - 目的: Calendar全体の操作可否を切り替えます。 - 型: boolean。 - Runtime Default: `false`。 - Property Editor初期値: 直接設定欄なし。テスト画面はRuntime Default `false` を使用します。 - `false`: 前月/次月、日付選択、Today等を通常操作できます。 - `true`: Calendar全体を無効化し、日付は選択不可になります。 - HTML指定: `data-disabled="true"` / `data-disabled="false"`。 - Functional Class無効値: `true` / `false` 以外は `BF_CALENDAR_BOOLEAN_INVALID`。 - 関連Property: `value` / `min` / `max` / `step`。 - 関連API: `setOptions()` / `isDateSelectable()` / `validateDate()`。 ### 3.8 `className` - 目的: Runtimeが生成する `.bone-calendar` rootへ追加Classを付与します。 - 型: string。 - Runtime Default: 空文字 `""`。 - Property Editor初期値: 直接設定欄なし。 - HTML指定: `data-class-name="my-calendar"`。 - 注意: 通常利用HTML Functional Class `bf-calendar` とは別物です。`bf-calendar` hostへ機能を付与し、`className` は生成後Runtime rootへ追加されます。 - 無効値: Runtimeは文字列化するため、独自意味を持つ値をDOC側で追加しません。 - 関連API: `create()` / `setOptions()`。 ### 3.9 `ariaLabel` - 目的: Calendar rootのアクセシブルネームを設定します。 - 型: string。 - Runtime Default: `Calendar`。 - Property Editor初期値: 直接設定欄なし。 - HTML指定: `data-aria-label="予約日カレンダー"`。 - 空指定: Runtime Default `Calendar` へ戻ります。 - 表示への影響: 視覚文字ではなく `aria-label` へ反映されます。 - 関連API: `create()` / `setOptions()`。 ### 3.10 `showTodayButton` - 目的: Footerの「今日」ボタン表示を切り替えます。 - 型: boolean。 - Runtime Default: `true`。 - Property Editor初期値: 直接設定欄なし。テスト画面はRuntime Default `true` を使用します。 - `true`: Todayボタンを表示します。 - `false`: Todayボタンを非表示にします。 - HTML指定: `data-show-today-button="false"`。 - Functional Class無効値: `true` / `false` 以外は `BF_CALENDAR_BOOLEAN_INVALID`。 - 関連API: `selectToday()`。ボタン非表示でもPublic APIは別経路として存在します。 ### 3.11 `weekStart` - 目的: 曜日見出しと月Matrixの週開始曜日を指定します。 - 型: enum。 - Runtime Default: `auto`。 - Property Editor初期値: `auto`。 - 許容値: `auto` / `monday` / `sunday`。 - `auto`: `locale` と実行環境から月曜/日曜を解決します。 - `monday`: 常に月曜開始。 - `sunday`: 常に日曜開始。 - 無効値: `friday` 等。 - 無効時: `CALENDAR_OPTION_ENUM_INVALID`。 - HTML指定: `data-week-start="monday"`。 - 関連Property: `locale`。 - 関連API: `resolveWeekStart()` / `monthMatrix()` / `setOptions()`。 ### 3.12 `locale` - 目的: Calendarの表示言語を明示します。開始曜日の解決には使いません。 - 型: string または `null`。 - Runtime Default: `null`。実行環境を参照します。 - Calendar共通設定の「開始曜日」と HTML Functional Class `data-week-start` が同じ `weekStart` Propertyを操作します。既定は `sunday` です。 - 許容例: `ja` / `ja-JP` / `en-US`。 - 形式: 2～3文字の言語コード + 任意の `-` 区切りsubtag。 - 無効値: 規定形式に合わない文字列。 - 無効時: `CALENDAR_LOCALE_INVALID`。 - HTML指定: `data-locale="ja-JP"`。 - 関連Property: `weekStart`。開始曜日はLocaleに左右されません。 - 関連API: `resolveWeekStart()` / `monthMatrix()`。 ### 3.13 `annotations` - 目的: 日付ごとの祝日・独自休日・記念日・taskを表示します。 - 型: 日付キーを持つplain object。 - Runtime Default: 空Object `{}`。 - Property Editor初期値: raw JSON入力欄はありません。テスト画面は2026–2027の祝日/予定fixtureをAnnotation機能確認用に読込みます。 - 日付キー: 厳密な `YYYY-MM-DD`。 - Entry形式: item配列、または `{items:[...]}`。 - kind全4値: `holiday` / `customHoliday` / `anniversary` / `task`。 - HTML指定: `data-annotations` にJSON Object文字列を指定します。 - HTML JSON不正: `BF_CALENDAR_ANNOTATIONS_JSON_INVALID`。 - Runtime不正: `CALENDAR_ANNOTATIONS_INVALID` 等のAnnotation Error。 - 表示への影響: holiday/customHoliday/anniversaryは日付セルiconとTooltip、taskはTooltipとtask dotを表示します。 - 祝日表示: `iconVisual=emoji` のとき `holiday` は `🎌` を表示します。 - 関連Property: `iconVisual` / `showTasks`。 - 関連API: `setAnnotations()` / `getAnnotations()` / `validateAnnotations()` / `annotationsForDate()`。 ### 3.14 `showTasks` - 目的: task Annotationだけの表示可否を切り替えます。 - 型: boolean。 - Runtime Default: `true`。 - Property Editor初期値: `true`（チェックON）。 - `true`: task Tooltip / dotを表示します。 - `false`: taskを非表示にします。holiday/customHoliday/anniversaryは維持します。 - HTML指定: `data-show-tasks="false"`。 - Functional Class無効値: `true` / `false` 以外は `BF_CALENDAR_BOOLEAN_INVALID`。 - 関連Property: `annotations`。 - 関連API: `setOptions()`。 ### 3.15 `inheritParent` - 目的: 単体サイズ/配置ではなく、直接親へ100%吸着して親外観を同期します。 - 型: boolean。 - Runtime Default: `false`。 - Property Editor初期値: `false`（チェックOFF）。 - `false`: `width` / `height` / `position` を使用します。 - `true`: 幅/高さを100%にして親へ吸着します。親のcomputed radius/sizeは同期しますが、Themeのbackground/color/borderは上書きしません。 - HTML指定: `data-inherit-parent="true"`。 - Functional Class無効値: `true` / `false` 以外は `BF_CALENDAR_BOOLEAN_INVALID`。 - 競合: `true` の間は単体 `width` / `height` / `position` の視覚的意味が失われます。 - 関連API: `syncParentStyle()` / `setOptions()`。 ### 3.16 `width` - 目的: `inheritParent=false` 時のCalendar単体幅を指定します。 - 型: integer。 - Runtime Default: `360`。 - Property Editor初期値: `360`。 - 単位: px。 - 範囲: 240～1200px。 - 無効値: 239以下、1201以上、小数、非数値。 - Runtime無効時: `CALENDAR_DIMENSION_INVALID`。 - Functional Classで数値化不可: `BF_CALENDAR_NUMBER_INVALID`。 - HTML指定: `data-width="480"`。 - 競合: `inheritParent=true` では100%吸着が優先されます。 - 関連Property: `height` / `position` / `inheritParent`。 ### 3.17 `height` - 目的: `inheritParent=false` 時のCalendar単体高さを指定します。 - 型: integer。 - Runtime Default: `360`。 - Property Editor初期値: `360`。 - 単位: px。 - 範囲: 280～1200px。 - 無効値: 279以下、1201以上、小数、非数値。 - Runtime無効時: `CALENDAR_DIMENSION_INVALID`。 - Functional Classで数値化不可: `BF_CALENDAR_NUMBER_INVALID`。 - HTML指定: `data-height="420"`。 - 競合: `inheritParent=true` では100%吸着が優先されます。 - 関連Property: `width` / `position` / `inheritParent`。 ### 3.18 `position` - 目的: `inheritParent=false` 時に親領域内の単体配置を指定します。 - 型: enum。 - Runtime Default: `center`。 - Property Editor初期値: `center`。 - 許容値: `top-left` / `top-center` / `top-right` / `middle-left` / `center` / `middle-right` / `bottom-left` / `bottom-center` / `bottom-right` の9値。 - 無効値: 上記以外。 - 無効時: `CALENDAR_OPTION_ENUM_INVALID`。 - HTML指定: `data-position="bottom-right"`。 - 競合: `inheritParent=true` では親吸着が優先され、単体Positionの視覚的意味は失われます。 - 関連Property: `width` / `height` / `inheritParent`。 - 関連API: `setOptions()`。 --- ### 3.19 `calendarIconSizePx` - 目的: 🎌 / 🏖️ / ⭐ / 📑 のCalendar内共通アイコンサイズ。 - 型: integer、8～24、単位px。Default `14`。 - HTML指定: `data-calendar-icon-size-px="18"`。 - 効果: 日付セルに出る各アイコンの視覚サイズが変わります。タスクやイベントのデータ内容は変わりません。 ### 3.20 `calendarTaskIcon` - 目的: タスクが存在する日の日付下に表示する記号。 - 型: string。Default `📑`。 - HTML指定: `data-calendar-task-icon="📌"`。 - 効果: タスクありを示すCalendar上の記号だけが変わります。Task Typeの `icon` とは別設定です。 ### 3.21 `calendarTaskIconPosition` - 目的: `calendarTaskIcon` の表示位置。 - 許容値: `right` / `center` / `left`。Default `right`。 - HTML指定: `data-calendar-task-icon-position="left"`。 - 効果: 日付下のタスクあり記号が左/中央/右へ移動します。 ### 3.22 `selectedDayVisible` - 目的: Calendar下部の選択日詳細領域を表示するか。 - 型: boolean。**Runtime Default `false`**。 - HTML指定: `data-selected-day-visible="true"`。 - `true`: 選択日、その日のTask/祝日/Event等の詳細領域を表示します。 - `false`: 詳細領域だけ非表示。日付セルの選択、`value`、select Eventは無効になりません。 ### 3.23 `showTaskTypeManagerButton` - 型: boolean。Default `true`。 - HTML指定: `data-show-task-type-manager-button="false"`。 - 効果: Footerの「タスク区分」ボタンだけを表示/非表示にします。Task Typeデータは保持されます。 ### 3.24 `showTaskManagerButton` - 型: boolean。Default `true`。 - HTML指定: `data-show-task-manager-button="false"`。 - 効果: Footerの「タスク」ボタンだけを表示/非表示にします。Taskデータは保持されます。 ### 3.25 `showEventManagerButton` - 型: boolean。Default `true`。 - HTML指定: `data-show-event-manager-button="false"`。 - 効果: Footerの「イベント」ボタンだけを表示/非表示にします。Eventデータは保持されます。 ### 3.26 `showAnnotationManagerButton` - 型: boolean。Default `true`。 - HTML指定: `data-show-annotation-manager-button="false"`。 - 効果: Footerの🎌 Annotation/祝日CSV管理ボタンだけを表示/非表示にします。Annotationデータは保持されます。 ### 3.27 `taskTypes` - 型: array。HTML指定: `data-task-types='[...]'`。 - 効果: Task Typeマスタを初期登録します。Taskが0件でも単独登録できます。 - 主キー: `id`。Taskの `typeId` がこの `id` を参照します。 - 主要項目: `id / label / kind / icon / backgroundColor / backgroundOpacity / textColor / textOpacity / showCalendarIcon`。 ### 3.28 `tasks` - 型: array。Default `[]`。HTML指定: `data-tasks='[...]'`。 - 効果: CalendarへTask一覧を初期登録します。 - 主要項目: `taskId / date / start / end / typeId / label / content / memo / showInRemarks`。 - `typeId` がTask Typeに存在しない場合は登録エラーです。 ### 3.29 `events` - 型: array。Default `[]`。HTML指定: `data-events='[...]'`。 - 効果: 記念日/カスタム休日を初期登録し、該当日のCalendar表示・選択日詳細へ反映します。 - 主要項目: `eventId / date / kind / emoji / label`。 ### 3.30 `display054Settings` - 型: object。 - HTML指定: `data-display054-settings='{"startTime":"00:00","endTime":"23:59","timelineStepMinutes":180,"timelineSnapMinutes":15,"timelineShowGrid":true,"timeBarHeightPx":58}'`。 - 効果: #054 Display Timeline連携時の時間範囲・目盛・snap・縦線・バー高さ設定を保持します。Calendarの日付選択自体を変更するPropertyではありません。 ## 4. 日付・範囲・step ### `value` `YYYY-MM-DD` の厳密なGregorian calendar dateです。例: `2026-08-10`。空/nullは未選択を表します。実在しない日付、別形式、文字列以外は拒否されます。 ### `min` / `max` どちらもnullまたは厳密な `YYYY-MM-DD`。`min > max` は `CALENDAR_MIN_MAX_INVALID`。日付セルの選択可否に使い、前月/次月および `previousMonth()` / `nextMonth()` の表示月も `min` / `max` の月境界を越えません。 ### `step` - `any`: step条件による制限なし。 - `1`: 毎日。Runtime Default。 - `2`～`3650`: N日刻み。 正整数範囲は1～3650、単位は日です。基準日は `min` があれば `min`、なければ `1970-01-01` です。0、負数、小数、3651以上は `CALENDAR_STEP_INVALID`。 --- ## 5. Theme 全4値 ### `default` - 意味/表示: 標準Dark系Theme。Runtime Defaultです。 - HTML例: `data-theme="default"`。 - 関連: `inheritParent=false` ではTheme変数がそのまま表示に使われます。`inheritParent=true` では親から同期する外観が優先されます。 ### `dark` - 意味/表示: `default` より暗いbackground/surfaceを使うDark Themeです。 - Default: いいえ。 - HTML例: `data-theme="dark"`。 - 関連: `inheritParent=true` では親同期外観が優先されます。 ### `light` - 意味/表示: 白系backgroundと濃色textを使うLight Themeです。 - Default: いいえ。 - HTML例: `data-theme="light"`。 - 関連: `inheritParent=true` では親同期外観が優先されます。 ### `neon` - 意味/表示: シアンAccentを中心にしたNeon Themeです。 - Default: いいえ。 - HTML例: `data-theme="neon"`。 - 関連: #022 Hover Border Effectとは別責務です。Themeをneonにしても#022 Effectは自動有効化されません。 Themeは `default / dark / light / neon` の4値のみです。Theme内部の色は#024 CalendarのTheme責務であり、個別Color Propertyへ分解しません。 --- ## 6. 表示・基本操作Property ### `iconVisual` - `fontawesome`: CDNを使わない内蔵SVG。Default。 - `emoji`: 前後月ナビやAnnotationを絵文字表現へ切替。 ### `disabled` - `false`: 操作可能。Default。 - `true`: Calendar全体を操作不可にします。 ### `className` Runtimeが生成する `.bone-calendar` rootへ追加する任意Class名です。HTML Functional Class `bf-calendar` 自体とは別です。 ### `ariaLabel` Calendar rootのアクセシブルネーム。Defaultは `Calendar`。 ### `showTodayButton` - `true`: 今日ボタンを表示。Default。 - `false`: 今日ボタンを非表示。 --- ## 7. `weekStart` と `locale` 許容値は `auto` / `monday` / `sunday` の3値です。 ### `weekStart=auto` - 意味/表示: 後方互換値。開始曜日は `sunday` に解決し、Locale/環境では変化しません。 - 解決: 明示 `locale` が `ja` / `ja-*` なら月曜、それ以外の明示Localeは日曜。`locale` 未指定時だけ実行環境の言語/Timezoneを参照し、日本環境を月曜開始にします。 - HTML例: `data-week-start="auto" data-locale="ja-JP"`（日曜始まりのまま日本語表示）。 - 関連: `locale` が結果へ影響するのは `auto` のときだけです。 ### `weekStart=monday` - 意味/表示: Localeに関係なく月曜日を左端の週開始にします。 - Default: いいえ。 - HTML例: `data-week-start="monday"`。 - 関連: `locale` を指定しても開始曜日は変わりません。 ### `weekStart=sunday` - 意味/表示: Localeに関係なく日曜日を左端の週開始にします。 - Default: いいえ。 - HTML例: `data-week-start="sunday"`。 - 関連: `locale` を指定しても開始曜日は変わりません。 `locale` は `ja-JP`、`en-US` のような形式。無効形式は `CALENDAR_LOCALE_INVALID`。 --- ## 8. Annotationと`showTasks` Annotation kindは全4値です。 - `holiday`: 祝日。セル内アイコン + Tooltip。`iconVisual=emoji` では **🎌**。例: 山の日。 - `customHoliday`: 独自休日。セル内アイコン + Tooltip。`iconVisual=emoji` では **🏖️**。例: お盆休み。 - `anniversary`: 記念日。セル内アイコン + Tooltip。`iconVisual=emoji` では **⭐**。例: 創立記念日。 - `task`: 予定。日付Tooltipとtask dot。`href`を任意指定可能。絵文字日付セルiconの対象ではありません。 ``` { "2026-08-11": {"items":[{"kind":"holiday","label":"山の日","icon":true}]}, "2026-08-10": {"items":[{"kind":"task","label":"10:00 定例会議","href":"/schedule/123"}]} } ``` `label` は1～240文字。`task.href` は相対URLまたは `http/https` のみです。protocol-relative URL、制御文字、`javascript:` 等は拒否します。`href` はtask以外へ指定できません。 `showTasks=true` はtask Tooltip/dotを表示、`false` はtaskだけを非表示にし、holiday/customHoliday/anniversaryは維持します。 このDOCの祝日サンプルは `iconVisual=emoji` を使用します。`holiday` の日付セルiconは **🎌**、`customHoliday` は **🏖️**、`anniversary` は **⭐** です。Runtime Defaultの `iconVisual` 自体は互換性維持のため `fontawesome` のままです。 --- ## 9. サイズ・親要素・9方向Position ### `inheritParent` - `false`: `width` / `height` / `position` を使う単体表示。Default。 - `true`: 親へ幅/高さ100%で吸着し、`syncParentStyle()` はradius/size等のレイアウト情報を同期します。Theme配色は維持します。 ### `width` 240～1200の整数px。Default 360px。 ### `height` 280～1200の整数px。Default 360px。 ### `position` 全9値 - `top-left`: 親領域の左上。Defaultではありません。HTML例 `data-position="top-left"`。 - `top-center`: 親領域の上中央。Defaultではありません。HTML例 `data-position="top-center"`。 - `top-right`: 親領域の右上。Defaultではありません。HTML例 `data-position="top-right"`。 - `middle-left`: 親領域の左中央。Defaultではありません。HTML例 `data-position="middle-left"`。 - `center`: 親領域の中央。Runtime / Property Editor Default。HTML例 `data-position="center"`。 - `middle-right`: 親領域の右中央。Defaultではありません。HTML例 `data-position="middle-right"`。 - `bottom-left`: 親領域の左下。Defaultではありません。HTML例 `data-position="bottom-left"`。 - `bottom-center`: 親領域の下中央。Defaultではありません。HTML例 `data-position="bottom-center"`。 - `bottom-right`: 親領域の右下。Defaultではありません。HTML例 `data-position="bottom-right"`。 無効値は `CALENDAR_OPTION_ENUM_INVALID`。`inheritParent=true` の場合は親吸着が優先されるため、単体Positionの視覚的意味は失われます。 ### FITとの関係 #024 Calendarには独立した `FIT` Propertyはありません。親へ合わせる正式経路は `inheritParent=true` と `syncParentStyle()` です。 --- ## 10. #022 Hover Border Effect連携 HTML Functional Classでは必要時だけ `data-hover-enabled="true"` を指定します。DefaultはOFFです。TriggerはCalendar日付セルのmouse over契約のため `mouseover` 固定です。 ### 10.1 `trigger` - 値: `mouseover` 固定。 - Default: `mouseover`。 - #024側で別Triggerを捏造しません。 ### 10.2 `effect` 全5値 - `normal`: 標準枠Effect。Functional Class Default。 - `neon`: Neon発光枠。 - `spin`: 回転枠。 - `cross`: Cross系枠。 - `blink`: Blink系枠。 - HTML指定: `data-hover-effect="neon"` 等。 ### 10.3 `direction` 全2値 - `clockwise`: 時計回り。Default。 - `counterclockwise`: 反時計回り。 - HTML指定: `data-hover-direction="counterclockwise"`。 ### 10.4 `speed` 全3値 - `slow`: 低速。 - `normal`: 標準。Default。 - `fast`: 高速。 - HTML指定: `data-hover-speed="fast"`。 ### 10.5 `spinWidth` - #022契約範囲: 1～24px。 - Functional Class Default: 2px。 - HTML指定: `data-hover-spin-width="2"`。 - #024は数値を#022へ渡し、Effect本体の最終契約は#022が所有します。 ### 10.6 `spinGlow` - #022契約範囲: 0～40px。 - Functional Class Default: 12px。 - HTML指定: `data-hover-spin-glow="12"`。 ### 10.7 `color` - 種別: solid色。 - Functional Class Default: `#35f4ff`。 - HTML指定: `data-hover-color="#35f4ff"`。 - 色選択UIは#040 ColorPickerの責務です。 #024は日付セルを再描画します。そのため月移動や選択後は旧日付セルからEffectをdetachし、再描画後の `.bone-calendar__day` 全体へ再attachします。Functional Classも `bone-calendar:select` / `bone-calendar:month-change` 後に同じ再attachを行います。 #022本体のEffect実装を#024へ複製しません。 --- ## 11. #040 ColorPickerとの責務分離 #024テスト画面の親背景色・親文字色・#022 Effect色は #040 ColorPicker Caller APIを使用し、Consumer側は `solid` のみ許可します。Native `` を#024 Consumerの色選択UIとして追加しません。 #040は「色を選ぶ」責務、#024は「返された色を既存Propertyへ適用する」責務です。Calendar Theme内部色を#040へ委譲しません。 --- ## 12. 操作 - 前月: Calendar Headerの前月ボタン、または `previousMonth()`。 - 次月: Calendar Headerの次月ボタン、または `nextMonth()`。 - 日付選択: 選択可能な日付セルをクリック。`bone-calendar:select` を発火。 - 今日: Todayボタンまたは `selectToday()`。 - 月表示の直接変更: `setView()`。 - Property変更: `setOptions()`。Runtimeが再描画します。 日付選択結果を確定入力へcommitするか、別UIへOUTするかは呼び出し元の責務です。 --- ## 13. Security #024は日付、Locale、Annotation、URLをRuntimeで検証します。主な拒否条件: - 日付型/形式/実在日付不正 - `min > max` - enum不正 - width/height範囲外 - Annotationがplain objectでない - Annotation item不正 - label空/240文字超 - task以外へのhref - protocol-relative URL - `javascript:` 等の非http/https scheme - URL内制御文字 Accessor/Proxy等のuntrusted objectを「安全だと仮定して実行」する機能はDOCで追加しません。Runtimeが受け付ける型・検証結果をそのまま基準とします。 --- ## 14. #002 Joint / WAIT / FIFO / BLOCKED #024テスト画面の接続イメージは #002 Bone Joint の実判定/実描画を使用します。 ただし #024 Calendar Runtime自身は `OUT` とDelivery Channelを持ちません。そのため: - WAIT: N/A - FIFO: N/A - BLOCKED: N/A WAIT/FIFO/BLOCKEDを見た目だけ追加することもしません。選択結果のDeliveryは呼び出し元Component側の責務です。 --- ## 15. Public API 全24件 Public APIはHTML Functional Classとは別管理です。function APIはRuntime実体どおり24件です。 1. `create(options)` — Calendar DOMを生成します。 2. `destroy(element)` — Instanceを破棄します。 3. `setOptions(element, patch)` — Property差分を更新して再描画します。 4. `getOptions(element)` — 正規化済みPropertyを取得します。 5. `setValue(element, value, source)` — 選択日を設定します。 6. `getValue(element)` — 選択日を取得します。 7. `setView(element, value)` — 表示月を `YYYY-MM` または `{year,month}` で設定します。 8. `getView(element)` — 表示年月を取得します。 9. `previousMonth(element)` — 前月へ移動します。 10. `nextMonth(element)` — 次月へ移動します。 11. `selectToday(element)` — 今日を選択します。 12. `setAnnotations(element, annotations)` — Annotationを更新します。 13. `getAnnotations(element)` — Annotationを取得します。 14. `validateAnnotations(annotations)` — Annotationを例外を投げずValidation resultとして検証します。 15. `validateDate(value, options)` — 日付形式と選択可否を検証します。 16. `isDateSelectable(value, options)` — min/max/step/disabledを含む選択可否をbooleanで返します。 17. `isInstance(element)` — Calendar Instanceか判定します。 18. `resolveWeekStart(weekStart, locale)` — `auto` を `monday` / `sunday` へ解決します。 19. `annotationsForDate(annotations, date)` — 指定日のAnnotation itemを取得します。 20. `syncParentStyle(element)` — 親へのレイアウト吸着情報を同期して再描画します。 21. `monthMatrix(year, month, weekStart, locale)` — 42セルの月Matrixを生成します。 22. `daysInMonth(year, month)` — 月の日数を返します。 23. `isLeapYear(year)` — Gregorian calendarの閏年を判定します。 24. `today()` — 今日を `YYYY-MM-DD` で返します。 Runtime objectには `version` / `componentId` / `type` / `status` / `defaults` / enum配列等のmetadataもありますが、24件の数にはfunction APIだけを数えています。 ### 15.1 Public API 詳細 #### 1. `create(options)` - 引数: plain object。Default Propertyに加えて任意の `onSelect` / `onMonthChange` callbackを渡せます。 - 戻り値: 生成された `
` Element。 - 役割: Runtime Instanceを生成し、初期表示をrenderします。DOMがない環境では `CALENDAR_DOM_REQUIRED`。 #### 2. `destroy(element)` - 引数: Calendar Element。 - 戻り値: 破棄した場合 `true`、未登録Elementなら `false`。 - 役割: Instance登録とTooltip timerを破棄し、親DOMからElementを外します。 #### 3. `setOptions(element, patch)` - 引数: Calendar Element、plain objectの差分Property。 - 戻り値: 同じCalendar Element。 - 役割: 既存値を維持しつつPropertyを再正規化して再描画します。`onSelect` / `onMonthChange` callback差替えもここで行えます。 #### 4. `getOptions(element)` - 引数: Calendar Element。 - 戻り値: 正規化済みPropertyのfrozen object。 - 役割: 現在Propertyの読取。内部state objectそのものは返しません。 #### 5. `setValue(element, value, source)` - 引数: Calendar Element、`YYYY-MM-DD` または null/空、任意source文字列。 - 戻り値: `{selected,value,previousDate,event}` 相当のfrozen result。選択不可なら `selected:false`。 - 役割: 選択日を設定し、選択成功時は表示月をその日へ合わせて `bone-calendar:select` を発火します。null/空は未選択へ戻します。 #### 6. `getValue(element)` - 引数: Calendar Element。 - 戻り値: 現在の `YYYY-MM-DD` または null。 - 役割: 選択値の読取だけを行います。 #### 7. `setView(element, value)` - 引数: Calendar Element、`YYYY-MM` または `{year, month}`。 - 戻り値: 同じCalendar Element。 - 役割: 表示月を直接設定して `bone-calendar:month-change` を発火します。`setView` はmin/max月外を `CALENDAR_VIEW_RANGE_INVALID` で拒否します。前月/次月ボタン・`previousMonth` / `nextMonth` も同じ月境界を越えず、境界側のナビゲーションボタンはdisabledになります。 #### 8. `getView(element)` - 引数: Calendar Element。 - 戻り値: `{year, month, value:"YYYY-MM"}` のfrozen object。 - 役割: 現在の表示月を取得します。 #### 9. `previousMonth(element)` - 引数: Calendar Element。 - 戻り値: 移動できた場合 `true`、`min` の月境界またはCalendar年範囲を越える場合 `false`。 - 役割: 1か月前へ移動して `bone-calendar:month-change` を発火します。`min` の月境界を越える移動は行いません。 #### 10. `nextMonth(element)` - 引数: Calendar Element。 - 戻り値: 移動できた場合 `true`、`max` の月境界またはCalendar年範囲を越える場合 `false`。 - 役割: 1か月後へ移動して `bone-calendar:month-change` を発火します。`max` の月境界を越える移動は行いません。 #### 11. `selectToday(element)` - 引数: Calendar Element。 - 戻り値: `setValue`と同系統の選択result。 - 役割: Runtime `today()` の日付を選択します。min/max/step/disabled上選択不可なら `selected:false`。 #### 12. `setAnnotations(element, annotations)` - 引数: Calendar Element、Annotation object。 - 戻り値: 同じCalendar Element。 - 役割: `setOptions(...,{annotations})` と同じ正規化/再描画経路でAnnotationを更新します。 #### 13. `getAnnotations(element)` - 引数: Calendar Element。 - 戻り値: 現在の正規化済みAnnotation object。 - 役割: 現在Annotationを読み取ります。 #### 14. `validateAnnotations(annotations)` - 引数: Annotation候補値。 - 戻り値: 成功時 `{valid:true,dates,annotations,code:null}`、失敗時 `{valid:false,dates:0,annotations:{},code,message}` 相当のfrozen object。 - 役割: 例外を呼出側へ投げず、Validation resultとして確認したい場合に使います。 #### 15. `validateDate(value, options)` - 引数: 日付候補、Property options。 - 戻り値: `{valid,value,selectable,code,message?}` のfrozen object。 - 役割: 厳密日付として有効かと、min/max/step/disabled上選択可能かをまとめて返します。 #### 16. `isDateSelectable(value, options)` - 引数: `YYYY-MM-DD`、Property options。 - 戻り値: boolean。 - 役割: 日付形式が正しい前提で、disabled/min/max/stepによる選択可否を直接判定します。不正入力はRuntime Errorを投げます。 #### 17. `isInstance(element)` - 引数: 任意Element。 - 戻り値: boolean。 - 役割: #024 Runtimeが管理中のCalendar Elementかを判定します。 #### 18. `resolveWeekStart(weekStart, locale)` - 引数: `auto / monday / sunday`、任意Locale。Locale/Timezoneは開始曜日を変更しません。 - 戻り値: `monday` または `sunday`。 - 役割: `auto`を最終開始曜日へ解決します。 #### 19. `annotationsForDate(annotations, date)` - 引数: Annotation object、`YYYY-MM-DD`。 - 戻り値: 指定日の正規化済みAnnotation item配列。該当なしは空配列。 - 役割: Calendar DOMを操作せず、指定日Annotationだけを取得します。 #### 20. `syncParentStyle(element)` - 引数: Calendar Element。 - 戻り値: `inheritParent=true` で同期できた場合は親Style情報のfrozen object、非依存/同期不可は null。 - 役割: 直接親のcomputed size/radius等を取り込みます。互換の戻り値には親色情報も含みますが、CalendarのTheme色は上書きしません。 #### 21. `monthMatrix(year, month, weekStart, locale)` - 引数: year 1～9999、month 1～12、開始曜日、Locale。 - 戻り値: 常に42要素のfrozen array。月外セルは null。 - 役割: 6週×7日のCalendar Matrixを生成します。 #### 22. `daysInMonth(year, month)` - 引数: year、month。 - 戻り値: 28～31の日数。 - 役割: 2月は `isLeapYear` を使って日数を決定します。 #### 23. `isLeapYear(year)` - 引数: year。 - 戻り値: boolean。 - 役割: Gregorian calendarの閏年規則で判定します。 #### 24. `today()` - 引数: なし。 - 戻り値: 実行環境の今日を `YYYY-MM-DD` 文字列で返します。 - 役割: Today表示/選択の基準日取得です。 --- ## 16. Error Code ### Runtime Error - `CALENDAR_ANNOTATIONS_INVALID`: annotations全体がplain objectではありません。 - `CALENDAR_ANNOTATION_ENTRY_INVALID`: 日付Entryがitem配列または `{items:[...]}` ではありません。 - `CALENDAR_ANNOTATION_HREF_INVALID`: hrefが空、不正scheme、protocol-relative、制御文字等を含みます。 - `CALENDAR_ANNOTATION_HREF_KIND_INVALID`: `task` 以外へhrefを指定しています。 - `CALENDAR_ANNOTATION_ITEM_INVALID`: Annotation itemがplain objectではありません。 - `CALENDAR_ANNOTATION_LABEL_INVALID`: labelが空、または240文字を超えています。 - `CALENDAR_DATE_FORMAT_INVALID`: 日付が厳密な `YYYY-MM-DD` 形式ではありません。 - `CALENDAR_DATE_INVALID`: Gregorian calendar上実在しない日付です。 - `CALENDAR_DATE_NOT_SELECTABLE`: 日付自体は有効ですが、disabled/min/max/step上選択できません。 - `CALENDAR_DATE_TYPE_INVALID`: 日付が文字列ではありません。 - `CALENDAR_DIMENSION_INVALID`: width/heightが整数または許容範囲外です。 - `CALENDAR_DOM_REQUIRED`: `create()` 実行に必要なDOM環境がありません。 - `CALENDAR_INSTANCE_INVALID`: Runtime管理中ではないElementをInstance APIへ渡しました。 - `CALENDAR_LOCALE_INVALID`: locale形式が不正です。 - `CALENDAR_MIN_MAX_INVALID`: `min > max` です。 - `CALENDAR_MONTH_INVALID`: year/monthがCalendar範囲外です。 - `CALENDAR_OPTIONS_INVALID`: options/patchがplain objectではありません。 - `CALENDAR_OPTION_ENUM_INVALID`: Theme/Icon/WeekStart/Position/Annotation kind等のenum値が不正です。 - `CALENDAR_STEP_INVALID`: stepが `any` または1～3650の整数ではありません。 - `CALENDAR_VIEW_INVALID`: viewが `YYYY-MM` / `{year,month}` の契約に合いません。 - `CALENDAR_VIEW_RANGE_INVALID`: `setView()` の表示月がmin/max月の外です。 ### HTML Functional Class Integration Error - `BF_CALENDAR_RUNTIME_REQUIRED`: `bf-calendar` が必要とする BoneCalendar Public API capability が不足しています。patch version文字列の完全一致では判定しません。 - `BF_CALENDAR_HOVER_DEPENDENCY_REQUIRED`: #022の `attach / detach / getState / isAttached` が不足しています。 - `BF_CALENDAR_ANNOTATIONS_JSON_INVALID`: `data-annotations` がJSON Objectとして読めません。 - `BF_CALENDAR_BOOLEAN_INVALID`: Boolean `data-*` が `true / false` 以外です。 - `BF_CALENDAR_NUMBER_INVALID`: 数値 `data-*` が有限数へ変換できません。 --- ## 17. トラブル時の確認 ### `bf-calendar` が表示されない `bone-calendar.js` v1.0.15 と `bone-calendar-functional-class.js` が読まれているか確認します。 ### min/max入力欄とPreview状態が一致しない Runtime QAはPreview本体をテスト用min/maxへ書き換えません。Property入力が `min=2026-08-01 / max=2027-08-10 / step=1` の場合、2026年9月など範囲内月の日付は通常選択でき、2027年8月から9月への移動はできません。 ### 月移動後にHover Effectが消える #022 Runtimeが存在し、Functional Classの `data-hover-enabled="true"` が有効か確認します。月移動後は再描画された日付セルへの再attachが必要です。 ### `step` で一部日付が押せない `min`があればmin、なければ1970-01-01を基準にN日刻みです。 ### `auto` が期待と違う 明示 `data-locale` の値を確認します。`ja/ja-*` は月曜、それ以外の明示Localeは日曜です。 ### taskリンクが拒否される 相対URLまたはhttp/httpsだけを使用し、task以外へhrefを付けないでください。 --- ## 18. 責務境界 - #024 Calendar: Calendar UI、選択、表示月、Theme、Annotation表示、親同期。 - #022 Hover Border Effect: 日付セル枠Effect本体。 - #040 ColorPicker: 色選択UI/RETURN。 - #002 Bone Joint: 接続判定/描画、Delivery責務を持つ側でのWAIT/FIFO/BLOCKED。 - 呼び出し元Picker/Input: editing/commit/invoke/OUT。 このDOC Integrationは共有 `bone-doc-loader.js / bone-doc-guide.js / bone-doc-guide.css` を#024都合で変更しません。 ### v1.0.37 Theme / 選択日表示修正 - `inheritParent=true` はレイアウト吸着であり、Theme配色を親色で上書きしません。 - `light` Themeは親に吸着ONでも白系background / 濃色textを維持します。 - 選択日パネルには内部スクロールバーを出しません。 - `selectedDayVisible` で選択日の表示/非表示を切り替えます。Standalone Sampleにも同じチェックを用意します。 ## v1.0.41 Calendar Preview / Standalone parity correction - Calendar Preview の選択日タスク主表示を `開始時間~終了時間 タスク名` とする。例: `10:00~11:00 定例会議`。 - 選択日パネルは内部スクロールを持たず、単体表示では configured height を最小高さとして必要分だけ縦方向へ展開する。 - Standalone Sample の Task Type / Task / Event / Annotation データは `/test/bone-calendar.html` と同一契約・同一基準データを使用する。 - Standalone 配布物は `bf-calendar.html` / `bf-calendar.css` / `bf-calendar.js` の3ファイルだけで動作することをブラウザSmoke対象とする。 --- ## 19. v1.0.42 外部データ操作 / 管理画面 外部データ操作はテスト専用の別パネルではなく、Calendar下部の正式管理ボタンから開く実管理モーダルで行います。 ### 19.1 タスク区分管理（マスター） タスク区分はマスターです。色やアイコンをタスクへ重複保存せず `typeId` で参照します。 - 単体: 新規 / 追加 / 更新 / 削除 - 一括: 現在値読込 / 一括置換 / 一括追加・更新 / 指定ID一括削除 / 全削除 - 主な項目: `id`, `label`, `kind`, `icon`, `backgroundColor`, `backgroundOpacity`, `textColor`, `textOpacity`, `showCalendarIcon` ### 19.2 タスク管理 一覧上部で表示対象を切り替えます。 - `選択日`: 現在のCalendar選択日のタスク - `一覧`: 全タスク - `月別`: Calendar表示月のタスク - `週別`: 選択日を含む週のタスク（`weekStart` に従う） 単体登録フォームは2つの責務を画面上で分けます。 **#024 Calendar タスク本体** `taskId / date / start / end / typeId / label / content / memo / showInRemarks` **#054 Display Timeline 表示データ** `displayType / commentOffsetX / commentOffsetY / commentWidth` `displayType` は `bar`（タイムバー）または `shapeComment`（シェイプコメント）。シェイプコメント時だけX位置 / Y位置 / 幅を使用します。 一括操作も2つに分離します。 1. `#024 Calendar タスク 一括操作`: タスク本体だけを読込・置換・追加/更新・削除。既存taskIdを更新する場合、#054表示データは保持します。 2. `#054 Display Timeline 表示データ 一括操作`: `taskId` でタスクへ関連付け、表示方式と位置だけを更新・初期化します。 #054表示データ専用API: ```js BoneCalendar.getTaskDisplay054(calendar, taskId); BoneCalendar.getTasksDisplay054(calendar); BoneCalendar.setTaskDisplay054(calendar, taskId, { displayType: "shapeComment", commentOffsetX: 24, commentOffsetY: 36, commentWidth: 160 }); BoneCalendar.setTasksDisplay054(calendar, [ {taskId:"task-001", displayType:"bar", commentOffsetX:0, commentOffsetY:0, commentWidth:96} ]); ``` ### 19.3 イベント管理 - 単体: 新規 / 追加 / 更新 / 削除 - 一括: 現在値読込 / 一括置換 / 一括追加・更新 / 指定eventId一括削除 / 全削除 - データ: `eventId / date / kind / emoji / label` ### 19.4 Annotation / 祝日CSV `Annotation IN / 祝日CSV変換` モーダル内で現在JSON読込、JSON一括置換、日付単位の追加・更新、JSON内日付の削除、全削除、内閣府CSV変換を行います。 ### 19.5 HTML初期データ `bf-calendar` は初期mount時に次の属性を直接Runtimeへ渡します。 ```html
``` ### 19.6 高さと選択日表示 `height` はCalendarの最低高さです。固定高さとして内容を潰しません。タスク、イベント、選択日詳細が増えた場合はCalendar全体が必要分だけ縦方向へ拡張します。`selectedDayVisible=true` でも月グリッドを縮めて潰しません。非表示にするときは `selectedDayVisible=false` / `data-selected-day-visible="false"` を使用します。 ## 20. v1.0.43 Preview起動キャッシュ対策 テスト画面は #024 Runtime と `bf-calendar` HTML Functional Class を `cache:no-store` で再取得し、旧Functional ClassのブラウザキャッシュによってPreview生成が停止しないようにします。 ## 21. v1.0.45 管理画面修正 - タスク管理の月別/週別に「月キー」「週キー」を追加。 - タスク基本情報は日付/区分、開始時間/終了時間の順で2列配置し、開始→終了の自然な並びに統一。 - #054 Display Timeline は任意。新規タスクでは未設定が標準です。「#054表示を使用」をONにした場合も、`displayType / commentOffsetX / commentOffsetY / commentWidth` はTask本体へ書かず、`taskId` で関連付けた別storeに保持します。 - #054共通設定は別ボックスで、開始/終了時間、目盛step、編集snap、縦線表示、タイムバー高さを設定する。 - タスク区分はマスターとして基本情報・色/アイコン・Calendar表示・任意Effectを分離。 - 背景色/文字色/Effect色は #040 ColorPicker Caller を使用する。 ## 22. v1.0.46 ColorPicker表示 / #118 Transition - タスク区分マスターは ID / 名称 / 種別 / アイコン / 背景色 / 背景色透過率 / 文字色 / 文字色透過率 / Calendarアイコン表示を保持します。 - v1.0.45で一時追加したタスク区分自身のEffect値は正式データから外します。 - 背景色・文字色は #040 ColorPicker `attachCaller()` を使用し、native `input[type=color]` 代用やConsumer側の独自open処理は使用しません。 - `ColorPicker表示 / #118 Transition（任意）` で #040 Overlay OPEN/CLOSE の `Transition種類` と `方向` を設定できます。 - Transition種類は #118正式23種、方向は `up / down / left / right`。Directionを使わないTransitionでは方向欄を無効化します。 - この設定はColorPickerの表示方法であり、タスク区分マスターJSONには保存しません。 ## v1.0.50 boot contract correction テスト画面の `ensureFreshAssets()` / `boot()` / Runtime Report に残っていた旧 `1.0.18` 判定を Runtime `1.0.19` へ整合しました。Runtime本体の仕様変更ではありません。 ## v1.0.50 タスク区分 ColorPicker 修正 タスク区分の背景色・文字色は正式 #040 ColorPicker Caller を使用します。管理モーダルより body 直下の #040 Overlay を前面表示し、色ボタンの click で実Pickerが開くことをSmokeで確認します。 ### HTML Functional Class のデータCRUD `bf-calendar` は `data-task-types` / `data-tasks` / `data-events` で初期データを登録できます。mount後は `BoneCalendarFunctionalClass` の `add/update/remove` APIでタスク区分・タスク・イベントを編集でき、結果は対応する `data-*` 属性へ同期されます。 Minimalページでもタスク区分管理から正式 #040 ColorPicker を実OPENできるよう、#001 Bone Core補助Runtime群 → #001 BoneCore → #002 Bone Joint補助Runtime群 → #002 BoneJoint → #020 Label → #022 Hover Border Effect → #118 Transition Runtime → #118 `bf-transition` Functional Class → #040 ColorPicker → #024 Calendar の順で読み込みます。Calendar本体のMinimal要素は3属性のままです。 ### 一括操作 — サンプル・ツールチップ・登録情報出力 各一括操作には「複数サンプルをセット」を用意する。押すと複数件の有効なJSON例を入力欄へ入れるだけで、まだ登録は行わない。各操作ボタンはtitleツールチップで「何を入力するか」「一括置換と追加/更新の違い」「削除時のID指定」を説明する。「登録情報を出力」は現在の taskTypes / tasks / taskDisplay054 / events / annotations / display054Settings を1つのJSONへ出力する。 ### CSV入出力とHTML Functional Classデータ タスク区分・#024タスク・イベント・#054表示データの一括操作には `CSV出力` と `CSV取込` がある。`CSV出力` はその種類の**現在登録されているデータ**をUTF-8 BOM付きCSVとして保存する。したがって、`複数サンプルをセット` → `一括置換` → `CSV出力` の順に操作すると、その実登録内容がそのまま編集可能なCSVサンプルになる。 `CSV取込` はCSVを直接登録しない。CSVを解析して一括操作のJSON入力欄へ展開するので、内容を確認してから `一括置換` または `一括追加 / 更新` を押す。Excel等で編集して再取込する運用を想定する。UTF-8を基本とし、Shift_JISも読込を試行する。 HTMLでは `bf-calendar` に `data-task-types` / `data-tasks` / `data-events` を指定して複数件を初期登録できる。CSVはこの登録後のRuntimeデータから出力するため、HTML Functional Classで初期登録したデータも同じCSV出力対象になる。 - Package 1.0.86 / Runtime 1.0.34: selected-day Task cards resolve `Task.typeId -> Task Type.id` and apply the Task Type `backgroundColor/backgroundOpacity` and `textColor/textOpacity`; the Task Type icon is also used in the selected-day row. ### Package 1.0.86 選択日表示とCalendarタスクアイコン - Calendarの日付セルに表示するタスクアイコンは、Taskの `typeId` からTask Typeを参照し、Task Typeの `icon`・`backgroundColor/backgroundOpacity`・`textColor/textOpacity` を使った色付きバッジとして表示します。 - 同じ日に複数のTask Typeがある場合は、Task Typeごとにアイコンを並べます。 - `selectedDayVisible=true` の選択日詳細は「選択日」アコーディオンとして表示します。初期状態は開いた状態で、見出しをクリックすると折りたためます。 - `selectedDayVisible=false` ではアコーディオン自体を非表示にします。 - 選択日アコーディオンの直前に重複表示していた単独の日付行は表示しません。選択日はアコーディオン見出し右側の日付だけで確認します。 ### 勤務種別テーブル タスク区分「勤務 [work]」は削除不可です。勤務種別は8種を表で管理し、有効、固定ID、名称、アイコン、背景色、背景透過率、文字色、文字透過率を確認・編集できます。背景色と文字色は各行の **#040 ColorPicker Caller** を使用します。デスクトップでは管理画面幅を広く使い、全列を横スクロールなしで表示します。有効OFFでも既存データは削除せず、新規登録候補からのみ除外します。 #### 勤務種別テーブルの表示幅 勤務種別テーブルは管理グループの全幅を使用します。デスクトップでは8列を余裕を持って表示し、背景色・文字色の #040 ColorPicker Caller と透過率入力が重ならないレイアウトです。狭い画面だけ横スクロールを使用します。 ### Package 1.0.86 Minimal — Redmineテーマ後付け再現 `minimal.html` は最初から `bf-calendar` をHTMLへ置きません。高さ560px固定の空コンテナを先に表示し、`window.load` 後に `bf-calendar` 要素をJavaScriptで追加します。追加された要素はHTML Functional ClassのMutationObserverが検出して自動mountします。Redmineテーマが既存画面表示後にCalendar用要素を追加する構成を再現するための実動作サンプルです。手動 `BoneCalendar.create()` / `setTaskData()` は使用しません。 ## 📖 Calendar 共通設定 Calendar下部の📖から Theme、タスク区分/タスク/イベント/🎌/📖管理ボタンの表示・非表示、Picker系の #118 Transition 種類・方向を設定します。#118設定はタスク区分画面から共通設定へ移動し、ColorPicker等のPicker系OPEN/CLOSEで共有します。 ## v1.0.114 共通設定表示・ガイド表示・#118 Transition - `data-show-settings-manager-button="true|false"`: 「共通設定を表示」を制御します。 - `data-show-guide-manager-button="true|false"`: 「ガイドを表示」を制御します。 - `data-picker-transition-effect` / `data-picker-transition-direction` / `data-picker-transition-speed` / `data-picker-respect-reduced-motion`: #040 ColorPicker Overlay の正式 #118 Transition を設定します。共通設定で変更した場合、既存 #040 Caller を再接続し、次回 OPEN/CLOSE から実 #118 ENTER/EXIT を使用します。 - Smoke / Validation は表示文言だけでなく、ColorPicker panel の `bf-transition` mount、#118 instance、ENTER/EXIT state を実確認します。#118 が動作しない場合は ALL PASS にしません。 ## v1.0.118 選択日表示形式 / 可変高さ - `selectionLayout` を正式Propertyとして追加する。値は `accordion` / `below-calendar`、default は `accordion`。 - `accordion` は従来どおりCalendar横のSelection領域にアコーディオン表示する。 - `below-calendar` は選択日要素そのものを Calendar本体（`.bone-calendar__calendar-main`）の直後へ独立した兄弟要素として移動し、内容量に応じて下方向へ自然に伸ばす。内部縦スクロールバーで内容を押し込まない。`accordion` へ戻すと同じ要素を再読込なしで Calendar本体内へ戻す。 - 「📖 Calendar 共通設定」に「選択日を表示」チェックと「選択日表示形式」を置き、表示 / 非表示と accordion / below-calendar を再読込なしで即時切替する。 - HTML Functional Class は `data-selection-layout="accordion|below-calendar"` を同じPropertyへ接続する。 - Task / Task Type / Event の一覧は固定 `max-height` を持たず、右側フォームの高さへstretchさせない。親Gridを `align-items:start` / `grid-auto-rows:max-content`、一覧自身を内容高さとして、項目末尾下に巨大な空白領域を残さない。Selectionも `max-height:none; overflow:visible` を維持する。 - 親コンテナが固定高さでも、`below-calendar` では横並びSelection領域へ押し込まず、Calendar下の独立枠として表示する。 - タスク区分ColorPickerの #118 Transition設定元は引き続きCalendar共通設定のみ。#040内部DOM/CSSをConsumer側から操作しない。 - Smoke / Validation は共通設定の即時切替、HTML class初期反映、可変高さ、#040 OPEN/CLOSE、実 #118 ENTER/EXIT を検証する。 ### v1.0.118 USER localhost修正 - 既存Property「選択日を表示」は、タスク区分/タスク/イベント等の表示設定と同じProperty領域に保持する。Calendar共通設定へ重複追加しない。 - `selectionLayout=below-calendar` は Accordion 要素自体を移動せず、Calendar本体下に専用の独立リスト要素を生成/配置し、そのリストは固定高さ・内部縦スクロールを持たず内容量に応じて伸びる。 - Task Type / Task / Event の一覧項目は、Redmine互換用の汎用 `button height:24px` の影響を受けず、折り返した全テキストを項目枠内に収める。各一覧も項目内容の合計高さに追従する。 ### v1.0.121 選択日表示コントロール - 既存Property `selectedDayVisible`（「選択日を表示」）を維持し、Calendar共通設定の表示/非表示欄からも同じPropertyをON/OFFできる。新しい重複Propertyは作らない。 - `selectionLayout` は別設定で、`accordion`（デフォルト）/ `below-calendar`（Calendar本体の下に独立した可変高さリスト）を切り替える。 - v1.0.118で修正済みのTask Type / Task / Event一覧項目レイアウトは変更しない。 ### v1.0.121 選択日表示修正 - Calendar共通設定の「選択日 / 表示設定」に「選択日を表示」と「選択日表示形式」を同じ場所で表示する。 - `selectionLayout=accordion` は従来のCalendar内アコーディオン（既定）。 - `selectionLayout=below-calendar` は固定 `.bone-calendar` の**外側**、直後の兄弟要素 `.bone-calendar__selected-day-below` に選択日リストを表示する。 - 下部リストは固定高さ・内部縦スクロールを持たず、内容量に応じて下方向へ自然に伸びる。 - `accordion ⇄ below-calendar` は再読込なしで即時切替する。 ### Package 1.0.122 below-calendar 表示修正 - `below-calendar` は `.bone-calendar` 直後の独立要素を維持し、`height:auto` / `max-height:none` / `overflow:visible` で内容量に応じて自然に伸びます。 - 独立要素は `position:relative; z-index:2; isolation:isolate` の前面スタッキング層を持ちます。 - Minimal検証ホストは固定高さ + 内部スクロールを廃止し、`height:auto` / `overflow:visible` の自然フローで最終行まで表示します。 - Minimal独自の選択日操作バーは廃止し、Property設定と「📖 Calendar 共通設定」の正式UIを使用します。 ### Package 1.0.133 補足 勤務タスクは `workTypeId` の勤務種別色・アイコンを優先します。標準の背景透過率は60%です。タスク管理で勤務種別を変更すると、タスク名へ勤務種別名（例: `paid-leave` → `有給`）を自動セットします。`below-calendar` はCalendar本体外の別要素として表示し、表示中は直近ホストを自然高さ・非クリップにして下方向へ伸ばします。 ### Package 1.0.133 補足 「カレンダーの下に別要素で表示」は、固定枠の Calendar host の外側へ選択日リストを独立要素として配置します。Calendar host の高さ・overflow は変更しません。別要素は内容量に応じて下方向へ自然に伸びます。 ## Package 1.0.134 actual Calendar anchor correction - `below-calendar` は固定Hostの下端ではなく、実際の `.bone-calendar` の描画矩形を基準に直下表示します。 - 外部Selectionは `document.body` へ別DOMとしてPortalし、固定Hostの `height` / `max-height` / `overflow` は変更しません。 - Runtime: `BoneCalendar 1.0.38`。 - v1.0.133 の「固定Hostの後ろへ配置」は不採用です。 Package 1.0.135 task-bulk selected-day refresh isolation - Runtime: BoneCalendar 1.0.38. - #024 Task bulk replace / add-update / delete / clear updates data without refreshing the selected-day presentation during the bulk action. - A pending selected-day refresh is applied once when Task Manager closes. - below-calendar actual-Calendar anchoring from Package 1.0.134 is unchanged. - Work Type color/name/60% opacity behavior is unchanged. - USER localhost verification is required before Completed/Frozen. Package 1.0.136 below-calendar manager isolation - Runtime: BoneCalendar 1.0.39. - below-calendar remains a separate body portal anchored to the actual Calendar bottom; fixed host height/overflow are not modified. - While any #024 manager dialog is open, external selected-day portals are temporarily suppressed so they cannot float above the modal. - Task-bulk pending selected-day refresh is flushed before the Task Manager portal is restored. - ResizeObserver repositions the external block when the actual Calendar box changes size. - USER localhost confirmation is required before Completed / Frozen. Package 1.0.137 manager list visual-color synchronization - Runtime: BoneCalendar 1.0.40. - Task Type manager list rows use each Task Type background/text color and configured opacity. - Task manager Task Type / Work Type select options and selected value use configured visual colors. - Task list rows use effective Work Type visual for work tasks and Task Type visual otherwise. Package 1.0.139 Smoke QA portal contract alignment - Runtime remains BoneCalendar 1.0.40. - S53/S54/S55 now validate the current below-calendar body Portal contract instead of the retired sibling placement. - No Calendar Runtime behavior change in this package. ## #024 Calendar タスクグループ (Package 1.0.149) タスクグループは **#024 BoneCalendar Runtime 内の正式データ** (`taskGroups`) です。別のRuntime、独立したTaskGroup JS/CSS、独自Timelineを使いません。`taskGroups` はテンプレートであり、適用時に限って既存の `tasks` に変換します。 デフォルト例 `regular-work / 通常勤務`: `weekdays:[1,2,3,4,5]` (月～金)、`items` は 勤務 `09:00`–`18:00` (`typeId:work, workTypeId:normal`) と休憩時間 `12:00`–`13:00` (`typeId:break`) の2件。`weekdays` は日曜0～土曜6。 API: `getTaskGroups`, `setTaskGroups`, `getTaskGroup`, `addTaskGroup`, `updateTaskGroup`, `removeTaskGroup`, `validateTaskGroups`, `applyTaskGroup`, `openTaskGroupManager`。Functional Class: `data-task-groups` / `data-show-task-group-manager-button`、`BoneCalendarFunctionalClass.getTaskGroups/setTaskGroups/applyTaskGroup` など。 `applyTaskGroup(calendar, 'regular-work', {date:'2026-09-14', scope:'week'})` は該当週の適用曜日へタスク登録します。`scope:'day'` では指定日のみ。IDは `tg-{groupId}-{YYYYMMDD}-{itemNo}` で同一グループの再適用は追加重複しません。既存のその他タスクを削除しません。 Calendar下部のタスクグループチップを、**正式な** `BoneDisplayTimeline` Runtime の `.bone-display-timeline` へドラッグすると、同じ `applyTaskGroup` を通って週のタスクを登録し、正式 `BoneDisplayTimeline.setItems` でドロップ先の日付分をタイムバーに反映します。タイムバー範囲外の時刻は事前にエラーにし、Calendarのタスクも変更しません。Timeline側は #054 Runtime をインストールしておく必要があります。#054のRuntimeや内部DOMは変更しません。CalendarとTimelineは同一ページ内が前提です。`data-date` / `data-timeline-date` / `data-calendar-date` の日付があるドロップ先はそれを優先し、ない場合はCalendar選択日を使用します。マルチTimelineの自動一斉再描画は行わず、該当日の別タイムバーは既存Consumerが `bone-calendar:tasks-change` を受けて同期します。 HTML属性のタスクグループデータ例: ```html
``` 注意: 対象のタスク区分 (`work` と `break` 等) が存在すること。初期デフォルトタスク区分を変更したとき `break` が存在しない場合、初期通常勤務テンプレートは自動追加されません。ユーザーが明示した `taskGroups` は必ず検証します。 Package 1.0.149 / Runtime 1.0.46: Installer gracefully skips unrecognized #000 dependency tree and cumulative DOM, keeps #000 unchanged when incompatible, preserves all existing group CRUD; selected group highlighted. USER localhost not yet reverified. ## #024 v1.0.162 — 1日の所定勤務時間 / #054編集反映 所定勤務時間はCalendar共通設定および週報上部から設定（既定8時間、1～24時間の15分刻み）。勤務種別の休暇・欠勤の日数相当＝登録時間÷所定勤務時間。例：有給6時間÷所定8時間＝0.75日。通常勤務の日数は勤務実績日で集計し、休暇を実勤務に加算しない。#054バーを移動・伸縮した場合は操作終了時に#024タスクの時刻を更新し、#048週報と集計へ反映。既存SQLite/IndexedDB Adapterが保存するCalendar設定とタスクへ反映される。 ### v1.0.162 勤務種別の休憩控除と日数換算 勤務種別合計では、有給・代休・振替休日・欠勤・特別休暇についても、各種別の登録時間帯に重なる休憩タスクを控除し、休憩控除後の時間を「1日の所定勤務時間」で割って日数相当に換算します。たとえば9:00～18:00の有給に12:00～13:00の休憩がある場合、登録9時間、休憩1時間、日数換算8時間、所定8時間のとき1.00日です。休憩が登録時間外なら控除しません。 表には「登録時間」「休憩時間」「日数換算時間」を併記します。休暇は実際の勤務時間に加算しません。 ## #024 Calendar v1.0.163: マスター／タイムバー／収支明細 - クライアント・チケットは、#024の共通設定 `clientMaster.clients` と `clientMaster.tickets` に保存します。新しい独立DBは作成せず、既存 `BoneCalendarDB` 経由でSQLiteへ保存／復元します。 - タスク管理画面の「クライアント・チケットの登録／編集／削除」からマスターを操作し、タスクでは登録済みクライアントID・チケットNoから選択します。旧データの未登録参照は、移行前に消失させずに表示します。 - 使用中のクライアント／チケットの削除はエラーとし、ID変更時には既存タスクの参照を一緒に更新します。 - タスクの `financeEntries[]` は `{ entryId,kind:'income'|'expense',amount,account,subAccount,memo }`。金額は円、小数2桁までです。収入・支出を混合した複数明細に対応します。ここでは実際の請求・決済・Redmine API通信は行いません。 - #054 表示範囲の開始・終了時刻は、正式週報の上部で変更できます。タスク個別の開始／終了時刻とは別設定で、既存 `display054Settings.startTime` / `endTime` に保存されます。 - `bf-calendar` 正式HTML Functional Classの既存APIを維持し、同一 #024 Runtime へマスターCRUDを追加しました。 - オフライン動作。CDN・外部連携・URL query/hash付きJS/CSS参照を追加しません。既存#048・#054・#125・#021 Runtimeは変更しません。 - Windows PowerShell 5.1 Installerはこの実行環境では動作未検証です。localhost QA未実施のためCompleted/Frozenではありません。