Исправлены заголовки с прокруткой с использованием нескольких Fullcalendars

Question

Я расширяю приложение для планирования, которое отображает несколько Fullcalendars в AgendaDayView, чтобы показать расписание дня для нескольких людей. При использовании каждого Fullcalendar его собственная полоса прокрутки была отклонена; соответственно, все календари отображаются в полном объеме, с одной полосой прокрутки, установленной в окружающем div.

Проблема заключается в том, чтобы заголовок сохранялся при вертикальной прокрутке. Существуют и другие требования к расширенным функциям заголовка (дополнительные данные, значки, ссылки и т. Д.), Поэтому мне было больше смысла создавать собственные заголовки над каждым полноразмерным div.

С помощью CSS и размещения divs я смог получить календари вертикально, прокручивая отдельно от заголовков, тем самым достигая эффекта «фиксированного заголовка». Проблема заключалась в том, что горизонтальная прокрутка: если я сделал divs, простирающиеся наружу по горизонтали, тогда вертикальная полоса прокрутки для div, содержащего календари, была полностью направо, вне видимости.

Я также попробовал плагины для фиксированных заголовков, установив с помощью a с произвольным текстом для заголовков, а затем поместив полные кадры в элементы внутри одной строки. Все они по-разному терпели неудачу (спрятали календари, перепечатывали заголовки, другие способы).

Вот базовая установка: http://jsfiddle.net/jzqJC/. Я ищу какое-то направление в том, как иметь основную область содержимого (1) как вертикальные, так и горизонтальные полосы прокрутки по мере необходимости, (2) фиксировать заголовки столбцов при вертикальной прокрутке и (3) синхронизировать горизонтальную прокрутку заголовков столбцов и календари под ними. Я потратил несколько дней на то, чтобы перерабатывать и пробовать вещи на основе stackoverflow и google-поиска, но я в недоумении и нуждаюсь в помощи. Пожалуйста, порекомендуйте.

[Боковой вопрос: как я могу ссылаться на fullcalendar.min.js в скрипке? Мне нужен общедоступный URL-адрес для файла и добавить его в качестве ресурса? Если да, то самый лучший способ, чтобы потушить этот файл в общественном URL]

Спасибо,
J

Answer 1

Я создал эту скрипку, посмотрите, если это то, что вы ищете: http://jsfiddle.net/7NgUB/

Я изменил .headerItem, .calendarItem отобразить строку inline и # headerRow, # calendarRow для абсолютного в CSS.

Тогда все сделано с JQuery:

Asign # headerRow, # calendarRow ширина общая ширина ее детей, Set #calendarRow верхнее положение, чтобы появиться ниже #headerRow, Изменить #headerRow верхнее положение каждый раз, когда # содержимое прокручивается