[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