← Back to branch summary

~hexmode/+junk/main

« back to all changes in this revision

Viewing changes to install-files/apps/sqlitemanager1.2.0/jscalendar/simple-3.html

  • Committer: Mark A. Hershberger
  • Date: 2008-01-05 19:38:56 UTC
  • Revision ID: hershberger@spawn-xp-20080105193856-6rnzgwa4nehue3qj
initial commit

Show diffs side-by-side

added added

removed removed

Lines of Context:
install-files/apps/sqlitemanager1.2.0/jscalendar/simple-3.html
 
1
<html style="background-color: buttonface; color: buttontext;">
 
2
 
 
3
<head>
 
4
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
 
5
 
 
6
<title>Simple calendar setup [flat calendar]</title>
 
7
 
 
8
  <!-- calendar stylesheet -->
 
9
  <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
 
10
 
 
11
  <!-- main calendar program -->
 
12
  <script type="text/javascript" src="calendar.js"></script>
 
13
 
 
14
  <!-- language for the calendar -->
 
15
  <script type="text/javascript" src="lang/calendar-en.js"></script>
 
16
 
 
17
  <!-- the following script defines the Calendar.setup helper function, which makes
 
18
       adding a calendar a matter of 1 or 2 lines of code. -->
 
19
  <script type="text/javascript" src="calendar-setup.js"></script>
 
20
 
 
21
    <style type="text/css">
 
22
      .special { background-color: #000; color: #fff; }
 
23
    </style>
 
24
 
 
25
</head>
 
26
 
 
27
<body>
 
28
 
 
29
<h2>DHTML Calendar &mdash; for the impatient</h2>
 
30
 
 
31
      <blockquote>
 
32
        <p>
 
33
          This page demonstrates how to setup a flat calendar.  Examples of
 
34
          <em>popup</em> calendars are available in <a
 
35
          href="simple-1.html">another page</a>.
 
36
        </p>
 
37
        <p>
 
38
          The code in this page uses a helper function defined in
 
39
          "calendar-setup.js".  With it you can setup the calendar in
 
40
          minutes.  If you're not <em>that</em> impatient, ;-) <a
 
41
          href="doc/html/reference.html">complete documenation</a> is
 
42
          available.
 
43
        </p>
 
44
      </blockquote>
 
45
 
 
46
 
 
47
 
 
48
<hr />
 
49
 
 
50
<div style="float: right; margin-left: 1em; margin-bottom: 1em;"
 
51
id="calendar-container"></div>
 
52
 
 
53
<script type="text/javascript">
 
54
  var SPECIAL_DAYS = {
 
55
    0 : [ 13, 24 ],             // special days in January
 
56
    2 : [ 1, 6, 8, 12, 18 ],    // special days in March
 
57
    8 : [ 21, 11 ]              // special days in September
 
58
  };
 
59
 
 
60
  function dateIsSpecial(year, month, day) {
 
61
    var m = SPECIAL_DAYS[month];
 
62
    if (!m) return false;
 
63
    for (var i in m) if (m[i] == day) return true;
 
64
    return false;
 
65
  };
 
66
 
 
67
  function dateChanged(calendar) {
 
68
    // Beware that this function is called even if the end-user only
 
69
    // changed the month/year.  In order to determine if a date was
 
70
    // clicked you can use the dateClicked property of the calendar:
 
71
    if (calendar.dateClicked) {
 
72
      // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
 
73
      var y = calendar.date.getFullYear();
 
74
      var m = calendar.date.getMonth();     // integer, 0..11
 
75
      var d = calendar.date.getDate();      // integer, 1..31
 
76
      // redirect...
 
77
      window.location = "/" + y + "/" + m + "/" + d + "/index.php";
 
78
    }
 
79
  };
 
80
 
 
81
  Calendar.setup(
 
82
    {
 
83
      flat         : "calendar-container", // ID of the parent element
 
84
      flatCallback : dateChanged,          // our callback function
 
85
      dateStatusFunc : function(date, y, m, d) {
 
86
                         if (dateIsSpecial(y, m, d)) return "special";
 
87
                         else return false; // other dates are enabled
 
88
                         // return true if you want to disable other dates
 
89
                       }
 
90
    }
 
91
  );
 
92
</script>
 
93
 
 
94
<p>The positioning of the DIV that contains the calendar is entirely your
 
95
job.  For instance, the "calendar-container" DIV from this page has the
 
96
following style: "float: right; margin-left: 1em; margin-bottom: 1em".</p>
 
97
 
 
98
<p>Following there is the code that has been used to create this calendar.
 
99
You can find the full description of the <tt>Calendar.setup()</tt> function
 
100
in the <a href="doc/html/reference.html">calendar documenation</a>.</p>
 
101
 
 
102
<pre
 
103
>&lt;div style="float: right; margin-left: 1em; margin-bottom: 1em;"
 
104
id="calendar-container"&gt;&lt;/div&gt;
 
105
 
 
106
&lt;script type="text/javascript"&gt;
 
107
  function dateChanged(calendar) {
 
108
    // Beware that this function is called even if the end-user only
 
109
    // changed the month/year.  In order to determine if a date was
 
110
    // clicked you can use the dateClicked property of the calendar:
 
111
    if (calendar.dateClicked) {
 
112
      // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
 
113
      var y = calendar.date.getFullYear();
 
114
      var m = calendar.date.getMonth();     // integer, 0..11
 
115
      var d = calendar.date.getDate();      // integer, 1..31
 
116
      // redirect...
 
117
      window.location = "/" + y + "/" + m + "/" + d + "/index.php";
 
118
    }
 
119
  };
 
120
 
 
121
  Calendar.setup(
 
122
    {
 
123
      flat         : "calendar-container", // ID of the parent element
 
124
      flatCallback : dateChanged           // our callback function
 
125
    }
 
126
  );
 
127
&lt;/script&gt;</pre>
 
128
 
 
129
</body>
 
130
</html>