グローバル CSS クラス

DayFlow は、カレンダーコンポーネントの外観をカスタマイズできる df- プレフィックス付きの CSS クラスセットを提供しています。これらのクラスは、コアライブラリを変更せずに簡単にスタイルをカスタマイズできるように設計されています。

適切な CSS エントリの選び方

Tailwind CSS をすでに使っているかどうかで、読み込むスタイルシートを選んでください。

@import '@dayflow/core/dist/styles.components.css';
@import 'tailwindcss';

テーマ上書きでは、--df-color-* 変数または以下に記載した安定した df-* セマンティッククラスを優先してください。

目次

• 共通クラス
• セマンティック補助クラス
• レイアウトとモーションの補助クラス
• 日ビュークラス
• 週ビュークラス
• 月ビュークラス
• 年ビュークラス
• ミニカレンダークラス
• サイドバークラス
• ナビゲーションクラス
• イベント詳細クラス
• コンテンツスロットクラス
• イベント状態属性

共通

すべてのカレンダービューで使用される共通 CSS クラス。

セマンティック補助クラス

今回のスタイル再構成により、DayFlow はボタン状態や選択状態、破壊的アクション、フォーカスリングなどを表す安定した df-* セマンティッククラスを公開しています。これらは共有基盤 CSS で定義されており、カスタム slot やプラグイン UI から安全に再利用できます。

テーマ調整では、これらの df-* クラスまたは --df-color-* 変数を優先してください。bg-primary、text-primary、hover:bg-primary/90 のような旧来の内部 Tailwind セマンティック名に依存しないでください。

レイアウトとモーションの補助クラス

これらのクラスは、カスタム slot コンテンツやプラグイン UI で DayFlow のレイアウトや入場アニメーションを再利用したいときに便利です。

日ビュー

日ビュー専用の CSS クラス。

週ビュー

週ビュー専用の CSS クラス。

月ビュー

月ビュー専用の CSS クラス。

年ビュー

年ビュー専用の CSS クラス。これらは年間概要でのイベント外観のカスタマイズに特に便利です。

ミニカレンダー

ミニカレンダーコンポーネント（通常サイドバー或者日ビューに配置）用の CSS クラス。

サイドバー

サイドバーコンポーネント用の CSS クラス。

ナビゲーション

ナビゲーションボタン用の CSS クラス。

イベント詳細

イベント詳細パネルとダイアログ用の CSS クラス。

コンテンツスロット

コンテンツスロットレンダリングシステムに使用される CSS クラス。

イベント状態属性

DayFlow はイベント状態だけでなく、グリッド、オーバーレイ、ドロワー、内部レイアウト補助にも data-* 属性を使っています。以下は現在のプロジェクトで使われている属性の一覧です。多くは CSS から直接ターゲットでき、一部はオーバーレイ制御や click-outside 判定用の構造フックです。

イベント要素

日付・グリッド・レイアウト状態

コントロール・入力・検索

Sidebar プラグイン状態

オーバーレイとインタラクションフック

例

/* 選択中のイベント */
.df-event[data-selected='true'] {
  outline: 2px solid var(--df-color-primary);
}

/* ドラッグ中のイベント */
.df-event[data-dragging='true'] {
  opacity: 0.6;
}

/* 月ビューのイベントのみ */
.df-event[data-view='month'] {
  font-size: 11px;
}

/* 終日イベントのみ */
.df-event[data-all-day='true'] {
  font-weight: 600;
}

/* 今日の Agenda セクションやコンパクトグリッドセルを強調 */
[data-today='true'] {
  background-color: color-mix(in srgb, var(--df-color-primary) 8%, transparent);
}

カスタマイズ方法

外観をカスタマイズするには、これらのクラスや --df-color-* 変数をグローバル CSS から上書きします。ほとんどのテーマ調整では !important は不要で、高い詳細度の局所ルールを意図的に上書きしたい場合だけ使ってください。

例

/* すべてのイベントの角丸を変更 */
.df-event {
  border-radius: 8px !important;
}

/* 現在時刻インジケーターをカスタマイズ */
.df-current-time-line {
  z-index: 100;
}
.df-current-time-bar {
  height: 3px !important;
  background-color: #ef4444 !important;
}

/* 特定のビューをカスタマイズ */
.df-day-view .df-event {
  border-left: 4px solid #3b82f6;
}

/* サイドバーのスタイル設定 */
.df-sidebar {
  background-color: #f8fafc !important;
}

/* ミニカレンダーのスタイル設定 */
.df-mini-calendar-day:hover {
  background-color: #e2e8f0;
}

/* カスタム slot / プラグイン UI で DayFlow のセマンティック色を再利用 */
.my-custom-primary-chip {
  background-color: var(--df-color-primary);
  color: var(--df-color-primary-foreground);
}

/* ダークモードの上書き */
.dark .df-calendar {
  background-color: #111827;
}

/* イベント詳細パネルのスタイル設定 */
.df-event-detail-panel {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

使用のヒント

1. 詳細度: スタイルが適用されない場合は、カレンダーをカスタムクラスでラップして詳細度を上げてください：

   .my-custom-calendar .df-event { ... }

2. レスポンシブデザイン: メディアクエリを使用して、モバイルデバイス向けにスタイルを調整します：

   @media (max-width: 768px) {
     .df-event-title {
       font-size: 10px;
     }
     .df-time-label {
       font-size: 10px;
     }
   }

3. ダークモード: .dark セレクターを使用してダークモード専用のスタイルを設定します：

   .dark .df-month-day-cell {
     border-color: #374151;
   }

4. CSS 変数: DayFlow は --df-color-* カスタムプロパティで色を管理しています。.df-calendar-container（フローティング UI には .df-portal も）で上書きすると、スコープを絞った色変更ができます：

   .df-calendar-container,
   .df-portal {
     --df-color-primary: #3b82f6;
     --df-color-primary-foreground: #ffffff;
   }

旧バージョンからのアップグレード

関連ドキュメント

• テーマカスタマイズ - 高度なテーマオプション
• ダークモード - ダークモード設定