英文:
Full Calendar customizable header
问题
columnHeaderFormat属性已在以下代码中使用，如下所示：
columnHeaderFormat: {
weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true
}
它显示如下：
现在，我希望在当前月份下方的日期旁边实现标题定制，例如，周1，周2等，如下所示：
我还希望保留左侧的资源，如下图所示，并且不应删除。
英文:
I have used the following attribute in the code as shown below :-
columnHeaderFormat: {
weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true
}
It shows somewhat like this
Now as i want to achieve header customization with Week 1, Week 2 and so on for the current month below it days like Mon to Sun here is a example below
As i want to retain my resources on left as shown also which should not be removed as well.
答案1
得分: 2
可以相对容易地实现这一点。
但是重要的是要意识到，在时间线视图中，columnHeaderFormat 对于横向标题栏没有用处，因为横向标题栏上的内容不是表示列（通常在 TimeGrid 视图中表示天数），而实际上是时间槽（通常在 TimeGrid 视图中垂直显示在左侧）。
因此，您需要使用 slotLabelFormat 设置来调整外观。要获得标题中的两个水平栏（与您的示例截图一样），您可以在格式选项中设置两个单独的设置：
slotLabelFormat: [
{ week: "short" }, // 文本的顶层
{ weekday: "short" } // 文本的底层
],
工作演示：https://codepen.io/ADyson82/pen/ZEYaXmJ?&editable=true&editors=001
相关文档：
英文:
You can achieve this fairly straightforwardly.
However it's important to realise that columnHeaderFormat is no use in a Timeline view, because what goes along the horizontal header bars are not columns (representing days, as they would in a TimeGrid view), but actually the timeslots (which are normally along the left-hand side vertically in a TimeGrid view).
Therefore you need to use the slotLabelFormat setting to adjust the appearance. To get two horizontal bars in the heading (as per your example screenshots), you can set two separate settings in the format option:
slotLabelFormat: [
{ week: "short" }, // top level of text
{ weekday: "short" } // lower level of text
],
Working demo: https://codepen.io/ADyson82/pen/ZEYaXmJ?&editable=true&editors=001
Relevant documentation:
答案2
得分: 1
resourceTimeline 没有 columnHeaderFormat 选项。相反，它有 slotLabelFormat，这是一个包含两个日期格式化程序的数组。一个用于顶部标签，另一个用于底部标签。
在选项中添加以下内容。我将周的格式设置为 "short"。我还创建了一个 演示。
views: {
resourceTimelineWeek: {
type: "resourceTimelineWeek",
slotDuration: { days: 1 },
slotLabelInterval: { days: 1 },
slotLabelFormat: [
{ week: 'short', omitCommas: true }, // 文本的顶级
{ day: 'numeric' } // 文本的较低级别
]
}
}
英文:
It turns out, resourceTimeline doesn't have the columnHeaderFormat option. Instead, it has slotLabelFormat, which is an array of two Date Formatters. One for the top label, another for the bottom label.
Add the following to the options. I made the week format "short". I also made a fiddle.
views: {
resourceTimelineWeek: {
type: "resourceTimelineWeek",
slotDuration: {days: 1},
slotLabelInterval: {days: 1},
slotLabelFormat: [
{week: 'short', omitCommas: true}, // top level of text
{day: 'numeric'} // lower level of text
]
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论