Simultaneous Article Display

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