календарь с горизонтальной прокруткой

Question

Я использовал следующий скрипт http://valums.com/scroll-menu-jquery/ построить горизонтально прокручивающийся календарь.

Вот как я это реализовал.

http://zifimusic.com/testing/horizontalCalendar.html

90% ожидаемой активности в календаре в течение месяца или двух от текущей даты. Тем не менее, я думаю, что мне нужно предоставить возможность выбрать любой месяц. Я собирался использовать jQuery datepicker, но подумал, что этот формат позволяет пользователю всегда видеть текущую выбранную дату и позволяет мне отмечать недели или дни, которые требуют внимания, в интересном, но довольно простом интерфейсе, который (когда стилизован) должен занимать значительно меньшую высоту, чем правильный календарь.

Я уверен, что раньше видел такие календари, но не смог найти сценарий для их создания.

У меня есть две проблемы с этим каландром. 1) Год прокручивается со страницы, поэтому вы не можете видеть, на какой год вы смотрите. Я добавил эту строку

 var windowWidth=jQuery(window).width();
  div.mousemove(function(e){

    jQuery('li.year').each(function(){

    if(jQuery(this).offset().left>0 && jQuery(this).offset().left<windowWidth){
               jQuery('h1',this).scrollLeft(offset().left-windowWidth);
        

но, похоже, не дает желаемого эффекта, чтобы год оставался видимым и несколько выстраивался в пределах прокрутки дат.

2) прокрутка довольно неприятная. время от времени он прыгает далеко, и я не смог получить более плавную анимацию. Если вы войдете в область прокрутки слева, потребуется ОГРОМНЫЙ прыжок, потому что он использует смещение окна в качестве определения того, как далеко он должен прокручиваться. Я думаю, что было бы намного лучше, если бы он анимировался только тогда, когда пользователь прокручивал влево / вправо, но я не смог этого понять. Я пытался ограничить расстояние, которое проходит свиток, но тогда я не получаю весь календарь.

Действительно, что я ищу, так это лучший способ включить прокрутку на что-то подобное.

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

Answer 1

Я постараюсь дать вам некоторые идеи без реального кода, так как я вошел только на секунду:)

1., Вы можете хранить свой диапазон данных в одной или двух переменных, например, var startYear = 2009;, затем скройте годы, которые вы нарисовали, со всеми этими датами (надеюсь, вы понимаете: D) добавьте один абсолютный div, чтобы показать текущий год, который вы будете пересчитывать при каждом перемещении мыши.

Если вы знаете, что на временной шкале есть три года, и вы знаете, что offsetLeft (пример) находится в диапазоне (0; 1/3 ширины деления временной шкалы), то вы знаете, что год, на который смотрит пользователь, самый низкий и может нарисовать что-то вроде $('year-in-view').html('<b>'+startYear+'</b>');

2., Вы можете сохранить предыдущую позицию (еще раз :)) в некоторой переменной и проверить, больше ли разница по оси X, чем 100px (или 200px ... ваш выбор), и если да (abs(current.x-last.x) > 100), анимируйте div по-другому, поэтому пользователь поймет, что он прошел через два года.

Надеюсь, это поможет, Адам