svelte-gantt时间范围与节假日高亮让午休、周末与关键时段一目了然【免费下载链接】svelte-gantt:calendar: Interactive JavaScript Gantt chart/resource booking component项目地址: https://gitcode.com/gh_mirrors/sv/svelte-gantt svelte-gantt 是一款交互式的 JavaScript 甘特图 / 资源排班组件它的内置Time Range时间范围功能可以用一行配置高亮图表中的任意时段——午休、周末、法定节假日、关键维护窗口全部一目了然。无需复杂定制传入一个数组即可获得跨所有行的整块高亮、自定义配色以及拖拽调整边界能力。什么是时间范围一行配置整行高亮在甘特图中任务Task是画在某一行里的而时间范围Time Range则是贯穿所有行的整列时间块。这正是它的价值所在 午休时段一行配置所有资源行同时标出 周末与节假日跨天时段轻松覆盖⚠️ 关键窗口系统维护期、封版期、禁排期等禁飞区核心逻辑定义在packages/svelte-gantt/src/core/timeRange.ts渲染样式在packages/svelte-gantt/src/entities/TimeRange.svelte。默认样式是醒目的红色斜纹 顶部白底标签即使不做任何定制也足够醒目。快速上手3 步高亮午休与周末只需在组件选项中传入timeRanges数组每个对象包含id、from、to时间戳和可选的labelconst options { from: new Date(2024-02-01T08:00), to: new Date(2024-02-01T18:00), rows: [{ id: 1 }, { id: 2 }, { id: 3 }], timeRanges: [ { id: 1, from: new Date(2024-02-01T10:00).valueOf(), to: new Date(2024-02-01T11:00).valueOf(), label: Lunch }, { id: 2, from: new Date(2024-02-03T00:00).valueOf(), to: new Date(2024-02-04T00:00).valueOf(), label: Weekend } ] };就这么简单两条时间范围午休和周末即刻高亮。官方文档示例见packages/docs-mdsvex/src/routes/docs/data/time-ranges/page.svx其中展示了早餐、午餐、自定义样式三类时段并存的效果。字段说明时间范围配置速查表| 字段 | 类型 | 说明 | | - | - | - | |id|number|string| 时间范围唯一标识 | |from/to|number| 起止时间时间戳 | |label|string| 显示在顶部的文字标签 | |classes|string|Array| 自定义 CSS 类名 | |resizable|boolean| 是否允许拖拽调整边界默认 true |换一种高亮颜色自定义 classes 一步到位默认红色斜纹适合警示类时段而午休、周末更适合柔和的配色。通过classes传入自定义类名再写几行 CSS 即可完全接管外观{ id: 1, from: ..., to: ..., label: Lunch, classes: time-range-lunch, resizable: false // 午休不允许拖动 }.time-range-lunch { background-image: linear-gradient( -45deg, transparent 46%, #4f46e5 49%, #4f46e5 51%, transparent 55% ); }想要更炫的效果也完全可行——文档示例中还展示了渐变背景 圆角 悬停阴影的组合写法见packages/docs-mdsvex/src/routes/docs/data/time-ranges/TimeRangesExample.svelte让关键时段在视觉上更跳脱。拖拽调整 事件监听让高亮活起来时间范围默认支持交互拖拽逻辑在packages/svelte-gantt/src/entities/TimeRangeHeader.svelte✋ 拖动左右两端的把手可实时调整时段的起止时间松手后from/to自动更新为对齐网格的新值所有操作都可以通过事件 API 实时感知gantt.api.timeranges.on.changed(({ model }) { console.log(时段已调整, model.from, →, model.to); });另外还可用on.clicked监听点击、on.resized监听调整过程方便把用户手动改过午休时间这类操作同步到后端或触发排班校验。常见场景速查高亮什么最合适| 场景 | 建议做法 | | - | - | | 午休 / 早会 | 单时段 resizable: false防止误拖 | | 周末 |from/to跨两天label写周末 | | 法定节假日 | 批量生成时间范围统一classes配色 | | ⚠️ 系统维护窗口 | 保留默认红色斜纹视觉上天然警示 | | ⭐ 关键评审 / 封版期 | 自定义渐变色 圆角突出显示 |写在最后svelte-gantt 的时间范围功能把高亮任意时段这件事压缩到了最小成本一个数组、几行 CSS即可让午休、周末与关键时段在排班图上清晰可见再配合拖拽交互与事件回调静态高亮瞬间变成可协作的时间管理工具。无论是资源排班、生产排期还是会议预约都值得一试 ✨【免费下载链接】svelte-gantt:calendar: Interactive JavaScript Gantt chart/resource booking component项目地址: https://gitcode.com/gh_mirrors/sv/svelte-gantt创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考