Loading ...
Sorry, an error occurred while loading the content.

Yahoo Calendar Helper and Example

Expand Messages
  • Fred Janon
    Hi, I wrote some Javascript to wrap the Yahoo Calendar and make it a bit easier to use in a JSP/GSP environment(at least for me). It also demonstrates how to
    Message 1 of 1 , Oct 27, 2006

      I wrote some Javascript to wrap the Yahoo Calendar and make it a bit
      easier to use in a JSP/GSP environment(at least for me). It also
      demonstrates how to get the calendar working.

      You can find the YahooCalendarHelper and the HTML example at:


      The documentation is at the beginning of the YahooCalendarHelper.js
      file. I'll also include a copy at the bottom of this email.

      The file structure is the one zipped, with the "image" folder
      containing the icons for the calendar. The helper fixes a calendar
      issue where the left and right icons are pulled off the internet

      To try it, open the "CalendarTest.html" file. Documentation is in the
      YahooCalendarHelper.js file.

      This is the first version, tested *briefly* on IE 6 and Firefox 1.5
      under Windoz. I did it for my own needs and WITHOUT ANY GUARANTEE. If
      someone can use it or learn from it, great! If you have any
      suggestions/issues, let me know but I won't be able to respond to all
      emails, sorry I need to work too!

      If my Yahoo download quota is exceeded, you will have to wait the next
      day after to retry.

      I hope this will be useful to some!

      Fred Janon

      // Helper for YahooUICalendar, copyright 2006, Fred Janon
      // Version 1.0.0 Oct 25, 2006
      The YahooCalendar Helper is designed to make it easier to use the
      YahooUI YAHOO.widget.Calendar.
      It wraps the YAHOO.widget.Calendar in a YahooUICalendar object. The
      YahooUICalendar will create the
      the HTML structure to host a small calendar icon (that the user clicks
      to make the calendar visible)
      and the calendar itself. It will also link the calendar to the date
      field and optionally
      to a hidden field for server submission. The default date in the date
      field will be automatically
      formatted in the locale of the client browser. No need to worry about
      that on the server side.
      For example, if the date field contains "2006/11/24", the field will
      be changed to
      Friday, 24 November 2006 if the locale is set to Australia

      To use it, you need to include the following in your HTML page:
      <script type="text/javascript"
      <script type="text/javascript"
      src="yui_0.11.4/build/event/event-min.js "></script>
      <script type="text/javascript"
      <script type="text/javascript"
      src="yui_0.11.4/build/calendar/calendar- min.js"></script>
      <link type="text/css" rel="stylesheet"
      href="yui_0.11.4/build/calendar/assets/calendar.css" />
      and create the YahooCalendar object like this for example AFTER your
      HTML and before the </body> tag:
      <script type="text/javascript">
      var endDateCalendar = new YahooUICalendar("endDate",
      The default font size in the Yahoo Calendar is pretty big in 0.11.4
      You can change it by adding this style in your header after the Yahoo
      calendar.css link
      .yui-calendar {
      font:70% sans-serif;
      You need to have a small icon where the user clicks to get the calendar
      to appear.
      The default icon pathname is "images/defaultcalendar.gif"

      You need also to download the YahooUI library and set the "src" path
      for the scripts above according
      to the version you got and where you unzipped it. I tested it with

      Last, put this file in the path you set in your HTML file:
      script type="text/javascript" src="js/YahooCalendarHelper.js"

      The Calendar is locale aware, so you should get the proper date
      formatting according to the client
      setting. The only fixed format is for the _fieldForSubmitId, it is
      always in "yyyy/mm/dd" format
      so it can be parsed and store easily on the server.

      Tested with IE6 and Firefox 1.5 on Windoz. Issues/suggestions: let me
      know at fjanon@...

      /* API:

      function YahooUICalendar(_dateFieldId, _calendarContainerId, _minDate,
      _fieldForSubmitId, _iconPath)

      _dateFieldId: String, required. The SPAN or INPUT READONLY element id
      used as the date field.
      Using a SPAN makes it a readonly field with any style.
      Using an INPUT READONLY field makes it easy to generate on a JSP.
      Note: if the INPUT is not READONLY and the user changes the value in
      the INPUT,
      the calendar selected date is not updated accordingly, nor would be
      the field with _fieldForSubmitId.
      If you want an INPUT TEXT element (modifiable) then do not use a

      _calendarContainerId: String, required. The empty SPAN or DIV id used
      to host the calendar and its icon

      _minDate: String, optional. If a valid date is supplied, the calendar
      will disable any date prior to it.
      If null, all dates are allowed. If "" (empty string), no date allowed
      before the client's today date.

      _fieldForSubmitId: String, optional. Used to store the selected date
      in a year/month/day format, whatever
      locale is used. The field would be a hidden field with an id
      "_fieldForSubmitId" attribute,
      a name attribute(to be submitted to the server).

      _iconPath: String, URI, optional. Path to the image to replace the
      deafult path for icons.
      The default icon pathname is "images/"


      var startDateCalendar = new YahooUICalendar("dateField",
      "calendarContainer","27 Oct 2006");
      => Create a YahooUICalendar in the HTML element with
      id="calendarContainer", the calendar gets/sets
      the date in the HTML element with the id="dateField". The first date
      allowed to be selected in
      the calendar is the "27 Oct 2006". For this to be useful, the HTML
      element would have to be an
      INPUT READONLY with a 'name' attribute like this:
      <input readonly id="dateField" name="endDate" type='text' value='25
      December, 2006' size='30'>

      var endDateCalendar = new YahooUICalendar("endDate",
    Your message has been successfully submitted and would be delivered to recipients shortly.