Simple Tabular

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

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