Waiting for google calendar...

gCalMarkup can display several calendars together.  In this example we're going to build the running club example from the introduction to gCalMarkup page that displays these two running club calendars: race calendar, club events calendar.  We'll start with the same templates we had in the Tabular Calendar example except this time we need to define two calendars:

1. {gCalDefine calendar id="races" key="teel1p2f28q985gr9i9mod53sg%40group.calendar.google.com" maxDays="60" color="#0080D0"}
2. {gCalDefine calendar id="clubEvents" key="lp3dhso6sfsarckgcsto0uc1lc%40group.calendar.google.com" maxDays="60" color="#FF00FF"}

We're setting maxDays to 60 to keep the size down for this example as well as adding a new user parameter to each calendar, "color", so we can distinguish which calendar each event belongs to.

We also need to change the main template:

1. <div id="gCalMarkup.mainTemplate.container">
2.     <table>
3.         <tbody id="gCalMarkup.mainTemplate">
4.             <tr gCalMarkup.style.x="color:{gCalMarkup color}; background-color:{gcalmarkup select=#deca95|#feeab5};">
   
5.                 <td style="white-space: nowrap">{gCalMarkup _eventMonth}/{gCalMarkup _eventDay} {gCalMarkup _eventTime}</td>
6.                 <td>{gCalMarkup _eventTitle}</td>
7.             </tr>
8.         </tbody>
9.     </table>
10. </div>

Notice gCalMarkup.style.x and {gCalMarkup color} in line 4.  {gCalMarkup color} will be replaced with the "color" parameter from the {gCalDefine calendar} command when each event is displayed.  But, some browsers will not allow {gCalMarkup} tags in a style attribute.  To get around this browser restriction the parameter is named "gCalMarkup.style.x" instead of "style".  The "gCalMarkup" and "x" will be removed when the template is invoked and the {gCalMarkup ...} parameters are replaced.