Template:Caltech Calendar

From 2012.igem.org

(Difference between revisions)
(Created page with "<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script src="https://2011.igem.org/Team:Imperial_Coll...")
Line 1: Line 1:
-
<html>
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
+
  <title>Calendar | JavaScript Examples | UIZE JavaScript Framework</title>
 +
  <meta name="keywords" content="widget Uize.Widget.Calendar"/>
 +
  <meta name="description" content="See an example of a calendar widget that you can use on your own Web site to let users choose a date from a grid, with controls for navigating months."/>
 +
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
 +
  <link rel="stylesheet" href="../css/page.css"/>
 +
  <link rel="stylesheet" href="../css/page.example.css"/>
 +
  <link rel="stylesheet" href="../css/widget.calendar.css"/>
 +
  <style type="text/css">
 +
    .calendarContainer {
 +
      margin:auto;
 +
    }
 +
  </style>
 +
</head>
-
<script src="https://2011.igem.org/Team:Imperial_College_London/gooeymenujs?action=raw&ctype=text/js">
+
<body>
-
/***********************************************
+
<script type="text/javascript" src="../js/Uize.js"></script>
-
* Gooey Menu Script (c) Dynamic Drive (www.dynamicdrive.com)
+
-
* This notice MUST stay intact for legal use
+
-
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
+
-
***********************************************/
+
-
</script>
+
<h1 class="document-title">
 +
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
 +
  <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
 +
  Calendar
 +
  <div id="page-actions" class="pageActions">
 +
    <a href="source-code/calendar.html" class="buttonLink">SOURCE</a>
 +
  </div>
 +
</h1>
-
<link rel="stylesheet" type="text/css" href="https://2011.igem.org/Team:Imperial_College_London/gooeymenu?action=raw&ctype=text/css" />
+
<div class="main">
-
</head>
+
  <!-- explanation copy -->
-
<body>
+
  <div class="explanation">
-
<hr style="color:#BDCBBD; height:3px; margin:0px;" />
+
    <p>In this example, an instance of the <a href="../reference/Uize.Widget.Calendar.html"><code>Uize.Widget.Calendar</code></a> class is used to wire up a simple calendar widget. The HTML markup for the calendar widget is provided by the <a href="../reference/Uize.Templates.Calendar.html"><code>Uize.Templates.Calendar</code></a> JavaScript template. Initially, the calendar's value is set to today's date. However, you can change it's value by clicking on a different date of this month, or you can use the arrows to navigate to and select a date from a different month.</p>
-
<h1>Diary</h1>
+
-
<p><b>This is our diary page which records the daily activities of the team. Click on the links below to see a summary of events and activities happening each week.</b></p><br/>
+
-
<ul id="gooeymenu1" class="gelbuttonmenu">
+
    <p>The month and year that the calendar displays are accessible through the <code>month</code> and <code>year</code> set-get properties, respectively. Below the calendar widget is a summary of its current state and some links to let you programmatically interact with the calendar. Play around with the calendar widget and see how the state updates, and mess with the links to control the calendar.</p>
-
<li><a href="#">Week</a></li>
+
  </div>
-
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Notebook/week1">1</a></li>
+
 
-
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Notebook/week2">2</a></li>
+
  <div id="page_calendar-shell"></div>
-
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Notebook/week3">3</a></li>
+
  <br/>
-
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Notebook/week4">4</a></li>
+
 
-
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Notebook/week5">5</a></li>
+
  <!-- programmatic interface examples -->
-
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Notebook/week6">6</a></li>
+
 
-
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Notebook/week7">7</a></li>
+
  <div class="programmaticInterface">
-
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Notebook/week8">8</a></li>
+
    <ul>
-
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Notebook/week9">9</a></li>
+
      <li>Current State
-
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Notebook/week10">10</a></li>
+
        <ul>
-
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Notebook/week11">11</a></li>
+
          <li><b>calendar.get ('value') == </b>new Date ('<span id="page-calendarValue"></span>')</li>
-
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Notebook/week12">12</a></li>
+
          <li><b>calendar.get ('month') == </b><span id="page-calendarMonth"></span></li>
-
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Notebook/week13">13</a></li>
+
          <li><b>calendar.get ('year') == </b><span id="page-calendarYear"></span></li>
-
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Notebook/week14">14</a></li>
+
        </ul>
-
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Notebook/week15">15</a></li>
+
      </li>
-
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Notebook/week16">16</a></li>
+
      <li>Navigate Programmatically
-
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Notebook/week17">17</a></li>
+
        <ul>
-
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Notebook/week18">18</a></li>
+
          <li>MONTH
-
</ul>
+
            <ul>
-
<br/>
+
              <li>PREVIOUS MONTH: <a href="javascript://" class="linkedJs">calendar.set ({month:calendar.get ('month') - 1})</a></li>
-
<hr style="color:#BDCBBD; height:3px; margin:0px;" />
+
              <li>NEXT MONTH: <a href="javascript://" class="linkedJs">calendar.set ({month:calendar.get ('month') + 1})</a></li>
 +
            </ul>
 +
          </li>
 +
          <li>YEAR
 +
            <ul>
 +
              <li>PREVIOUS YEAR: <a href="javascript://" class="linkedJs">calendar.set ({year:calendar.get ('year') - 1})</a></li>
 +
              <li>NEXT YEAR: <a href="javascript://" class="linkedJs">calendar.set ({year:calendar.get ('year') + 1})</a></li>
 +
            </ul>
 +
          </li>
 +
        </ul>
 +
      </li>
 +
    </ul>
 +
  </div>
 +
</div>
 +
 
 +
<!-- JavaScript code to insert the calendar widget and wire up the page -->
 +
 
 +
<script type="text/javascript">
 +
 
 +
Uize.module ({
 +
  required:[
 +
    'UizeDotCom.Page.Example.library',
 +
    'UizeDotCom.Page.Example',
 +
    'Uize.Widget.Calendar',
 +
    'Uize.Templates.Calendar'
 +
  ],
 +
  builder:function () {
 +
    /*** create the example page widget ***/
 +
      var page = window.page = UizeDotCom.Page.Example ({evaluator:function (code) {eval (code)}});
 +
 
 +
    /*** add the calendar child widget ***/
 +
      var calendar = page.addChild (
 +
        'calendar',
 +
        Uize.Widget.Calendar,
 +
        {
 +
          built:false,
 +
          html:Uize.Templates.Calendar
 +
        }
 +
      );
 +
 
 +
    /*** wire up the page widget ***/
 +
      page.wireUi ();
 +
 
 +
    /*** some code for demonstrating the widget's programmatic interface ***/
 +
      function displayCalendarState () {
 +
        page.setNodeValue ('calendarValue',calendar.get ('value'));
 +
        page.setNodeValue ('calendarMonth',calendar.get ('month'));
 +
        page.setNodeValue ('calendarYear',calendar.get ('year'));
 +
      }
 +
      calendar.wire ('Changed.value',displayCalendarState);
 +
      calendar.wire ('Changed.month',displayCalendarState);
 +
      calendar.wire ('Changed.year',displayCalendarState);
 +
      displayCalendarState ();
 +
  }
 +
});
 +
 
 +
</script>
</body>
</body>
</html>
</html>

Revision as of 00:12, 28 June 2012

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Calendar | JavaScript Examples | UIZE JavaScript Framework

JAVASCRIPT EXAMPLES Calendar
SOURCE

In this example, an instance of the Uize.Widget.Calendar class is used to wire up a simple calendar widget. The HTML markup for the calendar widget is provided by the Uize.Templates.Calendar JavaScript template. Initially, the calendar's value is set to today's date. However, you can change it's value by clicking on a different date of this month, or you can use the arrows to navigate to and select a date from a different month.

The month and year that the calendar displays are accessible through the month and year set-get properties, respectively. Below the calendar widget is a summary of its current state and some links to let you programmatically interact with the calendar. Play around with the calendar widget and see how the state updates, and mess with the links to control the calendar.


Retrieved from "http://2012.igem.org/Template:Caltech_Calendar"