修复了使用多个Fullcalendars滚动的标题

时间:2012-06-19 17:01:41

标签: html css scroll fullcalendar

我正在扩展一个在agendaDayView中显示多个Fullcalendars的计划应用程序,以显示多人的日程安排。让每个Fullcalendar使用自己的滚动条已被拒绝;因此,所有日历都显示为全长,在周围的div中设置了一个滚动条。

现在的问题是在垂直滚动期间让标题保持固定。扩展标头功能还有其他要求(附加数据,图标,链接等),因此在每个Fullcalendar div上方创建自己的标题对我来说更有意义。

使用CSS并正确放置div,我能够让日历与标题分开垂直滚动,从而实现“固定标题”效果。问题是水平滚动:如果我使div水平向外延伸,那么包含日历的div的垂直滚动条一直向右,在可见性之外。

我还尝试使用带有任意文本的标题,然后将Fullcalendar div放在单行内的元素中来修复固定标题的插件。这些都以不同的方式失败(隐藏日历,重新标记标题,其他方式)。

以下是基本设置:http://jsfiddle.net/jzqJC/。我正在寻找一些方向,如何让主要内容区域有(1)必要的垂直和水平滚动条,(2)垂直滚动时保持列标题固定,(3)同步列标题的水平滚动和他们下面的日历。我花了好几天修补和尝试基于stackoverflow和谷歌搜索的东西,但我不知所措,需要帮助。请指教。

[旁边的问题:如何在小提琴中链接到fullcalendar.min.js?我是否需要该文件的公共URL并将其添加为资源?如果是这样,将该文件放在公共URL中的最佳方法是什么?]

谢谢,
Ĵ

1 个答案:

答案 0 :(得分:1)

我创建了这个小提琴,看看它是否是你想要的:http://jsfiddle.net/7NgUB/

我将.headerItem,.calendarItem显示更改为内联和#headerRow,#calendarRow在CSS中的位置为绝对。

然后一切都用jquery完成:

Asign#headerRow,#calendarRow width子元素的总宽度, 将#calendarRow顶部位置设置为显示在#headerRow下方, 每次滚动#content时更改#headerRow顶部位置