CODEWITHSUNDEEP
htmlcssscrollfullcalendar
Jammerms
Jammerms

Reputation: 1511

Fixed headers with scrolling using multiple Fullcalendars

I am extending a scheduling app that displays multiple Fullcalendars in agendaDayView to show the day's schedule for multiple people. Having each Fullcalendar use its own scrollbar has been rejected; accordingly, all the calendars are displayed full-length, with a single scrollbar set in the surrounding div.

The problem now is to have the headers stay fixed during vertical scrolling. There are other requirements for extended header functionality (additional data, icons, links, etc.), so it made more sense to me to make my own headers above each Fullcalendar div.

Using CSS and placing the divs correctly, I was able to get the calendars to vertically scroll separately from the headers, thus achieving a 'fixed header' effect. The problem was then horizontal scrolling: if I made the divs extend outward horizontally, then the vertical scrollbar for the div containing the calendars was all the way to the right, outside of visibility.

I have also tried plugins for fixed headers by setting using a with arbitrary text for the headers and then putting the Fullcalendar divs inside elements in a single row. These all failed in different ways (hiding the calendars, reprinting the headers, other ways).

Here is the base setup: http://jsfiddle.net/jzqJC/. I am looking for some direction in how to have the main content area have (1) both vertical and horizontal scrollbars as necessary, (2) keep the column headers fixed when vertical scrolling, and (3) synchronize the horizontal scrolling of the column headers and calendars underneath them. I have spent several days tinkering and trying things based on stackoverflow and google searches, but I am at a loss and need help. Please advise.

[Side question: how can I link to fullcalendar.min.js in a fiddle? Do I need a public URL for the file and add it as a resource? If so, what's the best way to put out that file in a public URL?]

Thanks,
J

Upvotes: 2

Views: 3800

Answers (1)

Alvaro
Alvaro

Reputation: 9662

I created this Fiddle, take a look if it is what you are looking for: http://jsfiddle.net/7NgUB/

I changed .headerItem,.calendarItem display to inline and #headerRow,#calendarRow position to absolute in the CSS.

Then everything is done with jquery:

Asign #headerRow,#calendarRow width the total width of its children, Set #calendarRow top position to appear below #headerRow, Change #headerRow top position each time #content is scrolled

Upvotes: 1

Related Questions