Simultaneous Article Display
PDF Print E-mail
Show:
Race Calendar
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/gCalMarkupV014/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" /}
    Last Updated on Friday, 26 November 2010 22:13
     
    PDF Print E-mail
    Show:
    Race Calendar
    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:

    {sdEcho:childTagsOnly}
    {gCalDefine group id="grp1" maxResults="2" /}
    {sdInclude ./plugins/content/gCalMarkupV014/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 /}
    {/sdEcho}

    • 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").
    Last Updated on Saturday, 23 April 2011 23:54
     
    PDF Print E-mail

    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/gCalMarkupV014/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.
    Last Updated on Friday, 26 November 2010 22:14
     
    PDF Print E-mail

    Upcoming Events
    Waiting for google calendar...

    QuickStart - Simple Tabular - Multiple Calendars:

    This Quick Start is the same as the previous Simple Tabular Quick Start except four calendars are displayed together intead of one (note that the demo version of gCalMarkup is limited to a single calendar):

    Usage:

    • Paste the following text at the top of the article you wish to add the calendar to. Notice the additional key, calendar, and category lines. Also the width was increased:

    {sdEcho:childTagsOnly}
    {sdInclude ./plugins/content/gCalMarkupV014/qs/[gCalMarkupQS-Setup]/}
    {gCalDefine group id="grp1" maxResults="4" /}
    {sdDefine key-r}teel1p2f28q985gr9i9mod53sg@group.calendar.google.com{/sdDefine}
    {sdDefine key-le}vp2vlho2pa73qidpbggacrc778@group.calendar.google.com{/sdDefine}
    {sdDefine key-gr}dfs8kh1p372d3v3aqf5na94ohg@group.calendar.google.com{/sdDefine}
    {sdDefine key-ce}lp3dhso6sfsarckgcsto0uc1lc@group.calendar.google.com{/sdDefine}
    {sdMacro calendar grp1 r maxDays="7"/}
    {sdMacro calendar grp1 le maxDays="7"/}
    {sdMacro calendar grp1 gr maxDays="7"/}
    {sdMacro calendar grp1 ce maxDays="7"/}
    {gCalDefine category id="grp1.r."/}
    {gCalDefine category id="grp1.le."/}
    {gCalDefine category id="grp1.gr."/}
    {gCalDefine category id="grp1.ce."/}
    {sdDefine style-grp1}float:right; width:50%; margin:10px;{/sdDefine}
    {sdDefine style-table-grp1}border: 3px double gray;{/sdDefine}
    {sdDefine style-cell-grp1}white-space:nowrap;{/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}
    {sdDefine style-title-grp1}color:#135CAE; font-weight:bold;{/sdDefine}
    {sdInclude [gCalMarkupQS-Navigation] /}
    {sdInclude [gCalMarkupQS-Status] /}
    {sdInclude [gCalMarkupQS-Tabular-Simple] grp1/}
    {/sdEcho}

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

    {sdMacro gCalMarkupQS-Tabular-Simple grp1 7 "Upcoming Events" /}
    Last Updated on Friday, 26 November 2010 22:15
     
    PDF Print E-mail

    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:

     

    Usage:

    • To create the table on the right, paste the following text at the top of the article you wish to add the calendar to:

    {sdEcho:childTagsOnly}
    {sdInclude ./plugins/content/gCalMarkupV014/qs/[gCalMarkupQS-Setup]/}
    {gCalDefine group id="grp1" maxResults="4" /}
    {sdDefine key-f13}n3kquhu5eqnd9u629gf7uphds7g9i2qe@import.calendar.google.com{/sdDefine}
    {sdMacro calendar grp1 f13 maxDays="1000"/}
    {gCalDefine category id="grp1.f13."/}
    {sdDefine style-grp1}float:right; width:25%; margin:10px;{/sdDefine}
    {sdInclude [gCalMarkupQS-Navigation] /}
    {sdInclude [gCalMarkupQS-Status] /}
    {sdInclude [gCalMarkupQS-Tabular-Simple] grp1/}
    {/sdEcho}

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

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

    • At a minimum you will want to change the Google Calendar Key above so the calendar you are interested in is displayed. To do this replace current key ("n3kqu...@...google.com" in the in the {sdDefine key-f13} command) with the key from your calendar. See the Google Calendar page for information on finding your Google Calendar Key.
    • You may also want to change the following:
      • maxResults="4" indicates the maximum number of events to display in the table.
      • maxDays="1000" indicates the number of days of events to display.
      • "1000" in the sdMacro gCalMarkupQS-Tabular-Simple line directs the navigation buttons how many days to change by. (It will normally match the maxDays parameter.)
      • The "sdDefine style-grp1 line indicates how the entire group (the table, navigation buttons, and the title) should be styled. This can contain most CSS commands.
      • "Friday 13th Calendar" is the title of the calendar.
      • Remove the include status and/or navigation lines

    Usage (top left example):

    • To style the table to look like the table on the left, use the following text:

    {sdEcho:childTagsOnly}
    {sdInclude ./plugins/content/gCalMarkupV014/qs/[gCalMarkupQS-Setup]/}
    {gCalDefine group id="grp2" maxResults="4" /}
    {sdDefine key-f13}n3kquhu5eqnd9u629gf7uphds7g9i2qe@import.calendar.google.com{/sdDefine}
    {sdMacro calendar grp2 f13 maxDays="1000"/}
    {gCalDefine category id="grp2.f13."/}
    {sdDefine style-grp2}float:right; width:25%; margin:10px;{/sdDefine}
    {sdDefine style-table-grp2}border: 3px double gray;{/sdDefine}
    {sdDefine style-rowA-grp2}background-color: #DECA95;{/sdDefine}
    {sdDefine style-rowB-grp2}background-color: #FEEAB5;{/sdDefine}
    {sdDefine style-month-grp2}text-align:center; font-size:larger; border-bottom:1px solid black;color:white; background-color:#135CAE{/sdDefine}
    {sdDefine style-title-grp2}color:#135CAE; font-weight:bold;{/sdDefine}
    {sdInclude [gCalMarkupQS-Navigation] /}
    {sdInclude [gCalMarkupQS-Status] /}
    {sdInclude [gCalMarkupQS-Tabular-Simple] grp2/}
    {/sdEcho}

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

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

    • Four new style lines were added to define CSS styling for the table and the title. (Note that the group number was changed everywhere so that both examples could be displayed together on this page):
      • style-table-grp2 is the style for the table containing the events. (Don't confuse this with style-grp1 which styles the entire group)
      • style-rowA-grp2 & style-rowB-grp2 are alternating styles for each row of the table
      • style-month-grp2 is the style for each month header
      • style-title-grp2 is the style for the group title
    Last Updated on Tuesday, 26 October 2010 14:41
     
    More Articles...
    «StartPrev123NextEnd»

    Page 1 of 3
    Symmetric Designs is not affiliated with or endorsed by the Joomla Project or Open Source Matters. The Joomla logo is used under a limited license granted by Open Source Matters, the trademark holder in the United States and other countries. Symmetric Designs products are not supported or warranted by the Joomla Project or Open Source Matters.