[Sommaire] [Imprimer]

   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>