Bone Flow #024 — bf-calendar Direct HTML Sample

このSampleは サンプル用JavaScript変数や手動Runtime生成、後付けTask/Event/Annotation初期化を使いません。 下の bf-calendar の data-* だけで初期表示と外部データをmountします。

最小HTML Functional Class

<div class="bf-calendar"
     data-value="2026-08-13"
     data-theme="dark"
     data-icon-visual="emoji"
     data-selected-day-visible="true"
     data-selection-layout="accordion"></div>

data-* 外部データ直接登録

タスク区分 / タスク / イベント / Annotation / #054表示設定もHTML属性から直接初期登録します。登録後のCRUDと一括操作はCalendar自身の管理ボタンを使用します。

選択日表示形式

data-selection-layout="accordion" は既定のアコーディオン表示、data-selection-layout="below-calendar" はCalendar下に独立枠として選択日情報を表示します。Property設定およびCalendar共通設定の「選択日を表示」「選択日表示形式」から、同じRuntime Propertyへ再読込なしで切替できます。

タスクグループ（#024 Calendar）

Calendar下部の「タスクグループ」から通常勤務（月～金、勤務09:00～18:00・休憩12:00～13:00）を編集できます。グループチップを設置済みの正式#054 Display Timelineへドラッグすると、選択週の月～金へ既存#024タスクとして追加し、ドロップ先に当日分をタイムバー表示します。独自Timelineは作成しません。

data-task-groups 属性、BoneCalendarFunctionalClass.setTaskGroups / applyTaskGroup も使用できます。

HTML Functional Class CRUD API

初期値は data-task-types / data-tasks / data-events で登録し、mount後は BoneCalendarFunctionalClass から追加・編集・削除できます。更新結果は対応する data-* 属性へ同期されます。

const host = document.querySelector('.bf-calendar');

BoneCalendarFunctionalClass.addTaskType(host, { id:'visit', label:'来客', kind:'info', icon:'👤' });
BoneCalendarFunctionalClass.updateTaskType(host, 'visit', { label:'来客対応' });
BoneCalendarFunctionalClass.removeTaskType(host, 'visit');

BoneCalendarFunctionalClass.addTask(host, { taskId:'t3', date:'2026-08-10', start:'13:00', end:'14:00', typeId:'work', label:'確認' });
BoneCalendarFunctionalClass.updateTask(host, 't3', { label:'確認・更新' });
BoneCalendarFunctionalClass.removeTask(host, 't3');

BoneCalendarFunctionalClass.addEvent(host, { eventId:'e3', date:'2026-08-20', kind:'anniversary', emoji:'⭐', label:'記念日' });
BoneCalendarFunctionalClass.updateEvent(host, 'e3', { label:'記念日・更新' });
BoneCalendarFunctionalClass.removeEvent(host, 'e3');