← Back to branch summary

~kosova/+junk/tuxfamily-twiki

« back to all changes in this revision

Viewing changes to foswiki/pub/System/JSCalendarContrib/dayinfo.html

  • Committer: James Michael DuPont
  • Date: 2009-07-18 19:58:49 UTC
  • Revision ID: jamesmikedupont@gmail.com-20090718195849-vgbmaht2ys791uo2
added foswiki

Show diffs side-by-side

added added

removed removed

Lines of Context:
foswiki/pub/System/JSCalendarContrib/dayinfo.html
 
1
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
 
2
<html> <head>
 
3
<title>How to include additional info in day cells</title>
 
4
<script type="text/javascript" src="calendar.js"></script>
 
5
<script type="text/javascript" src="lang/calendar-en.js"></script>
 
6
<script type="text/javascript" src="calendar-setup.js"></script>
 
7
<script type="text/javascript">
 
8
  // define info for dates in this table:
 
9
  var dateInfo = {
 
10
    "20050308" : "Mishoo's&nbsp;birthday",
 
11
    "20050310" : "foo",
 
12
    "20050315" : "bar",
 
13
    "20050318" : "25$",
 
14
    "20050324" : "60$"
 
15
  };
 
16
</script>
 
17
<style type="text/css">
 
18
  @import url(calendar-win2k-1.css);
 
19
  .calendar .inf { font-size: 80%; color: #444; }
 
20
  .calendar .wn { font-weight: bold; vertical-align: top; }
 
21
</style>
 
22
</head>
 
23
 
 
24
<body>
 
25
<h1>How to include additional info in day cells</h1>
 
26
 
 
27
<div id="flatcal" style="float: right"></div>
 
28
 
 
29
<script type="text/javascript">
 
30
  function getDateText(date, d) {
 
31
    var inf = dateInfo[date.print("%Y%m%d")];
 
32
    if (!inf) {
 
33
      return d + "<div class='inf'>&nbsp;</div>";
 
34
    } else {
 
35
      return d + "<div class='inf'>" + inf + "</div>";
 
36
    }
 
37
  };
 
38
  function flatCallback(cal) {
 
39
    if (cal.dateClicked) {
 
40
      // do something here
 
41
      window.status = "Selected: " + cal.date;
 
42
      var inf = dateInfo[cal.date.print("%Y%m%d")];
 
43
      if (inf) {
 
44
        window.status += ".  Additional info: " + inf;
 
45
      }
 
46
    }
 
47
  };
 
48
  Calendar.setup({
 
49
     flat: "flatcal",
 
50
     dateText: getDateText,
 
51
     flatCallback: flatCallback
 
52
  });
 
53
</script>
 
54
 
 
55
<p>The idea is simple:</p>
 
56
 
 
57
<ol>
 
58
  <li>
 
59
    <p>Define a callback that takes two parameters like this:</p>
 
60
    <pre>function getDateText(date, d)</pre>
 
61
    <p>
 
62
      This function will receive the date object as the first
 
63
      parameter and the current date number (1..31) as the second (you
 
64
      can get it as well by calling date.getDate() but since it's very
 
65
      probably useful I thought I'd pass it too so that we can avoid a
 
66
      function call).
 
67
    </p>
 
68
    <p>
 
69
      This function <em>must</em> return the text to be inserted in
 
70
      the cell of the passed date.  That is, one should at least
 
71
      "return d;".
 
72
    </p>
 
73
  </li>
 
74
  <li>
 
75
    Pass the above function as the "dateText" parameter to
 
76
    Calendar.setup.
 
77
  </li>
 
78
</ol>
 
79
 
 
80
<p>
 
81
  The function could simply look like:
 
82
</p>
 
83
 
 
84
<pre
 
85
>  function getDateText(date, d) {
 
86
    if (d == 12) {
 
87
      return "12th";
 
88
    } else if (d == 13) {
 
89
      return "bad luck";
 
90
    } /* ... etc ... */
 
91
  }</pre>
 
92
 
 
93
<p>
 
94
  but it's easy to imagine that this approach sucks.  For a better
 
95
  way, see the source of this page and note the usage of an externally
 
96
  defined "dateText" object which maps "date" to "date info", also
 
97
  taking into account the year and month.  This object can be easily
 
98
  generated from a database, and the getDateText function becomes
 
99
  extremely simple (and static).
 
100
</p>
 
101
 
 
102
<p>
 
103
  Cheers!
 
104
</p>
 
105
 
 
106
<hr />
 
107
<address><a href="http://dynarch.com/mishoo/">mishoo</a></address>
 
108
<!-- hhmts start --> Last modified: Sat Mar  5 17:18:06 EET 2005 <!-- hhmts end -->
 
109
</body> </html>