全局 CSS 类

DayFlow 提供了一组带有 df- 前缀的 CSS 类，允许您自定义日历组件的外观。这些类旨在方便地进行样式定制，无需修改核心库。

选择正确的 CSS 入口

请根据项目是否已经使用 Tailwind CSS 来选择样式入口：

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

做主题覆盖时，推荐优先使用 --df-color-* 变量或下面列出的稳定 df-* 语义类。

目录

• 通用类
• 语义辅助类
• 布局与动效辅助类
• 日视图类
• 周视图类
• 月视图类
• 年视图类
• 迷你日历类
• 侧边栏类
• 导航类
• 事件详情类
• 内容插槽类
• 事件状态属性

通用

所有日历视图中使用的通用 CSS 类。

语义辅助类

这次样式重构后，DayFlow 对外公开了一组稳定的 df-* 语义类，用来表达按钮填充态、选中态、危险操作态、焦点环等主题语义。它们定义在共享基础样式中，适合在自定义 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 section 或紧凑网格单元格 */
[data-today='true'] {
  background-color: color-mix(in srgb, var(--df-color-primary) 8%, transparent);
}

如何自定义

要自定义外观，建议优先覆盖这些类或 --df-color-* 变量。大多数主题层面的调整不需要 !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（和 .df-portal 用于浮层）上覆盖它们，可以实现作用域隔离的颜色修改：

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

从旧版本升级

相关文档

• 主题自定义 - 高级主题选项
• 深色模式 - 深色模式配置