SOURCE CODE: Calendar Controls Wikipedia

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
  <title>Calendar Controls Wikipedia | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="Uize.Widgets.Calendar.Widget"/>
  <meta name="description" content="See an example of how a calendar widget can be used to control Wikipedia, where choosing a date loads the Wikipedia page for that date in an IFRAME."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href=""/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <style type="text/css">
    .calendarShell {
      float: left;
      background: #fff;
      padding: 5px;
      border: 1px solid #ccc;


<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Calendar Controls Wikipedia
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/calendar-controls-wikipedia.html" class="buttonLink">SOURCE</a></div>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of the <a href="../reference/Uize.Widgets.Calendar.Widget.html"><code>Uize.Widgets.Calendar.Widget</code></a> class is used to wire up a simple calendar widget that controls the URL for a document in an IFRAME to its right. Use the calendar to choose a date and the IFRAME will load information about what happened on that day in time, courtesy of <a href="" target="_blank"></a>. As powerful of a resource as it is, Wikipedia does not - unfortunately - contain reference information for the future. Because of this failing on Wikipedia's part, the calendar widget is configured to not allow selection of dates in the future, through the use of its <code>maxValue</code> state property.</p>

  <div style="width:752px; margin:auto;">
    <div id="page-calendar" class="calendarShell"></div>
    <iframe id="page-wikipediaIframe" name="wikipediaIframe" src="../js/Uize/blank.html" style="width:559px; height:370px; margin-left:10px; border-width:5px; border-style:solid;" class="insetBorderColor" frameborder="0"></iframe>
    <br style="clear:left;"/>

<!-- JavaScript code to insert the calendar widget and wire up the page -->

<script type="text/javascript">

Uize.require (
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = = UizeSite.Page.Example ();

    /*** update wikipedia iframe to new date ***/
      function updateWikipediaIframe () {
          date = calendar.valueOf (),
          monthName = Uize.Date.monthNames [date.getMonth ()],
          fullYear = date.getFullYear ()
        page.setNodeProperties (
              '' +
              monthName + '_' + fullYear + '#' + fullYear + '_' + monthName + '_' + date.getDate ()

    /*** add the calendar child widget ***/
      var calendar = page.addChild (
          maxValue:new Date
      calendar.wire ('Changed.value',updateWikipediaIframe);

    /*** wire up the page widget ***/
      page.wireUi ();

    /*** initialize the wikipedia iframe ***/
      updateWikipediaIframe ();