Calendar Control - Multi-Select 2-up Implementation : Calendar « GUI Components « JavaScript DHTML

Calendar Control - Multi-Select 2-up Implementation



  <title>Yahoo! Calendar Control - Multi-Select 2-up Implementation</title>

  <link rel="stylesheet" href="./examples/calendar/css/examples.css" type="text/css">
  <script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
  <script type="text/javascript" src="./build/event/event.js" ></script>
  <script type="text/javascript" src="./build/dom/dom.js" ></script>
  <link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css">
  <link type="text/css" rel="stylesheet" href="./build/reset/reset.css">  

  <link rel="stylesheet" type="text/css" href="./docs/assets/dpSyntaxHighlighter.css" />

  <script type="text/javascript" src="./build/calendar/calendar.js"></script>
  <link type="text/css" rel="stylesheet" href="./build/calendar/assets/calendar.css">  

  <script language="javascript">

    function init() {
      YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar2up("YAHOO.example.calendar.cal1","cal1Container");

      var customConfig = function() {
        this.Options.MULTI_SELECT = true;
      YAHOO.example.calendar.cal1.setChildFunction("customConfig", customConfig);


    YAHOO.util.Event.addListener(window, "load", init);



  <img id="logo" src="../img/logo.gif"/>
  <div id="pageTitle">
    <h3>Calendar Control</h3>

  <div class="column left">
    <h4>Multi-Select 2-up Implementation</h4>

    <p>To allow for multiple selections on a 2-up Calendar, use the following code:</p>
    <textarea name="code" class="JScript" cols="60" rows="1">
    var cal1;
    function init() {
      cal1 = new YAHOO.widget.Calendar2up("cal1","cal1Container");

      var customConfig = function() {
        this.Options.MULTI_SELECT = true;
      cal1.setChildFunction("customConfig", customConfig);


    <textarea name="code" class="HTML" cols="60" rows="1"><div id="cal1Container"></div></textarea>

  <div id="cal1Container" style="position:absolute;left:50px;top:400px"></div>


<script src="./docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 

  3,714 k)

Related examples in the same category

1.HTML Calendar based on DynAPI
2.JavaScript Date Picker based on ComboBox
3.Calendar Control - Single-Select Implementation
4.Calendar Control - 2-Up Implementation
5.Calendar Control - Handling onSelect / onDeselect
6.Calendar Control - Mix/Max Implementation
7.Calendar Control - Multi-Select Implementation
8.Calendar Control - Custom Renderer Example (Holiday Renderer Implementation)
9.Calendar Control - Date Restriction Example (Date Restriction Implementation)
10.Calendar Control - Row Highlight Example (Row Highlight Implementation)
11.Popup calendar
12.Month Calendar
13.Popup Calendar for a textfield
14.Multiselection Calendar
15.Free Date Picker : An easy plugin to add a date picker (calendar) in your web site
16.HTML Date Picker
17.Date Picker in new window
18.All browser Calendar
19.DHTML Calendar for the impatient
20.Calendar: special day
21.Calendar: day info
22.Calendar: Multiple day selection
23.Calendar with different theme
24.Calendar with image for each month
25.Fancy Calendar
26.Another Calendar
27.Date Time Picker
28.Month Calendar (2)
29.Building a Calculator
30.A Dynamic Calendar Table
31.Dynamic HTML Calendar
32. A Static Calendar by JavaScript
33.Displaying the Calendar
34.Calendar (IE only)
35.Calendar in slide tab
36.Another DHTML Calendar
37.Event Calendar
38.Open calendar
39.swazz calendar 1.0
40.jquery calendar