Simultaneous Article Display

Friday 13th Calendar
Waiting for google calendar...
...
Friday 13th Calendar
Waiting for google calendar...
...
 

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: 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: 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.

{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}

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

{gCalDefine2 category id="grp1.f13."/} {gCalDefine2 group id="grp2" maxResults="4" /} {gCalDefine2 calendar id="grp2.f13" key="teel1p2f28q985gr9i9mod53sg%40group.calendar.google.com" maxDays="365" /} {gCalDefine2 category id="grp2.f13."/}
Friday 13th Calendar
Waiting for google calendar...
...
Friday 13th Calendar
Waiting for google calendar...
...
 

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] 2" 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 calendar):

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

{sdInclude "[gCalMarkupQS Tabular Simple] 2" /}
{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: 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 (left hand calendar):

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

{sdInclude "[gCalMarkupQS Tabular Simple] 2" /}
{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: 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] 2" article.  The text must be inserted using the HTML mode of your editor.

{gCalEnable2 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}
  {gCalDefine2 group id="{sdArg groupId/}" maxResults="{sdArg maxResults/}" /}
  {gCalDefine2 calendar
    id="{sdArg groupId/}.{sdArg calendarId/}"
    key="{sdArg calendarKey/}"
    maxDays="{sdArg maxDays/}"
  /}

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

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

{sdComment}
 ==================================================
 ======== Define the calendar category ========
 ==================================================
{/sdComment}
{gCalDefine2 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="{gCalMarkup2 _id/}.div.{sdArg groupId/}">
<div id="{gCalMarkup2 _id/}.nav.{sdArg groupId/}">
  <img
    title="Prev {sdArg maxDays/} days"
    src="plugins/content/gCalMarkup/images/arrow_left.png"
    onclick="{gCalMarkup2 _dateStartChanged {sdArg groupId/} -{sdArg maxDays/}/}" />
  <img
    title="Today"
    src="plugins/content/gCalMarkup/images/house.png"
    onclick="{gCalMarkup2 _dateStartChanged {sdArg groupId/} 0/}" />
  <img
    title="Next {sdArg maxDays/} days"
    src="plugins/content/gCalMarkup/images/arrow_right.png"
    onclick="{gCalMarkup2 _dateStartChanged {sdArg groupId/} {sdArg maxDays/}/}" />
</div>
<div style="text-align: center;">{sdArg title /}</div>
<table id="{gCalMarkup2 _id/}.table.{sdArg groupId/}">
  <tbody id="{gCalMarkup2 _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="{gCalMarkup2 _jURIRoot/}/plugins/content/gCalMarkup/images/logo-gCalMarkup.1-210x70-p25.png" style="height: 20px;" />
</a>
<div id="{gCalMarkup2 _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}{gCalEnable2 true/}

Race Calendar
Show:
Waiting for google calendar...
...

Quick Start: Large Tabular Multi-Calendar:

This Quick Start inserts events from several calendars at once in a large tabular format. There is a calendar drop-down so the calendar events can be filtered to show only one calendar at a time.

Usage:

  • Add the following text at the top of the article you wish to add the calendar to.

{sdEcho:childTagsOnly}
{sdInclude ./plugins/content/gCalMarkupV015/qs/[gCalMarkupQS-Setup]/}
{gCalDefine group id="grp1" maxResults="2" /}
{sdDefine style-table-grp1}border: 3px double gray;{/sdDefine}
{sdDefine style-rowA-grp1}background-color: #DECA95;{/sdDefine}
{sdDefine style-rowB-grp1}background-color: #FEEAB5;{/sdDefine}
{sdDefine style-month-grp1}text-align:center; font-size:larger; border-bottom:1px solid black;color:white; background-color:#135CAE{/sdDefine}
{sdComment} ======== Define each calendar ======== {/sdComment}
{sdMacro calendar grp1 r maxDays="7" /}
{sdMacro calendar grp1 le maxDays="7" /}
{sdMacro calendar grp1 gr maxDays="7" /}
{sdMacro calendar grp1 ce maxDays="7" /}
{sdMacro calendar grp1 bf maxDays="7" /}
{sdMacro calendar grp1 lm maxDays="7" /}
{sdMacro calendar grp1 rr maxDays="7" /}
{sdMacro calendar grp1 w maxDays="7" /}
{sdComment} ======== Define categories ======== {/sdComment}
{gCalDefine category id="grp1.r."/}
{gCalDefine category id="grp1.." title="All" style="color:black;"/}
{gCalDefine category id="grp1.le."/}
{gCalDefine category id="grp1.gr."/}
{gCalDefine category id="grp1.ce."/}
{gCalDefine category id="grp1.bf."/}
{gCalDefine category id="grp1.lm."/}
{gCalDefine category id="grp1.rr."/}
{gCalDefine category id="grp1.w."/}
{sdInclude [gCalMarkupQS-Navigation] /}
{sdInclude [gCalMarkupQS-Dropdown] /}
{sdInclude [gCalMarkupQS-Status] /}
{sdInclude [gCalMarkupQS-Tabular] grp1 /}
{/sdEcho}

  • Add the following text where you want the calendar to appear:
  • {sdMacro gCalMarkupQS-Tabular 7 grp1 "float:right; width:66%;" "Race Calendar" "color:#135CAE; font-weight:bold; font-size:1.5em;" /}

  • Note that the following line was also added to this example to limit the number of lines:
  • {gCalDefine group id="grp1" maxResults="2" /}



































    Race Calendar
    Show:
    Waiting for google calendar...
    ...

    Quick Start: Large Tabular Multi-Calendar:

    This Quick Start inserts all events from one calendar in a tabular format. There is a category drop-down so categories of events can be selected and there are no navigaction buttons because all the events in the calendar are intended to be displayed (so the entire calendar can be easily searched using the browser page search commands). Categories may be added and removed by changing the commands below. This Quick Start example displays a running club race calendar and displays several event tags as additional rows for each event. The Quick Start itself will need to be modified to add or change the event tags and how they are displayed. See the Quick Start Configuration page for more information.

    Usage:

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


    {gCalDefine group id="grp1" maxResults="2" /}
    {sdInclude ./plugins/content/gCalMarkupV015/qs/[gCalMarkupQS-Setup]/}
    {sdDefine style-table-grp1}border: 3px double gray;{/sdDefine}
    {sdDefine style-rowA-grp1}background-color: #DECA95;{/sdDefine}
    {sdDefine style-rowB-grp1}background-color: #FEEAB5;{/sdDefine}
    {sdDefine style-month-grp1}text-align:center; font-size:larger; border-bottom:1px solid black;color:white; background-color:#135CAE{/sdDefine}
    {sdMacro calendar grp1 r maxDays="999" /}
    {gCalDefine category id="grp1.." title="All" style="color:black;"/}
    {gCalDefine category id="grp1.r.series" title="Series Races" style="color:#FF8000;"/}
    {gCalDefine category id="grp1.r.local" title="Local Races" style="color:green;"/}
    {gCalDefine category id="grp1.r.kids" title="Kids" /}
    {gCalDefine category id="grp1.r.relay" title="Relays" /}
    {gCalDefine category id="grp1.r.trail" title="Trail Races" /}
    {gCalDefine category id="grp1.r.biathlon" title="Biathlons" /}
    {gCalDefine category id="grp1.r.triathlon" title="Triathlons" /}
    {gCalDefine category id="grp1.r.0M-1M" title="< 1M Races" /}
    {gCalDefine category id="grp1.r.1M" title=" 1M Races" /}
    {gCalDefine category id="grp1.r.1M-5K" title="> 1M < 5K Races" /}
    {gCalDefine category id="grp1.r.5K" title=" 5K Races" /}
    {gCalDefine category id="grp1.r.5K-5M" title="> 5K < 5M Races" /}
    {gCalDefine category id="grp1.r.5M" title=" 5M Races" /}
    {gCalDefine category id="grp1.r.5M-10K" title="> 5M <10K Races" /}
    {gCalDefine category id="grp1.r.10K" title="10K Races" /}
    {gCalDefine category id="grp1.r.10K-10M" title=">10K <10M Races" /}
    {gCalDefine category id="grp1.r.10M" title="10M Races" /}
    {gCalDefine category id="grp1.r.10M-half" title=">10M <13.1M Races" /}
    {gCalDefine category id="grp1.r.halfMarathon" title="13.1M (Half Marathons)" /}
    {gCalDefine category id="grp1.r.Half-Full" title=">13.1M <26.2M Races" /}
    {gCalDefine category id="grp1.r.fullMarathon" title="26.2M (Marathons)" /}
    {gCalDefine category id="grp1.r.ultra" title=">26.2M (Ultras)" /}
    {sdInclude [gCalMarkupQS-Dropdown] /}
    {sdInclude [gCalMarkupQS-Status] /}
    {sdInclude [gCalMarkupQS-Tabular] grp1 /}

    • and add the following text where you want the calendar to appear:

    {sdMacro gCalMarkupQS-Tabular 7 grp1 "float:right; width:66%;" "Race Calendar" "color:#135CAE; font-weight:bold; font-size:1.5em;" /}

    • Note that maxResults="2" will probably be increased (e.g. "999").

    Group Run Calendar
    Show:
    Waiting for google calendar...
    ...

    Quick Start: Tabular Calendar:

      This Quick Start inserts a selection of events from one calendar in a large tabular format, in this example the next two events from the coming 7 days are displayed. The main difference between this Quick Start and the simple tabular Quick Starts, is the description of each event is added as a seperate row instead of as a pop-up. This example displays upcoming events from the next week from a running club calendar.

      Usage:

      • This Quick Start is intended to allow different calendars to be added as easily as possible by an author.  Add the following line at the top of the article you wish to add the calendar to:

      {sdInclude ./plugins/content/gCalMarkupV015/qs/[gCalMarkupQS-Setup] /}

      • and add the following text where you want the calendar to appear:

      {sdMacro single-calendar gr "float:right; width:66%;" /}

      • The first argument to the sdInclude command, "gr", is the name of a calendar defined in the [gCalMarkupQS-Setup] article.
      • The second argument ("float:right; width:66%;") positions the calendar in this example and is optional.