горизонтально прокручиваемый календарь

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) прокрутка является отвратительной. он время от времени перескакивает WAY, и я не смог получить более плавную анимацию. Если вы входите в область прокрутки слева, для нее требуется ОГРОМНЫЙ прыжок, потому что он использует сдвиг окна как определение того, как далеко он должен прокручиваться. Я думаю, что было бы намного лучше, если бы он только анимировался, когда пользователь прокручивал влево/вправо, но я не смог это получить. Я попытался ограничить дистанцию ​​прокрутки, но потом я не получаю весь календарь.

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

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

Answer 1

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

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

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

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

Надеется, что это помогает, Адаму