Print

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

 

Usage (right hand table):

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

 

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

 

Usage (top left table):

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

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