[html5] r3101 - [e] (0) Add examples for vEvent.

whatwg at whatwg.org whatwg at whatwg.org
Thu May 14 16:47:23 PDT 2009


Author: ianh
Date: 2009-05-14 16:47:22 -0700 (Thu, 14 May 2009)
New Revision: 3101

Modified:
   index
   source
Log:
[e] (0) Add examples for vEvent.

Modified: index
===================================================================
--- index	2009-05-14 23:11:59 UTC (rev 3100)
+++ index	2009-05-14 23:47:22 UTC (rev 3101)
@@ -682,7 +682,9 @@
    <li><a href=#predefined-vocabularies><span class=secno>5.4 </span>Predefined vocabularies</a>
     <ol>
      <li><a href=#vcard><span class=secno>5.4.1 </span>vCard</a></li>
-     <li><a href=#vevent><span class=secno>5.4.2 </span>vEvent</a></li>
+     <li><a href=#vevent><span class=secno>5.4.2 </span>vEvent</a>
+      <ol>
+       <li><a href=#examples><span class=secno>5.4.2.1 </span>Examples</a></ol></li>
      <li><a href=#bibtex><span class=secno>5.4.3 </span>BibTeX</a></li>
      <li><a href=#rdf><span class=secno>5.4.4 </span>RDF</a></ol></li>
    <li><a href=#converting-html-to-other-formats><span class=secno>5.5 </span>Converting HTML to other formats</a>
@@ -42993,14 +42995,92 @@
 
     </ul></li>
 
-  </ol><!--XXX
+  </ol><h5 id=examples><span class=secno>5.4.2.1 </span>Examples</h5>
 
-  <h5>Examples</h5>
+<!-- get more from http://www.ietf.org/rfc/rfc2445.txt -->
 
-from http://www.ietf.org/rfc/rfc2445.txt
+  <div class=example>
 
---><h4 id=bibtex><span class=secno>5.4.3 </span>BibTeX</h4>
+   <p>Here is an example of a page that uses the <code title=md-vevent><a href=#md-vevent>vevent</a></code> vocabulary to mark up an event:</p>
 
+   <pre><body item="vevent">
+ ...
+ <h1 property="summary">Bluesday Tuesday: Money Road</h1>
+ ...
+ <time property="dtstart" datetime="2009-05-05T19:00:00Z">May 5th @ 7pm</time>
+ (until <time property="dtend" datetime="2009-05-05T21:00:00Z">9pm</time>)
+ ...
+ <a href="http://livebrum.co.uk/2009/05/05/bluesday-tuesday-money-road"
+    rel="bookmark" property="url">Link to this page</a>
+ ...
+ <p>Location: <span property="location">The RoadHouse</span></p>
+ ...
+ <p><input type=button value="Add to Calendar"
+           onclick="location = getCalendar(this)"></p>
+ ...
+ <meta property="description" content="via livebrum.co.uk">
+</body></pre>
+
+   <p>The "<code title="">getCalendar()</code>" method could look like
+   this:</p>
+
+   <pre>function getCalendar(node) {
+  while (node && !node.item.has('vevent'))
+    node = node.parentNode;
+  if (!node) {
+    alert('No event data found.');
+    return;
+  }
+  var stamp = new Date();
+  var stampString = '' + stamp.getUTCFullYear() + (stamp.getUTCMonth() + 1) + stamp.getUTCDate() + 'T' +
+                         stamp.getUTCHours() + stamp.getUTCMinutes() + stamp.getUTCSeconds() + 'Z';
+  var calendar = 'BEGIN:VCALENDAR\r\nPRODID:HTML5\r\nVERSION:2.0\r\nBEGIN:VEVENT\r\nDTSTAMP:' + stampString + '\r\n';
+  for (var propIndex = 0; propIndex < node.properties.length; propIndex += 1) {
+    var prop = node.properties[propIndex];
+    var value = prop.content;
+    var parameters = '';
+    if (prop.localName == 'time') {
+      value = value.replace(/[:-]/g, '');
+      if (prop.date && prop.time)
+        parameters = ';VALUE=DATE';
+      else
+        parameters = ';VALUE=DATE-TIME';
+    } else {
+      value = value.replace(/\\/g, '\\n');
+      value = value.replace(/;/g, '\\;');
+      value = value.replace(/,/g, \\,');
+      value = value.replace(/[\r\n]/g, '\\n');
+    }
+    for (var nameIndex = 0; nameIndex < prop.itemprop.length; nameIndex += 1) {
+      var name = prop.itemprop[nameIndex];
+      if (!name.match(':') && !name.match('.')) {
+        calendar += name.toUpperCase() + parameters + ':' + value + '\r\n';
+      }
+    }
+  }
+  calendar += 'END:VEVENT\r\nEND:VCALENDAR\r\n';
+  return 'data:text/calendar;component=vevent,' + encodeURI(calendar);
+}</pre>
+
+   <p>The same page could offer some markup, such as the following,
+   for copy-and-pasting into blogs:</p>
+
+   <pre><div item="vevent">
+ <p>I'm going to
+ <strong property="summary">Bluesday Tuesday: Money Road</strong>,
+ <time property="dtstart" datetime="2009-05-05T19:00:00Z">May 5th at 7pm</time>
+ to <time property="dtend" content="2009-05-05T21:00:00Z">9pm</time>,
+ at <span property="location">The RoadHouse</span>!</p>
+ <p><a href="http://livebrum.co.uk/2009/05/05/bluesday-tuesday-money-road"
+       property="url">See this event on livebrum.co.uk</a>.</p>
+ <meta property="description" content="via livebrum.co.uk">
+</div></pre>
+
+  </div>
+
+
+  <h4 id=bibtex><span class=secno>5.4.3 </span>BibTeX</h4>
+
   <p>An item with the <a href=#predefined-type>predefined type</a> <dfn id=md-bibtex title=md-bibtex><code>bibtex</code></dfn> represents a
   bibliography entry.</p>
 

Modified: source
===================================================================
--- source	2009-05-14 23:11:59 UTC (rev 3100)
+++ source	2009-05-14 23:47:22 UTC (rev 3101)
@@ -48664,15 +48664,91 @@
   </ol>
 
 
-<!--XXX
-
   <h5>Examples</h5>
 
-from http://www.ietf.org/rfc/rfc2445.txt
+<!-- get more from http://www.ietf.org/rfc/rfc2445.txt -->
 
--->
+  <div class="example">
 
+   <p>Here is an example of a page that uses the <code
+   title="md-vevent">vevent</code> vocabulary to mark up an event:</p>
 
+   <pre><body item="vevent">
+ ...
+ <h1 property="summary">Bluesday Tuesday: Money Road</h1>
+ ...
+ <time property="dtstart" datetime="2009-05-05T19:00:00Z">May 5th @ 7pm</time>
+ (until <time property="dtend" datetime="2009-05-05T21:00:00Z">9pm</time>)
+ ...
+ <a href="http://livebrum.co.uk/2009/05/05/bluesday-tuesday-money-road"
+    rel="bookmark" property="url">Link to this page</a>
+ ...
+ <p>Location: <span property="location">The RoadHouse</span></p>
+ ...
+ <p><input type=button value="Add to Calendar"
+           onclick="location = getCalendar(this)"></p>
+ ...
+ <meta property="description" content="via livebrum.co.uk">
+</body></pre>
+
+   <p>The "<code title="">getCalendar()</code>" method could look like
+   this:</p>
+
+   <pre>function getCalendar(node) {
+  while (node && !node.item.has('vevent'))
+    node = node.parentNode;
+  if (!node) {
+    alert('No event data found.');
+    return;
+  }
+  var stamp = new Date();
+  var stampString = '' + stamp.getUTCFullYear() + (stamp.getUTCMonth() + 1) + stamp.getUTCDate() + 'T' +
+                         stamp.getUTCHours() + stamp.getUTCMinutes() + stamp.getUTCSeconds() + 'Z';
+  var calendar = 'BEGIN:VCALENDAR\r\nPRODID:HTML5\r\nVERSION:2.0\r\nBEGIN:VEVENT\r\nDTSTAMP:' + stampString + '\r\n';
+  for (var propIndex = 0; propIndex < node.properties.length; propIndex += 1) {
+    var prop = node.properties[propIndex];
+    var value = prop.content;
+    var parameters = '';
+    if (prop.localName == 'time') {
+      value = value.replace(/[:-]/g, '');
+      if (prop.date && prop.time)
+        parameters = ';VALUE=DATE';
+      else
+        parameters = ';VALUE=DATE-TIME';
+    } else {
+      value = value.replace(/\\/g, '\\n');
+      value = value.replace(/;/g, '\\;');
+      value = value.replace(/,/g, \\,');
+      value = value.replace(/[\r\n]/g, '\\n');
+    }
+    for (var nameIndex = 0; nameIndex < prop.itemprop.length; nameIndex += 1) {
+      var name = prop.itemprop[nameIndex];
+      if (!name.match(':') && !name.match('.')) {
+        calendar += name.toUpperCase() + parameters + ':' + value + '\r\n';
+      }
+    }
+  }
+  calendar += 'END:VEVENT\r\nEND:VCALENDAR\r\n';
+  return 'data:text/calendar;component=vevent,' + encodeURI(calendar);
+}</pre>
+
+   <p>The same page could offer some markup, such as the following,
+   for copy-and-pasting into blogs:</p>
+
+   <pre><div item="vevent">
+ <p>I'm going to
+ <strong property="summary">Bluesday Tuesday: Money Road</strong>,
+ <time property="dtstart" datetime="2009-05-05T19:00:00Z">May 5th at 7pm</time>
+ to <time property="dtend" content="2009-05-05T21:00:00Z">9pm</time>,
+ at <span property="location">The RoadHouse</span>!</p>
+ <p><a href="http://livebrum.co.uk/2009/05/05/bluesday-tuesday-money-road"
+       property="url">See this event on livebrum.co.uk</a>.</p>
+ <meta property="description" content="via livebrum.co.uk">
+</div></pre>
+
+  </div>
+
+
   <h4>BibTeX</h4>
 
   <p>An item with the <span>predefined type</span> <dfn




More information about the Commit-Watchers mailing list