protocalendar.js Version 

Simple Calendar

    <input id="simple_calendar" name="simple_calendar" type="text" /><br/>
    <script type="text/javascript">
      new InputCalendar('simple_calendar');
    </script>

Simple Calendar with Label

    <input id="simple_calendar_with_label" name="simple_calendar_with_label" type="text" /><br/>
    <script type="text/javascript">
      new InputCalendar('simple_calendar_with_label', {labelFormat: 'ddddi dd mmmm yyyy'});
    </script>

Calendar(Date format)

    <input id="dateformat_calendar" name="dateformat_calendar" type="text" />
    <div id="dateformat_calendar_label"></div>
    <script type="text/javascript">
      new InputCalendar('dateformat_calendar', {format: 'yyyy-mm-dd', labelEl: 'dateformat_calendar_label', labelFormat: 'dddi dd mmm yyyy', yearSpan: 5, weekFirstDay:ProtoCalendar.SUNDAY});
    </script>

Calendar Start with Monday

    <input id="weekday_calendar" name="" size="30" type="text" />
    <script type="text/javascript">
      new InputCalendar('weekday_calendar', {weekFirstDay:ProtoCalendar.MONDAY});
    </script>

Japanese Calendar(+ Japanese holidays)

    <input id="japan_calendar" name="japan_calendar" size="30" type="text" />
    <script type="text/javascript">
      new InputCalendar('japan_calendar', {lang:'ja'});
    </script>

English Calendar

    <input id="english_calendar" name="english_calendar" size="30" type="text" />
    <script type="text/javascript">
      new InputCalendar('english_calendar', {lang:'en'});
    </script>

Chinese Calendar

    <input id="chinese_calendar" name="chinese_calendar" size="30" type="text" />
    <script type="text/javascript">
      new InputCalendar('chinese_calendar', {lang:'zh-cn'});
    </script>

Read only Calendar(+ Icon)

    <input id="icon_calendar" name="icon_calendar" size="30" type="text" />
    <img src="../images/icon_calendar.gif" id="calendar_icon"/>
    <script type="text/javascript">
      var cal = new InputCalendar('icon_calendar', {inputReadOnly: true, lang:'zh-cn'});
      cal.addTrigger('calendar_icon');
    </script>

Calendar Style + IE bug fix

    <input id="style_calendar" name="style_calendar" size="30" type="text" />
    <script type="text/javascript">
      new InputCalendar('style_calendar', {inputReadOnly: true, lang:'ja'});
    </script>

Setup Calendar

    <input class="calendar" name="calendar1" size="30" type="text" /><br/>
    <input class="calendar" name="calendar2" size="30" type="text" /><br/>
    <input class="calendar" name="calendar3" size="30" type="text" /><br/>
    <input class="calendar" name="calendar4" size="30" type="text" /><br/>
    <input class="calendar" name="calendar5" size="30" type="text" /><br/>
    <script type="text/javascript">
      Event.observe(window, 'load', function(event) {
        $$('input.calendar').each(function(element) {
          new InputCalendar(element);
        });
      });
    </script>