IntervalCalendar for Date-Range Selection

August 22, 2008 at 7:52 am by Satyen Desai | In Development | 7 Comments

New YUI interval-calendar example contributed by John Peloquin.

John Peloquin, a developer for W. Hardy Interactive, Inc., graciously contributed a new YUI Calendar implementation called IntervalCalendar that we’ve incorporated into the basic YUI Calendar example set.

The IntervalCalendar class, defined in this example, allows users to select pairs of dates representing the start and end of a date interval. Applications which require interval selection, for example a hotel check-in/check-out date selector, frequently display separate calendar instances to select the beginning and ending dates of the interval. The IntervalCalendar provides an alternate solution, by allowing the selection of both dates within the same calendar instance. It’s most suitable for applications in which the beginning and ending dates fall within the span of a few days, so that the entire range falls within the calendar’s visible set of months.

Many thanks to John and Walter Hardy for the terrific example and for contributing to YUI.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

7 Comments »

RSS feed for comments on this post. TrackBack URI

  1. very useful. be sure to also check out the similar, very polished calendar by Stephen Celis, Timeframe. Celis’ calendar has a particularly pleasant click-and-drag functionality.

    http://stephencelis.com/projects/timeframe

    Comment by Phillip — August 22, 2008 #

  2. Very nice work. One feature I’d like to see added to the YUI calendar set of controls is the ability to roll by year in addition to month or have I somehow missed it?

    Comment by Dustin — August 23, 2008 #

  3. very useful thanks!

    Comment by Robert — August 25, 2008 #

  4. @Dustin — Check out the CalendarNavigator class — http://developer.yahoo.com/yui/examples/calendar/calnavigator.html — click on any month/year heading in that example to call up the navigator. Regards, Eric

    Comment by Eric Miraglia — August 25, 2008 #

  5. woowww _o/
    This new feature is very useful!

    Thanks YUI team…

    (=D)

    Comment by Fred — August 25, 2008 #

  6. [...] IntervalCalendar for Date-Range Selection ยป Yahoo! User Interface Blog (tags: yui calendar) [...]

    Pingback by Chad’s dailies » Blog Archive » links for 2008-08-31 — August 30, 2008 #

  7. How about using Laakso’s Calendar Strip UI design pattern here? That is, having one continuous calendar instead of two separate month views. It would allow a natural interaction where you can immediately see the length of the interval.

    However, for intervals spanning several months it might be a bit cumbersome or at least take a lot of horizontal space.

    http://www.cs.helsinki.fi/u/salaakso/patterns/Calendar-Strip.html

    (disclaimer: I haven’t tried the code, it is possible that it also implements this kind of continuous view but it was not shown in the screenshot above)

    Comment by Osma — September 17, 2008 #

Leave a comment

Note: Comments are moderated for first-timers. Spam deleted.

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Hosted by Yahoo!

Copyright © 2006-2010 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service

Powered by WordPress on Yahoo! Web Hosting.