← Back to branch summary

~kosova/+junk/tuxfamily-twiki

« back to all changes in this revision

Viewing changes to foswiki/pub/System/JSCalendarContrib/multiple-dates.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/multiple-dates.html
 
1
<html xmlns="http://www.w3.org/1999/xhtml">
 
2
<head>
 
3
  <title>Sample for the multiple dates feature</title>
 
4
  <!-- calendar stylesheet -->
 
5
  <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
 
6
 
 
7
  <!-- main calendar program -->
 
8
  <script type="text/javascript" src="calendar.js"></script>
 
9
 
 
10
  <!-- language for the calendar -->
 
11
  <script type="text/javascript" src="lang/calendar-en.js"></script>
 
12
 
 
13
  <!-- the following script defines the Calendar.setup helper function, which makes
 
14
       adding a calendar a matter of 1 or 2 lines of code. -->
 
15
  <script type="text/javascript" src="calendar-setup.js"></script>
 
16
</head>
 
17
 
 
18
<body>
 
19
  <h1>Sample for the multiple dates feature</h1>
 
20
 
 
21
  <p>
 
22
    Starting version 0.9.7,
 
23
    the calendar is able to handle multiple dates selection, in either
 
24
    flat or popup form.  For this to happen one needs to pass the
 
25
    "<tt>multiple:&nbsp;true</tt>" parameter to
 
26
    <tt>Calendar.setup</tt> and to install an <tt>onUpdate</tt>
 
27
    handler that watches for modifications.
 
28
  </p>
 
29
 
 
30
  <a id="trigger" href="#">[open calendar...]</a>
 
31
 
 
32
  <div id="output"></div>
 
33
 
 
34
  <script type="text/javascript">//<![CDATA[
 
35
    // the default multiple dates selected, first time the calendar is instantiated
 
36
    var MA = [];
 
37
 
 
38
    function closed(cal) {
 
39
 
 
40
      // here we'll write the output; this is only for example.  You
 
41
      // will normally fill an input field or something with the dates.
 
42
      var el = document.getElementById("output");
 
43
 
 
44
      // reset initial content.
 
45
      el.innerHTML = "";
 
46
 
 
47
      // Reset the "MA", in case one triggers the calendar again.
 
48
      // CAREFUL!  You don't want to do "MA = [];".  We need to modify
 
49
      // the value of the current array, instead of creating a new one.
 
50
      // Calendar.setup is called only once! :-)  So be careful.
 
51
      MA.length = 0;
 
52
 
 
53
      // walk the calendar's multiple dates selection hash
 
54
      for (var i in cal.multiple) {
 
55
        var d = cal.multiple[i];
 
56
        // sometimes the date is not actually selected, that's why we need to check.
 
57
        if (d) {
 
58
          // OK, selected.  Fill an input field.  Or something.  Just for example,
 
59
          // we will display all selected dates in the element having the id "output".
 
60
          el.innerHTML += d.print("%A, %Y %B %d") + "<br />";
 
61
 
 
62
          // and push it in the "MA", in case one triggers the calendar again.
 
63
          MA[MA.length] = d;
 
64
        }
 
65
      }
 
66
      cal.hide();
 
67
      return true;
 
68
    };
 
69
 
 
70
    Calendar.setup({
 
71
      align      : "BR",
 
72
      showOthers : true,
 
73
      multiple   : MA, // pass the initial or computed array of multiple dates to be initially selected
 
74
      onClose    : closed,
 
75
      button     : "trigger"
 
76
    });
 
77
  //]]></script>
 
78
 
 
79
<hr />
 
80
<address><a href="http://dynarch.com/mishoo/">mishoo</a></address>
 
81
<!-- hhmts start --> Last modified: Thu Mar  3 20:17:42 EET 2005 <!-- hhmts end -->
 
82
</body> </html>