Simultaneous Article Display

{gCalDefine group id="grp1" maxResults="4" /} {gCalDefine calendar id="grp1.f13" key="n3kquhu5eqnd9u629gf7uphds7g9i2qe%40import.calendar.google.com" maxDays="365" /}

{gCalDefine category id="grp1.f13."/} {gCalDefine group id="grp2" maxResults="4" /} {gCalDefine calendar id="grp2.f13" key="n3kquhu5eqnd9u629gf7uphds7g9i2qe%40import.calendar.google.com" maxDays="365" /} {gCalDefine category id="grp2.f13."/}  

QuickStart - Simple Tabular Calendar:

This Quick Start creates a simple list of events from one or more calendars in a tabular format. The details of each event appear in a pop-up when the user hovers over them. Navigation icons are displayed in the upper left to move forward and backwards in the calendar. Two examples appear to the right:

 

Installation

• Create a new article titled "[gCalMarkupQS Tabular Simple]" and insert the text from the bottom of the page.  The text must be inserted using the HTML mode of your editor.

 

Usage (right hand table):

• Paste the following text at the top of the article you wish to add the calendar to:

{sdInclude "[gCalMarkupQS Tabular Simple]" /}
{sdMacro defineCalendar grp1 f13 365 4 n3kquhu5eqnd9u629gf7uphds7g9i2qe%40import.calendar.google.com /}
{sdMacro addStyle grp1 div "float:right; width:25%; margin:10px;" /}
{sdMacro addStyle grp1 table "border-collapse:collapse; border: 3px solid gray;" /}

• • Change the Google Calendar Key above so the calendar you are interested in is displayed. To do this replace the calendar key ("n3kq...google.com" in the defineCalendar macro with the key from your calendar. See the Google Calendar page for information on finding your Google Calendar Key.
  • Change "365" to the number of days to retreive from the calendar
  • Change "4" to the maximum number of events to display

 

• Add the following text where you want the calendar to appear:

{sdMacro gCalMarkupQS-Tabular-Simple grp1 365 "Friday 13th Calendar" /}

• • Change "365" to the number of days the navigations buttons should advance by
  • Change "Friday 13th Calendar" to the title of your calendar.

 

Usage (top left table):

• Paste the following text at the top of the article you wish to add the calendar to:

{sdInclude "[gCalMarkupQS Tabular Simple]" /}
{sdMacro defineCalendar grp2 f13 365 4 n3kquhu5eqnd9u629gf7uphds7g9i2qe%40import.calendar.google.com /}
{sdMacro addStyle grp2 div "float:right; width:25%; margin:10px;" /}
{sdMacro addStyle grp2 table "border-collapse:collapse; border: 3px double gray;" /}
{sdMacro addStyle grp2 table "text-align:center; font-size:larger; border-bottom:1px solid black;color:white; background-color:#135CAE" .monthHeader /}
{sdMacro addStyle grp2 table "background-color:rgba(0,255,255,.5);" .rowA /}
{sdMacro addStyle grp2 table "background-color:rgba(0,255,255,.3);" .rowB /}

• Three new style lines were added to define CSS styling (Note that the group name was changed to grp2 so that both examples could be displayed together on this page):
  • The row ending with .monthHeader styles the month rows
  • The rows ending with .rowA and .rowB style the alternating rows of the table

• Add the following text where you want the calendar to appear:

{sdMacro gCalMarkupQS-Tabular-Simple grp2 365 "Friday 13th Calendar" /}

 

[gCalMarkupQS Tabular] contents:

The following is the contents of the "[gCalMarkupQS Tabular Simple]" article.  The text must be inserted using the HTML mode of your editor.

{gCalEnable false/}{sdComment}
 =======================================================
 ================ Define the defineCalendar macro ==================
 =======================================================

 ======== Arguments ========================================
 == sdArg groupId - the name of the calendar group
 == sdArg calendarId - the name of the calendar
 == sdArg calendarKey - the google key for the calendar =======================================================
{/sdComment}

{sdDefine defineCalendar groupId calendarId maxDays maxResults calendarKey}
  {gCalDefine group id="{sdArg groupId/}" maxResults="{sdArg maxResults/}" /}
  {gCalDefine calendar
    id="{sdArg groupId/}.{sdArg calendarId/}"
    key="{sdArg calendarKey/}"
    maxDays="{sdArg maxDays/}"
  /}

{sdComment}
 =====================================================
 ======== Define the calendar template ==========
 =====================================================
 {/sdComment}
<div id="{gCalMarkup _id/}.mainTemplate.container.{sdArg groupId/}" style="display: none">
  <table>
    <tbody id="{gCalMarkup _id/}.mainTemplate.{sdArg groupId/}">
      <tr class="{gCalMarkup select=rowA|rowB /}">
        <td>{gCalMarkup _eventDayTextShort/} {gCalMarkup _eventMonth/}/{gCalMarkup _eventDay/} {gCalMarkup _eventTime/}</td>
        <td>{gCalMarkup _eventTitle/}</td>
      </tr>
    </tbody>
  </table>
</div>

{sdComment}
 ==================================================
 ======== Define the month header template ========
 ==================================================
{/sdComment}
<div id="{gCalMarkup _id/}.monthTemplate.container.{sdArg groupId/}" style="display: none">
  <table>
    <tbody id="{gCalMarkup _id/}.monthTemplate.{sdArg groupId/}">
      <tr class="monthHeader">
        <td colspan="2">{gCalMarkup _eventMonthText/} {gCalMarkup _eventYear/}</td>
      </tr>
    </tbody>
  </table>
</div>

{sdComment}
 ==================================================
 ======== Define the calendar category ========
 ==================================================
{/sdComment}
{gCalDefine category id="{sdArg groupId/}.{sdArg calendarId/}."/}

{/sdDefine}

{sdComment}
 ======== Define a macro to insert a simple calendar ========
{/sdComment}
{sdDefine gCalMarkupQS-Tabular-Simple groupId maxDays title}
<div id="{gCalMarkup _id/}.div.{sdArg groupId/}">
<div id="{gCalMarkup _id/}.nav.{sdArg groupId/}">
  <img
    title="Prev {sdArg maxDays/} days"
    src="plugins/content/gCalMarkup{gCalMarkup _version/}/images/arrow_left.png"
    onclick="{gCalMarkup _dateStartChanged {sdArg groupId/} -{sdArg maxDays/}/}" />
  <img
    title="Today"
    src="plugins/content/gCalMarkup{gCalMarkup _version/}/images/house.png"
    onclick="{gCalMarkup _dateStartChanged {sdArg groupId/} 0/}" />
  <img
    title="Next {sdArg maxDays/} days"
    src="plugins/content/gCalMarkup{gCalMarkup _version/}/images/arrow_right.png"
    onclick="{gCalMarkup _dateStartChanged {sdArg groupId/} {sdArg maxDays/}/}" />
</div>
<div style="text-align: center;">{sdArg title /}</div>
<table id="{gCalMarkup _id/}.table.{sdArg groupId/}">
  <tbody id="{gCalMarkup _id/}.main.{sdArg groupId/}">
    <tr>
      <td class="rowA">Waiting for google calendar...</td>
    </tr>
  </tbody>
</table>
<a style="float: right;" alt="gCalMarkupLogo" title="Powered by gCalMarkup" href="http://symmetricdesigns.com/joomla-extensions/gcalmarkup.html">
  <img src="{gCalMarkup _jURIRoot/}/plugins/content/gCalMarkup{gCalMarkup _version /}/images/logo-gCalMarkup.1-210x70-p25.png" style="height: 20px;" />
</a>
<div id="{gCalMarkup _id/}.status.{sdArg groupId/}">...</div>
</div>
{/sdDefine}

{sdComment}
 ====================================================
 ======== Define a macro to add styles ========
 ====================================================
 ( #123 and #125 entities are curly braces - needed to pass in sdArg 2 )
 ( decodeEntities converts back to braces)
{/sdComment}
{sdDefine addStyle groupId name style extra}
  {sdStyle:decodeEntities "{sdArg groupId/}" "{sdArg name/}" "{sdArg style/}" "{sdArg extra/}"}[id^="gCalMarkup"][id*="\.{sdArg 1/}\.{sdArg 0/}"] {sdArg 3/} &#123;{sdArg 2/}&#125;{/sdStyle}
{/sdDefine}
{gCalEnable true/}

{gCalDefine calendar key="6hmji7d389ho5eavfq817fgtmlcg7iur%40import.calendar.google.com" maxResults="1"/} {gCalMarkup _eventTitle/}

This is a test of this gCalMarkup Quick Start. The next event from this numerology calendar is Waiting for Google.... The event title in the previous sentence was inserted by gCalMarkup.

Quick Start: Events As In-Line Text

This Quick Start inserts the title from the next event on a Google Calendar as in-line text. In the paragraph to the right, the title of the event at the end of the 2nd sentence was extracted from the referenced Google Calendar and inserted in the paragraph.

Installation

• Create a new article titled "[gCalMarkupQS In Line]" and insert the text from the bottom of the page.  The text must be inserted using the HTML mode of your editor.

Usage:

 

• Add the following line at the top of the article you wish to add the event text to:

{sdInclude "[gCalMarkupQS In Line]" 6hmji7d389ho5eavfq817fgtmlcg7iur%40import.calendar.google.com /}

Replace "6hmji7d38.....google.com" in the text above with the Google Calendar Id of the calendar you wish the event information to come from. The id above is for the calendar used in the test above. See the tutorial for instructions for finding the Google Calendar Id.

 

• Add the following text in-line where you want the event text to appear:

{sdMacro gCalMarkupQS-In-Line/}

 

[gCalMarkupQS In Line] contents:

The following is the contents of the "[gCalMarkupQS In Line]" article.  The text must be inserted using the HTML mode of your editor.

{gCalEnable false/}{sdComment}
  ======== Arguments to [gCalMarkupQS-In-Line] ========
  ==  sdArg 1 - Google Calendar key
  ===============================================================
{/sdComment}

{sdComment} ======== Define the calendar ======== {/sdComment}
{gCalDefine calendar key="{sdArg 1/}" maxResults="1"/}

{sdComment} ======== Define the event template ======== {/sdComment}
<span id="{gCalMarkup _id/}.mainTemplate" style="display: none">{gCalMarkup _eventTitle/}</span>

{sdComment} ======== Define a macro to insert the event text ======== {/sdComment}
{sdDefine gCalMarkupQS-In-Line}<span id="{gCalMarkup _id/}.main">Waiting for Google...</span>{/sdDefine}
{gCalEnable true/}

 

 

This section is intended to get you started using gCalMarkup as quickly as possible.

1. Download gCalMarkup and sdMacros from the download area.
2. Install both gCalMarkup and sdMacros using the instructions on the installation page.  (While sdMacros is not required for gCalMarkup, it is recommended and is required for these Quick Starts).
3. Go to the plugin manager in the Joomla! administrator and enable both gCalMarkup and sdMacros.
4. Important: make sure the sdMacros extension is before the gCalMarkup extension in the plugin list.  This insures that any macros used will run before any gCalMarkup commands.
5. Choose one of the Quick Starts from the menu on the left.  Each Quick Start contains one or more blocks of gCalMarkup and sdMacros commands that can be pasted into an article.  Follow the instructions on each Quick Start page.
6. Important: Most of the Quick Starts must be pasted into Joomla articles using the HTML mode of the editor you are using.  This is because the Quick Starts may contain HTML which will be corrupted by the pasting process if you are not in HTML mode.  Another option is to set your editor to "None" which will give you a default HTML only editor.  

 

{gCalEnable false/}

The gCalMarkup Quick Starts include other articles to make them more modular. All of the Quick Starts, and the articles they include, are listed here. They are also included in the gCalMarkup installation as files so they can be used without creation of Joomla articles. But, if any changes are made, it is best to copy the file into a Joomla article before changes are made. If the name of the article is kept the same as the names listed here, it will override the default file. Note that all of these articles should be created in HTML mode of whatever Joomla editor is used. While some will work either way, much of the HTML will break if added in normal editing mode. Please see the section on Joomla editors in the Reference Manual for more information.

• Top Level Quick Starts:
  • In-Line: [gCalMarkupQS-In-Line]
  • Tabular-Simple: [gCalMarkupQS-Tabular-Simple]
  • Tabular: [gCalMarkupQS-Tabular]

• Templates
  • Simple Template: [gCalMarkupQS-Template-Simple]
  • Large Template: [gCalMarkupQS-Template-Large]
  • Month Template: [gCalMarkupQS-Template-Month]
  • Select Template: [gCalMarkupQS-Template-Select]

• Misc:
  • Categories-Races: [gCalMarkupQS-Categories-Races]
  • Dropdown: [gCalMarkupQS-Dropdown]
  • Key: [gCalMarkupQS-Key]
  • Navigation: [gCalMarkupQS-Navigation]
  • Setup: [gCalMarkupQS-Setup]
  • Status: [gCalMarkupQS-Status]
  • Table: [gCalMarkupQS-Table]
  • Tooltips: [gCalMarkupQS-Tooltips]

 

In-Line: [gCalMarkupQS-In-Line]:

• This is the top level include for the In-Line Text quick start.

{sdComment}
  $Id: [gCalMarkupQS-In-Line] 97 2010-10-23 03:09:47Z dgd $
  ======== Arguments to [gCalMarkupQS-In-Line] ========
  ==  sdArg 1 - Google Calendar key
  ===============================================================
{/sdComment}

{sdComment} ======== Define the calendar ======== {/sdComment}
{gCalDefine calendar key="{sdArg 1/}" maxResults="1"/}

{sdComment} ======== Define the event template ======== {/sdComment}
<span id="{gCalMarkup _id/}.mainTemplate" style="display: none">
  {gCalMarkup _eventTitle/} on
  {gCalMarkup _eventMonth/}/{gCalMarkup _eventDay/}/{gCalMarkup _eventYear/}
</span>

{sdComment} ======== Define a macro to insert the event text ======== {/sdComment}
{sdDefine gCalMarkupQS-In-Line}
  <span id="{gCalMarkup _id/}.main">Waiting for Google...</span>
{/sdDefine}

The above text must be inserted using the HTML mode of your editor.

 

Tabular Simple: [gCalMarkupQS-Tabular-Simple]:

• This is the top level include for the Simple Tabular quick start.

{gCalEnable 0/}SDMACROS_ERROR_ARTICLE_NOT_FOUND{gCalEnable 1/}

 

Tabular: [gCalMarkupQS-Tabular]:

• This is the top level include for the Tabular quick start.

{gCalEnable 0/}SDMACROS_ERROR_ARTICLE_NOT_FOUND{gCalEnable 1/}

 

Simple Template: [gCalMarkupQS-Template-Simple]:

• This is the template for the Simple Tabular quick start.

{gCalEnable 0/}SDMACROS_ERROR_ARTICLE_NOT_FOUND{gCalEnable 1/}

 

Template: [gCalMarkupQS-Template-Large]:

• This is the top level include for the Tabular quick start.

{gCalEnable 0/}SDMACROS_ERROR_ARTICLE_NOT_FOUND{gCalEnable 1/}

 

Month Template: [gCalMarkupQS-Template-Month]:

• This is the month template used for the tabular quick starts.

{gCalEnable 0/}SDMACROS_ERROR_ARTICLE_NOT_FOUND{gCalEnable 1/}

 

Select Template: [gCalMarkupQS-Template-Select]:

• This is the select template used for the tabular quick starts that contain a drop-down.

{gCalEnable 0/}SDMACROS_ERROR_ARTICLE_NOT_FOUND{gCalEnable 1/}

 

Race Categories: [gCalMarkupQS-Categories-Races]:

• This include contains the categories used for the running club race calendar example.

{gCalEnable 0/}SDMACROS_ERROR_ARTICLE_NOT_FOUND{gCalEnable 1/}

 

Dropdown: [gCalMarkupQS-Dropdown]:

• This is the ???Diff between this and Select?.

{gCalEnable 0/}SDMACROS_ERROR_ARTICLE_NOT_FOUND{gCalEnable 1/}

 

Key: [gCalMarkupQS-Key]:

• The calendar key for the running club calendar example.

{gCalEnable 0/}SDMACROS_ERROR_ARTICLE_NOT_FOUND{gCalEnable 1/}

 

Navigation: [gCalMarkupQS-Navigation]:

• This article contains the HTML to display navigation icons for a calendar group. Create an article titled "[gCalMarkupQS-Navigation]" and add the following text in HTML mode.

{gCalEnable 0/}SDMACROS_ERROR_ARTICLE_NOT_FOUND{gCalEnable 1/}

 

Setup: [gCalMarkupQS-Setup]:

• This article contains the Google Calendar IDs for each calendar used as well as formatting information for each one. This article will normally need to be edited to add the actual Google Calendar IDs for the calendars you wish to use. Please see the section on Google Calendar IDs in the reference manual for more information. Create an article titled "[gCalMarkupQS-Setup]" and add the following text in HTML mode.

{gCalEnable 0/}SDMACROS_ERROR_ARTICLE_NOT_FOUND{gCalEnable 1/}

 

Status: [gCalMarkupQS-Status]:

• This article contains the HTML to display a status line for a calendar group. Create an article titled "[gCalMarkupQS-Status]" and add the following text in HTML mode.

{gCalEnable 0/}SDMACROS_ERROR_ARTICLE_NOT_FOUND{gCalEnable 1/}

 

Table: [gCalMarkupQS-Table]:

• This article contains the table used in the tabular quick starts.

{gCalEnable 0/}SDMACROS_ERROR_ARTICLE_NOT_FOUND{gCalEnable 1/}

 

Tooltips: [gCalMarkupQS-Tooltips]:

• This article contains the HTML and CSS used to create tooltips in the tabular quick starts.

{gCalEnable 0/}SDMACROS_ERROR_ARTICLE_NOT_FOUND{gCalEnable 1/}