Calendar Control - 2-Up Implementation : Calendar « GUI Components « JavaScript DHTML






Calendar Control - 2-Up Implementation

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

  <title>Yahoo! Calendar Control - 2-Up Implementation</title>
  
  <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">
    YAHOO.namespace("example.calendar");

    function init() {
      this.today = new Date();

      var thisMonth = this.today.getMonth();
      var thisDay = this.today.getDate();
      var thisYear = this.today.getFullYear();

      this.link1 = document.getElementById('dateLink1');
      this.link2 = document.getElementById('dateLink2');

      this.selMonth1 = document.getElementById('selMonth1');
      this.selDay1 = document.getElementById('selDay1');

      this.selMonth1.selectedIndex = thisMonth;
      this.selDay1.selectedIndex = thisDay-1;

      this.selMonth2 = document.getElementById('selMonth2');
      this.selDay2 = document.getElementById('selDay2');

      this.selMonth2.selectedIndex = thisMonth;
      this.selDay2.selectedIndex = thisDay-1;

      YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar2up("YAHOO.example.calendar.cal1","container1",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
      YAHOO.example.calendar.cal1.title = "Select your desired departure date:";
      YAHOO.example.calendar.cal1.setChildFunction("onSelect",setDate1);
      YAHOO.example.calendar.cal1.render();
      
      YAHOO.example.calendar.cal2 = new YAHOO.widget.Calendar2up("YAHOO.example.calendar.cal2","container2",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
      YAHOO.example.calendar.cal2.title = "Select your desired return date:";
      YAHOO.example.calendar.cal2.setChildFunction("onSelect",setDate2);
      YAHOO.example.calendar.cal2.render();
    }

    function showCalendar1() {
      YAHOO.example.calendar.cal2.hide();
      
      var pos = YAHOO.util.Dom.getXY(link1);
      YAHOO.example.calendar.cal1.outerContainer.style.display='block';
      YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal1.outerContainer, [pos[0],pos[1]+link1.offsetHeight+1]);
    }

    function showCalendar2() {
      YAHOO.example.calendar.cal1.hide();

      var pos = YAHOO.util.Dom.getXY(link2);
      YAHOO.example.calendar.cal2.outerContainer.style.display='block';
      YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal2.outerContainer, [pos[0],pos[1]+link2.offsetHeight+1]);
    }

    function setDate1() {
      var date1 = YAHOO.example.calendar.cal1.getSelectedDates()[0];
      selMonth1.selectedIndex=date1.getMonth();
      selDay1.selectedIndex=date1.getDate()-1;
      YAHOO.example.calendar.cal1.hide();
    }

    function setDate2() {
      var date2 = YAHOO.example.calendar.cal2.getSelectedDates()[0];
      selMonth2.selectedIndex=date2.getMonth();
      selDay2.selectedIndex=date2.getDate()-1;
      YAHOO.example.calendar.cal2.hide();
    }

    function changeDate1() {
      var month = this.selMonth1.selectedIndex;
      var day = this.selDay1.selectedIndex + 1;
      var year = this.today.getFullYear();

      YAHOO.example.calendar.cal1.select((month+1) + "/" + day + "/" + year);
      YAHOO.example.calendar.cal1.setMonth(month);
      YAHOO.example.calendar.cal1.render();
    }

    function changeDate2() {
      var month = this.selMonth2.selectedIndex;
      var day = this.selDay2.selectedIndex + 1;
      var year = this.today.getFullYear();
      
      YAHOO.example.calendar.cal2.select((month+1) + "/" + day + "/" + year);
      YAHOO.example.calendar.cal2.setMonth(month);
      YAHOO.example.calendar.cal2.render();
    }  

    YAHOO.util.Event.addListener(window, "load", init);    
  </script>

</head>

<body style="margin:0px">

<img src="./examples/calendar/default_2up/img/ytravel.gif" id="bgImg">

<div style="position:absolute;left:148px;top:275px">
  <select id="selMonth1" name="selMonth1" onchange="changeDate1()" style="vertical-align:middle">
  <option value="Jan">
  Jan
  </option>
  <option value="Feb">
  Feb
  </option>
  <option value="Mar">
  Mar
  </option>
  <option value="Apr">
  Apr
  </option>
  <option value="May">
  May
  </option>
  <option value="Jun">
  Jun
  </option>
  <option value="Jul">
  Jul
  </option>
  <option value="Aug">
  Aug
  </option>
  <option value="Sep">
  Sep
  </option>
  <option value="Oct">
  Oct
  </option>
  <option value="Nov">
  Nov
  </option>
  <option value="Dec">
  Dec
  </option>
  </select>
  <select name="selDay1" id="selDay1" onchange="changeDate1()" style="vertical-align:middle">
  <option value="1">
  1
  </option>
  <option value="2">
  2
  </option>
  <option value="3">
  3
  </option>
  <option value="4">
  4
  </option>
  <option value="5">
  5
  </option>
  <option value="6">
  6
  </option>
  <option value="7">
  7
  </option>
  <option value="8">
  8
  </option>
  <option value="9">
  9
  </option>
  <option value="10">
  10
  </option>
  <option value="11">
  11
  </option>
  <option value="12">
  12
  </option>
  <option value="13">
  13
  </option>
  <option value="14">
  14
  </option>
  <option value="15">
  15
  </option>
  <option value="16">
  16
  </option>
  <option value="17">
  17
  </option>
  <option value="18">
  18
  </option>
  <option value="19">
  19
  </option>
  <option value="20">
  20
  </option>
  <option value="21">
  21
  </option>
  <option value="22">
  22
  </option>
  <option value="23">
  23
  </option>
  <option value="24">
  24
  </option>
  <option value="25">
  25
  </option>
  <option value="26">
  26
  </option>
  <option value="27">
  27
  </option>
  <option value="28">
  28
  </option>
  <option value="29">
  29
  </option>
  <option value="30">
  30
  </option>
  <option value="31">
  31
  </option>
  </select><a href="javascript:void(null)" onclick="showCalendar1()"><img id="dateLink1" src="./examples/calendar/img/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/></a>
</div>


<div style="position:absolute;left:303px;top:275px">
  <select id="selMonth2" name="selMonth2" onchange="changeDate2()" style="vertical-align:middle">
  <option value="Jan">
  Jan
  </option>
  <option value="Feb">
  Feb
  </option>
  <option value="Mar">
  Mar
  </option>
  <option value="Apr">
  Apr
  </option>
  <option value="May">
  May
  </option>
  <option value="Jun">
  Jun
  </option>
  <option value="Jul">
  Jul
  </option>
  <option value="Aug">
  Aug
  </option>
  <option value="Sep">
  Sep
  </option>
  <option value="Oct">
  Oct
  </option>
  <option value="Nov">
  Nov
  </option>
  <option value="Dec">
  Dec
  </option>
  </select>
  <select name="selDay2" id="selDay2" onchange="changeDate2()" style="vertical-align:middle">
  <option value="1">
  1
  </option>
  <option value="2">
  2
  </option>
  <option value="3">
  3
  </option>
  <option value="4">
  4
  </option>
  <option value="5">
  5
  </option>
  <option value="6">
  6
  </option>
  <option value="7">
  7
  </option>
  <option value="8">
  8
  </option>
  <option value="9">
  9
  </option>
  <option value="10">
  10
  </option>
  <option value="11">
  11
  </option>
  <option value="12">
  12
  </option>
  <option value="13">
  13
  </option>
  <option value="14">
  14
  </option>
  <option value="15">
  15
  </option>
  <option value="16">
  16
  </option>
  <option value="17">
  17
  </option>
  <option value="18">
  18
  </option>
  <option value="19">
  19
  </option>
  <option value="20">
  20
  </option>
  <option value="21">
  21
  </option>
  <option value="22">
  22
  </option>
  <option value="23">
  23
  </option>
  <option value="24">
  24
  </option>
  <option value="25">
  25
  </option>
  <option value="26">
  26
  </option>
  <option value="27">
  27
  </option>
  <option value="28">
  28
  </option>
  <option value="29">
  29
  </option>
  <option value="30">
  30
  </option>
  <option value="31">
  31
  </option>
  </select><a href="javascript:void(null)" onclick="showCalendar2()"><img id="dateLink2" src="./examples/calendar/img/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/></a>
</div>

    
    <div id="container1" style="position:absolute;display:none"></div>
    <div id="container2" style="position:absolute;display:none"></div>

<script src="./docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>

</body>
</html>
           
         
  








yui.zip( 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 - Handling onSelect / onDeselect
5.Calendar Control - Mix/Max Implementation
6.Calendar Control - Multi-Select Implementation
7.Calendar Control - Multi-Select 2-up 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