horizontally scrolling calendar

I've used the following script http://valums.com/scroll-menu-jquery/ to build a horizontally scrolling calender.

Here is how I've implemented it.

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

90% of the calendar activity I am expecting is within a month or two of the current date. However, I think I need to provide the ability to select any month. I was going to use the jQuery datepicker, but thought that this format allowed the user to always see the currently selected date, and allow me to mark out weeks or days that need attention in a interesting yet fairly simple interface, which (when styled) should take up considerably less height than a proper calendar.

I'm sure I've seen calendars like this before, but I couldn't find a script for making one.

I have two issues with this calender. 1) The year scrolls off the page, so you can't see what year you are looking at. I've added this line

 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);
        

but it doesn't seem to be having the desired effect of having the year stay visible and somewhat line up within the scrolling of the dates.

2) the scrolling is kinda nasty. it jumps WAY to far at times, and I haven't been able to get a smoother animation. If you enter the scrolling area at the left, it takes a HUGE jump, because it is using the window offset as the definition of how far it should scroll. I think it would be much better if it only animated when the user scrolled left/right, but I haven't been able to get that. I've tried limitin开发者_C百科g the distance that the scroll travels, but then i don't get the entire calendar.

Really what I'm looking for is what is the best way to enable scrolling on something like this.

I should say that the use of the calendar is really for selecting weeks, not individual days, which makes this format easier again, because I can visually alternate weeks to create visible groupings.

I will try to give you some ideas without real code, since I logged only for second :)

1., you could store your data range in one or two variables, e.g. var startYear = 2009;, then hide years you drew with all those date (i hope you understand :D) add one absolute div to show current year, which you'll recalculate on each mousemove.

If you know, that there are three years on timeline and you know that offsetLeft (example) is in range (0; 1/3 of timeline div width), than you know, that year that user is looking upon is the lowest and can draw it with something like $('year-in-view').html('<b>'+startYear+'</b>');

2., you could store previous position (yet again :) ) in some variable and check if the X-axis difference is bigger than 100px (or 200px... your choice) and if yes (abs(current.x-last.x) > 100), animate the div differently, so user will understand that he moved through two years.

Hope it helps, Adam