Tutorial

Main Menu

Login Form

Blog Test

gCalMarkup properly handles multiple articles on the same page all containing calendars. This page demonstrates this by displaying the preceding tutorial pages in a blog format with calendars from several different articles displaying simultaneously. Read More
Last Updated on Thursday, 22 October 2009 03:12

Single Events

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl nibh, consectetur ac consequat sit amet, blandit vitae dolor. The next event from this numerology calendar is: Waiting for Google.... Ut tristique metus suscipit urna mattis at volutpat purus vehicula. Praesent auctor erat sed justo suscipit hendrerit.

The example above shows the insertion of a Google calendar event title in the middle of a paragraph. Using gCalMarkup this only requires three lines of HTML. Let's go through each one. First is the actual HTML from the above paragraph (the background style has been left out for clarity):

...is: Waiting for Google.... Ut tristique...

gCalMarkup needs to know where on the current page the Google Calendar™ events should be inserted. It does this by looking for an HTML element with a unique id. This element is called the main element and "id={gCalMarkup _id}.main" in the line above provides this unique id (see the reference manual for details on the purpose of {gCalMarkup _id} ).

In this case the main element is <span>, but most HTML elements can be used (we'll learn about a few restrictions later). The main element can contain anything initially, but usually something like "Waiting for Google..." is used to indicate that Google Calendar™ events have not been received yet. When gCalMarkup receives calendar data it will replace the contents of the main element with information from the events. Later we'll learn how to create more than one main element.

The following HTML element describes what information will be placed in the main element and how it should be formatted:

{gCalMarkup _eventTitle}

This element is called the mainTemplate and has an id of "{gCalMarkup _id}.mainTemplate". Again, any HTML element can be used, but usually it will be the same as the main element. In this case the contents of the mainTemplate element, "{gCalMarkup _eventTitle}", is a special gCalMarkup selector that refers to the title of the Google Calendar™ event. There are many other gCalMarkup selectors to extract event dates, descriptions, location, etc (see the reference manual).

The last required line tells gCalMarkup about the Google Calendar™ we want to use:

{gCalDefine calendar id="nc" key="6hmji7d389ho5eavfq817fgtmlcg7iur%40import.calendar.google.com" maxResults="1"}

The {gCalDefine calendar...} command defines a calendar. There are two required parameters: "id" and "key". The id parameter is a short alphanumeric name used to identify the calendar (this will be more useful later when we deal with multiple calendars) and the second "key" parameter is the Google Calendar™ ID that tells gCalMarkup where to find the calendar. (See the reference manual for instructions on finding the Calendar ID). The last parameter, "maxResults", is optional and tells gCalMarkup to only retrieve a single event.

Note that the mainTemplate element and the gCalDefine calendar command can both be anywhere in the article since both are removed by gCalMarkup and are not visible.

Last Updated on Friday, 23 October 2009 12:44

Markup Selectors

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl nibh, consectetur ac consequat sit amet, blandit vitae dolor. The next event from this numerology calendar is: Waiting for Google.... Ut tristique metus suscipit urna mattis at volutpat purus vehicula. Praesent auctor erat sed justo suscipit hendrerit.

We've made the previous example a little more useful by also displaying the date when the event occurs. The in-line HTML remains the same. All we have to change is the template. Here is the new template for this example:

{gCalMarkup _eventTitle} on {gCalMarkup _eventMonth}/{gCalMarkup _eventDay}/{gCalMarkup _eventYear}

We've added several new markup selectors, _eventMonth, _eventDay, and _eventYear, to extract the date of the event. All of the available gCalMarkup selectors are listed in the reference manual.

Last Updated on Friday, 23 October 2009 13:20

Multiple Events

Waiting for google calendar...

When displaying more than one event from a calendar a tabular format is usually used. In this example we'll start building the example from the introduction to gCalMarkup page that displays all Friday the 13ths in the next 1000 days from this Friday the 13th calendar. We'll start with the simplified version shown to the right which is generated with the following HTML:

<table style="border: 3px double #135cae; float: right; width: 25%; " cellspacing="0">
<tbody id="{gCalMarkup _id}.main">
<tr style="background-color: #feeab5">
<td>Waiting for google calendar...</td>
</tr>
</tbody>
</table>

This is a basic HTML table structure. The only thing special about it is the id="{gCalMarkup _id}.main" in the HTML tag in line 2. This id tells gCalMarkup where calendar events should be inserted in the table. Note that while the <tbody> tag could be left out and the id added to the <table> tag instead, since some of the Joomla! editors add <tbody> tags back in it's best to use it.

Now for the template itself. Here is the template used for this table:

<div id="{gCalMarkup _id}.mainTemplate.container">
<table>
<tbody id="{gCalMarkup _id}.mainTemplate">
<tr style="background-color: #feeab5">
<td>{gCalMarkup _eventMonth}/{gCalMarkup _eventDay}</td>
<td>{gCalMarkup _eventTitle}</td>
</tr>
</tbody>
</table>
</div>

Again this is a basic HTML table structure, but there are a couple of special things. The id="{gCalMarkup _id}.mainTemplate" in the HTML <tbody> tag on line 3 tells gCalMarkup where to find the template. The contents of this HTML tag will be reproduced for each calendar event and insert into the displayed table (the HTML element with the id="{gCalMarkup _id}.main" tag).

Notice that the template contains a complete table structure inside of a <div> tag with id="{gCalMarkup _id}.mainTemplate.container" on lines 1 and 10. This is because the javascript process that creates copies of the template requires the copy to be a valid HTML hierarchy. The copying process copies the contents of the container, which must be valid HTML, and updates the copy with information from a calendar event. The contents of the template (the HTML element with the id="{gCalMarkup _id}.template" tag) are then transferred into the displayed table.

Finally, we still need to define the calendar itself as we did in the previous examples. In addition to changing the id and key to represent the new calendar, we also introduce a new parameter, maxDays. In the previous example we used maxResults to return only the first event. This time we're using maxDays=1000 to return all of the events in the next 1000 days:

{gCalDefine calendar id="f13"; key="n3kquhu5eqnd9u629gf7uphds7g9i2qe%40import.calendar.google.com" maxDays="1000"}

Last Updated on Sunday, 25 October 2009 15:15

More Articles...

«StartPrev1234Next End»

Page 1 of 4

Symmetric Designs and gCalMarkup are not affiliated with or endorsed by the Joomla Project or Open Source Matters. The Joomla logo is used under a limited license granted by Open Source Matters, the trademark holder in the United States and other countries. gCalMarkup is not supported or warranted by the Joomla Project or Open Source Matters.