fix: Various Calendar template fixes.

This commit is contained in:
Doug Bell 2006-12-12 00:20:52 +00:00
parent e618c03a50
commit d44fbcacca
9 changed files with 1246 additions and 8 deletions

View file

@ -14,6 +14,10 @@
- fix - Unable to add EventsCalendar
- fix - Some functions in InOutBoard not internationalized
- fix: Calendar/Event not handling gateway properly.
- fix: Calendar templates crushing other styles.
- fix: Using YUI to add the appropriate events when loading the Add/Edit Event
page. Should fix the strange IE bugs.
7.3.0

View file

@ -0,0 +1,271 @@
#CalendarDay00000000001
<tmpl_if admin>
<p><tmpl_var adminControls></p>
</tmpl_if>
<tmpl_if displayTitle>
<h1><tmpl_var title></h1>
</tmpl_if>
<tmpl_if description>
<p><tmpl_var description></p>
</tmpl_if>
<table cellspacing="0" cellpadding="0" width="600" id="mCAL">
<tr>
<td style="text-align:right">
<a href="<tmpl_var urlDay>" class="tab active">Day</a>
<a href="<tmpl_var urlWeek>" class="tab">Week</a>
<a href="<tmpl_var urlMonth>" class="tab">Month</a>
<a href="<tmpl_var urlSearch>" class="tab">Search</a>
<div class="controls">
<tmpl_if editor><a href="<tmpl_var urlAdd>">Add Event</a></tmpl_if>
<!--&bull; <a href="#">Print</a>
&bull; <a href="#">Subscribe</a>-->
</div>
</td>
</tr>
<tr>
<td class="months">
<div style="padding:3px 0px;">
<a href="<tmpl_var pagePrevUrl>" style="font-weight:bold;margin-right:8px;">&laquo; Previous Day
</a>&bull;
<span style="margin-right:8px;margin-left:8px;" class="monthLink current"><tmpl_var dayAbbr>, <tmpl_var monthAbbr> <tmpl_var dayOfMonth>. <tmpl_var year></span>&bull;
<a href="<tmpl_var pageNextUrl>" style="font-weight:bold;padding-left:8px">Next Day &raquo;</a>
</div>
</td>
</tr>
<tr>
<td>
<div class="curMonth">
<tmpl_var dayName>, <tmpl_var monthName> <tmpl_var dayOfMonth>, <tmpl_var year>
</div>
</td>
</tr>
<tr>
<td style="width:100%">
<table width="100%" cellspacing="2" cellpadding="0">
<tmpl_loop hours><tr>
<td class="heading">
<div style="padding:4px;"><tmpl_var hour12>:00<tmpl_var hourM></div>
</td>
<td class="day">
<ul class="eventList">
<tmpl_loop events><li>
<a href="/<tmpl_var eventUrl>"><tmpl_var eventTitle></a>
</tmpl_loop></li>
</ul>
</td>
</tr></tmpl_loop>
</table>
</td>
</tr>
</table>
~~~
<style type="text/css">
/* Edited with EditCSS */
/**** Inline STYLE-tag style sheet ****/
#mCAL * {
margin:0px;
}
#mCAL td {
font-size:10px;
font-family:arial;
}
#mCAL .tab {
border-bottom-style:none;
font-weight:bold;
padding: 2px 15px 0px 15px;
text-align;center;
background-color:#E9ECF3;
-moz-border-radius-topLeft:10px;
-moz-border-radius-topRight:10px;
color:#7588B5;
text-decoration:none;
font-size:10pt;
display:block;
float:left;
margin-right:5px;
}
#mCAL .tab:hover {
color:black;
}
#mCAL .active {
background-color:#DFE3EE;
color:#404F77;
border-bottom:solid #DFE3EE 1px;
}
#mCAL .controls {
float:right;
vertical-align:bottom;
}
#mCAL a {
font-size:11px;
color:#517AC8;
}
#mCAL .heading {
width:200px;
-moz-box-sizing:border-box;
background-color:#ABB7D1;
text-align:center;
font-weight:bold;
color:#374664;
font-size:9px;
letter-spacing:1px;
text-transform:uppercase;
text-align:right;
vertical-align:top;
-moz-border-radius-bottomRight:8px;
-moz-border-radius-topRight:8px;
}
#mCAL .day {
background-color:#E9ECF3;
width:400px;
position:relative;
vertical-align:top;
-moz-border-radius-topLeft:8px;
-moz-border-radius-bottomLeft:8px;
border:solid #CCD2E3 1px;
}
#mCAL .curDay {
background-color:#FFE4B3;
border-color:orange;
}
#mCAL .dayWrapper {
height:100%;
width:100%;
position:relative;
z-index:0;
margin:0px;
padding:0px 0px 2px 5px;;
-moz-box-sizing:border-box;
}
html > body #mCAL .dayWrapper {
height:auto;
min-height:100%;
}
#mCAL .dayNum {
width:100%;
text-align:right;
}
#mCAL span.border {
text-align:center;
padding:5px;
font-weight:bold;
-moz-border-radius-bottomRight:5px;
-moz-border-radius-topLeft:5px;
color:black;
border-right:solid #CCD2E3 1px;
border-bottom: solid #CCD2E3 1px;
background-color:#ABB7D1;
-moz-box-sizing:border-box;
top:5px;
position:relative;
}
#mCAL .curDay span.border {
background-color:orange;
color:black;
border-color:orange;
}
#mCAL .event {
padding:3px;
padding-top:8px;
clear:left;
font-weight:bold;
}
#mCAL .event a {
color:#4F4F4F;
text-decoration:none;
font-size:9px;
}
#mCAL .moreButton {
border-style:none;
z-index:5;
position:absolute;
bottom:0px;
width:100%;
height:9px;
background-color:#517AC8;
font-size:5px;
text-align:center;
}
#mCAL .moreButton:hover {
background-color:orange;
}
#mCAL .empty {
border-style:none;
background-color:#CCD2E3;
-moz-border-radius:10px;
}
#mCAL .months {
text-align:center;
background-color:#DFE3EE;
}
#mCAL .months a {
color:#517AC8;
text-decoration:none;
}
#mCAL .months .monthLink {
text-decoration:none;
padding-left:5px;
padding-right:5px;
color:#AAB8D5;
font-size:12px;
font-weight:bold;
}
#mCAL .months .current {
color:#517AC8;
}
#mCAL .current {
font-weight:bold;
color:#517AC8;
background-color:#fff;
-moz-border-radius:5px;
}
#mCAL .curMonth {
text-align:center;
margin: 2px 0px;
background-color:#517AC8;
color:white;
font-size:14px;
font-weight:bold;
}
/* MORE STYLES */
#more1 {
position:absolute;
top:170px;
left:10px;
}
* html #more1 {
top:158px;
left:12px;
}
.moreDisplay {
border:solid orange 1px;
border-top:solid orange 2px;
font-family:arial;
font-size:10px;
width:300px;
padding:2px;
background-color:#FFD3A8;
z-index:10;
}
ul.eventList {
margin:0px;
padding:0px;
margin-left:30px;
color:#526896;
}
</style>

View file

@ -0,0 +1,212 @@
#CalendarEvent000000001
<table cellspacing="0" cellpadding="0" width="600" id="mCAL" border="0">
<tr>
<td style="text-align:right;border-bottom:solid white 1px;">
<a href="<tmpl_var urlDay>" class="tab">Day</a>
<a href="<tmpl_var urlWeek>" class="tab">Week</a>
<a href="<tmpl_var urlMonth>" class="tab">Month</a>
<a href="<tmpl_var urlSearch>" class="tab">Search</a>
<div class="controls">
<a href="?func=edit">Edit</a> &bull; <a href="?func=delete">Delete</a>
</div>
</td>
</tr>
<tr>
<td class="months">
<div style="float: left;"><a href="<tmpl_var prevUrl>">&lt;&lt; Previous Event</a></div>
<div style="float: right;"><a href="<tmpl_var nextUrl>">Next Event &gt;&gt;</a></div>
</td>
</tr>
<tr>
<td class="months">
Event Details
</td>
</tr>
<tr>
<td style="width:100%">
<table width="100%" cellspacing="2" cellpadding="0">
<tr>
<td class="heading">
<div style="padding:4px;">Event Title</div>
</td>
<td class="day">
<div class="eventWrapper">
<tmpl_var title>
</div>
</td>
</tr>
<tr>
<td class="heading">
<div style="padding:4px;">Location</div>
</td>
<td class="day">
<div class="eventWrapper">
<tmpl_var location>
</div>
</td>
</tr>
<tr>
<td class="heading">
<div style="padding:4px;">Description</div>
</td>
<td class="day">
<div class="eventWrapper"><tmpl_var description></div>
</td>
</tr>
<tr>
<td class="heading">
<div style="padding:4px;">Scheduled</div>
</td>
<td class="day">
<div class="eventWrapper">
<tmpl_var startDateDayName>,
<tmpl_var startDateMonthName>
<tmpl_var startDateDayOfMonth>
<tmpl_var startDateHour>:<tmpl_var startDateMinute> <tmpl_var startDateM> &bull; <tmpl_var endDateDayName>,
<tmpl_var endDateMonthName>
<tmpl_var endDateDayOfMonth>
<tmpl_var endDateHour>:<tmpl_var endDateMinute> <tmpl_var endDateM>
</div>
</td>
</tr>
<tr>
<td class="heading">
<div style="padding:4px;">Related Material</div>
</td>
<td class="day"> <div class="eventWrapper"><tmpl_loop relatedLinks>
<a href="<tmpl_var link.url>"><tmpl_var linkUrl></a><br />
</tmpl_loop></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
~~~
<style type="text/css">
/* Edited with EditCSS */
/**** Inline STYLE-tag style sheet ****/
body * {
margin:0px;
}
#mCAL {
}
#mCAL td {
font-size:10px;
font-family:arial;
}
#mCAL .tab {
border-bottom-style:none;
font-weight:bold;
padding: 2px 15px 0px 15px;
text-align;center;
background-color:#E9ECF3;
-moz-border-radius-topLeft:10px;
-moz-border-radius-topRight:10px;
color:#7588B5;
text-decoration:none;
font-size:10pt;
display:block;
float:left;
margin-right:5px;
}
#mCAL .tab:hover {
color:black;
}
#mCAL .active {
background-color:#DFE3EE;
color:#404F77;
border-bottom:solid #DFE3EE 1px;
}
#mCAL a {
font-size:11px;
color:#517AC8;
}
#mCAL .heading {
width:200px;
-moz-box-sizing:border-box;
background-color:#ABB7D1;
text-align:center;
font-weight:bold;
color:#374664;
font-size:9px;
letter-spacing:1px;
text-transform:uppercase;
text-align:right;
vertical-align:top;
-moz-border-radius-bottomRight:8px;
-moz-border-radius-topRight:8px;
}
#mCAL .day {
background-color:#E9ECF3;
width:400px;
position:relative;
vertical-align:top;
-moz-border-radius-topLeft:8px;
-moz-border-radius-bottomLeft:8px;
border:solid #CCD2E3 1px;
}
#mCAL .months {
text-align:center;
background-color:#DFE3EE;
color:#3E4D75;
font-size:14px;
font-weight:bold;
}
#mCAL .months a {
color:#517AC8;
text-decoration:none;
}
#mCAL .months .monthLink {
text-decoration:none;
padding-left:5px;
padding-right:5px;
color:#AAB8D5;
font-size:12px;
font-weight:bold;
}
#mCAL .months .current {
color:#517AC8;
}
#mCAL .current {
font-weight:bold;
color:#517AC8;
background-color:#fff;
-moz-border-radius:5px;
}
#mCAL .curMonth {
text-align:center;
margin: 2px 0px;
background-color:#517AC8;
color:white;
font-size:14px;
font-weight:bold;
}
#mCAL .searchField {
margin: 2px 10px;
border:solid #ABB7D1 1px;
}
#mCAL .searchBtn {
background-color: #ABB7D1;
border:solid #CCD2E3 1px;
color:white;
font-weight:bold;
cursor:pointer;
}
#mCAL .eventWrapper {
margin:2px 10px;
}
</style>

View file

@ -0,0 +1,164 @@
#CalendarEventEdit00001
<tmpl_var formHeader>
<tmpl_if formErrors>
<h1>Errors!</h1>
<ul>
<tmpl_loop formErrors>
<li><tmpl_var message></li>
</tmpl_loop>
</ul>
</tmpl_if>
<table id="tabs" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="text-align:left;">
<a href="#" id="tab_event" onclick="toggleTab('event'); return false;" class="tab active">Event</a>
<a href="#" id="tab_recursion" onclick="toggleTab('recursion'); return false;" class="tab">Recurrence</a>
<tmpl_var formSave>
<tmpl_var formCancel>
</td>
</tr>
</table>
<!-- Event tab -->
<table id="event" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="border" style="text-align:left;width:700px">
<table cellpadding="2" style="margin:5px;">
<tr>
<td class="label" style="text-align:right">Event Title</td>
<td><tmpl_var formTitle></td>
</tr>
<tr>
<td class="label" style="text-align:right">Short Title</td>
<td><tmpl_var formMenuTitle></td>
</tr>
<tr>
<td class="label" style="text-align:right">Location</td>
<td><tmpl_var formLocation></td>
</tr>
<tr>
<td class="label" style="text-align:right;vertical-align:top">Description</td>
<td><tmpl_var formDescription></td>
</tr>
<tr>
<td class="label" style="text-align:right;vertical-align:top">Start Date</td>
<td><tmpl_var formStartDate></td>
</tr>
<tr>
<td class="label" style="text-align:right;vertical-align:top">End Date</td>
<td><tmpl_var formEndDate></td>
</tr>
<tr>
<td class="label" style="text-align:right;vertical-align:top">Time</td>
<td><tmpl_var formTime></td>
</tr>
<tr><td colspan="2">&nbsp;</td></tr>
<tr>
<td class="label" style="text-align:right;vertical-align:top;">Related Links</td>
<td><tmpl_var formRelatedLinks></td>
</tr>
</table>
</td>
</tr>
</table>
<table style="display: none; margin: 5px;" id="recursion" cellpadding="2" cellspacing="0" border="0">
<tr>
<td class="label" style="text-align:right;vertical-align:top">Recurrence Pattern</td>
<td><tmpl_var formRecurPattern></td>
</tr>
<tr>
<td class="label" style="text-align:right;vertical-align:top">Recurrence Range</td>
<td>
<p style="float: left; margin: 5px;">Start:</p>
<div style="float: left; margin: 5px;"><tmpl_var formRecurStart></div><br/>
<p style="float: left; clear: left; margin: 5px;">End:</p>
<div style="float: left; margin: 5px;"><tmpl_var formRecurEnd></div>
</td>
</tr>
<!--<tr>
<td class="label" style="text-align:right;vertical-align:top">Include Dates</td>
<td><tmpl_var formRecurInclude></td>
</tr>
<tr>
<td class="label" style="text-align:right;vertical-align:top">Exclude Dates</td>
<td><tmpl_var formRecurExclude></td>
</tr>-->
</table>
<tmpl_var formFooter>
<script type="text/javascript">
var old_tab = document.getElementById("event");
function toggleTab(id)
{
if (old_tab)
{
old_tab.style.display = "none";
document.getElementById("tab_"+old_tab.getAttribute("id")).className = "tab";
}
element = document.getElementById(id);
element.style.display = "block";
document.getElementById("tab_"+id).className = "tab active";
old_tab = element;
}
</script>
~~~
<script src="/extras/yui/build/yahoo/yahoo.js" type="text/javascript"></script>
<script src="/extras/yui/build/event/event.js" type="text/javascript"></script>
<script src="/extras/yui/build/dom/dom.js" type="text/javascript"></script>
<script src="/extras/yui/build/dragdrop/dragdrop.js" type="text/javascript"></script>
<script src="/extras/yui/build/logger/logger.js" type="text/javascript"></script>
<script src="/extras/yui-ext/yui-ext-core.js" type="text/javascript"></script>
<script src="/extras/yui-ext/resizable-lib.js" type="text/javascript"></script>
<link href="/extras/yui-ext/resources/css/resizable.css" rel="stylesheet" type="text/css" />
<script src="/extras/textFix.js" type="text/javascript"></script>
<script src="/extras/tinymce2/jscripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script src="/extras/tinymce2/jscripts/webgui.js" type="text/javascript"></script>
<script src="/extras/tabs/tabs.js" type="text/javascript"></script>
<style type="text/css">
body * {
margin:0px;
}
table td {
font-family:Arial;
font-size:10px;
}
#tabs a {
border:solid #F0F0F0 1px;
-moz-border-radius-topLeft: 20px;
-moz-border-radius-topRight: 20px;
font-weight:bold;
padding: 2px 15px 0px 15px;
text-align;center;
background-color:#FBFBFB;
border-top:solid #F0F0F0 2px;
color:#b0b0b0;
text-decoration:none;
font-size:10pt;
display:block;
float:left;
margin-right:5px;
}
#tabs a:hover {
color:black;
}
#tabs .active {
background-color:#F0F0F0;
color:#404040;
}
table a {
font-size:11px;
color:#447BFD;
}
input {
font-size:10px;
border:gray solid 1px;
background-color:#F0F0F0;
cursor:pointer;
}
</style>

View file

@ -0,0 +1 @@
#

View file

@ -0,0 +1,318 @@
#CalendarSearch00000001
<tmpl_if admin>
<p><tmpl_var adminControls></p>
</tmpl_if>
<tmpl_if displayTitle>
<h1><tmpl_var title></h1>
</tmpl_if>
<tmpl_if description>
<tmpl_var description>
</tmpl_if>
<tmpl_var form.header>
<table cellspacing="0" cellpadding="0" width="600" id="mCAL" border="0">
<tr>
<td style="text-align:right">
<a href="/<tmpl_var url>?type=day" class="tab">Day</a>
<a href="/<tmpl_var url>?type=week" class="tab">Week</a>
<a href="/<tmpl_var url>?type=month" class="tab">Month</a>
<a href="/<tmpl_var url>?func=search" class="tab active">Search</a>
</td>
</tr>
<tr>
<td class="months">
&nbsp;
</td>
</tr>
<tr>
<td style="width:100%">
<table width="100%" cellspacing="2" cellpadding="0">
<tr>
<td class="heading">
<div style="padding:4px;">Keyword</div>
</td>
<td class="day"> <tmpl_var form.keywords>
</td>
</tr>
<tr>
<td class="heading">
<div style="padding:4px;">Start Date</div>
</td>
<td class="day"> <tmpl_var form.startDate>
</td>
</tr>
<tr>
<td class="heading">
<div style="padding:4px;">End Date</div>
</td>
<td class="day"> <tmpl_var form.endDate>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="text-align:right">
<tmpl_var form.submit>
</td>
</tr>
</table>
<tmpl_var form.footer>
<tmpl_if results>
<table cellspacing="0" cellpadding="0" width="600" id="mCAL">
<tr>
<td>
<div class="curMonth">
Search Results
<span style="font-size:9px;">Displaying page <tmpl_var pagination.pageCount> of <tmpl_var pagination.pageCount></span>
</div>
</td>
</tr>
<tr>
<td class="months">
<div style="padding:3px 0px;">
<tmpl_var pagination.firstPage>
<tmpl_var pagination.pageList>
<tmpl_var pagination.lastPage>
</div>
</td>
</tr>
<tr>
<td style="width:100%">
<table width="100%" cellspacing="2" cellpadding="0">
<tmpl_loop results><tr>
<td class="heading">
<div style="padding:4px;"><tmpl_var startDate></div>
</td>
<td class="day">
<a href="/<tmpl_var url>" style="padding-left:10px"><tmpl_var title></a>
</td>
</tr></tmpl_loop>
</table>
</td>
</tr>
<tr>
<td class="months">
<div style="padding:3px 0px;">
<tmpl_var pagination.firstPage>
<tmpl_var pagination.pageList>
<tmpl_var pagination.lastPage>
</div>
</td>
</tr>
</table>
</tmpl_if>
~~~
<style type="text/css">
body * {
margin:0px;
}
#mCAL {
}
#mCAL td {
font-size:10px;
font-family:arial;
}
#mCAL .tab {
border-bottom-style:none;
font-weight:bold;
padding: 2px 15px 0px 15px;
text-align;center;
background-color:#E9ECF3;
-moz-border-radius-topLeft:10px;
-moz-border-radius-topRight:10px;
color:#7588B5;
text-decoration:none;
font-size:10pt;
display:block;
float:left;
margin-right:5px;
}
#mCAL .tab:hover {
color:black;
}
#mCAL .active {
background-color:#DFE3EE;
color:#404F77;
border-bottom:solid #DFE3EE 1px;
}
#mCAL .controls {
float:right;
vertical-align:bottom;
}
#mCAL a {
font-size:11px;
color:#517AC8;
}
#mCAL .heading {
width:200px;
-moz-box-sizing:border-box;
background-color:#ABB7D1;
text-align:center;
font-weight:bold;
color:#374664;
font-size:9px;
letter-spacing:1px;
text-transform:uppercase;
text-align:right;
vertical-align:top;
-moz-border-radius-bottomRight:8px;
-moz-border-radius-topRight:8px;
}
#mCAL .day {
background-color:#E9ECF3;
width:400px;
position:relative;
vertical-align:top;
-moz-border-radius-topLeft:8px;
-moz-border-radius-bottomLeft:8px;
border:solid #CCD2E3 1px;
}
#mCAL .curDay {
background-color:#FFE4B3;
border-color:orange;
}
#mCAL .dayWrapper {
height:100%;
width:100%;
position:relative;
z-index:0;
margin:0px;
padding:0px 0px 2px 5px;;
-moz-box-sizing:border-box;
}
html > body #mCAL .dayWrapper {
height:auto;
min-height:100%;
}
#mCAL .dayNum {
width:100%;
text-align:right;
}
#mCAL span.border {
text-align:center;
padding:5px;
font-weight:bold;
-moz-border-radius-bottomRight:5px;
-moz-border-radius-topLeft:5px;
color:black;
border-right:solid #CCD2E3 1px;
border-bottom: solid #CCD2E3 1px;
background-color:#ABB7D1;
-moz-box-sizing:border-box;
top:5px;
position:relative;
}
#mCAL .curDay span.border {
background-color:orange;
color:black;
border-color:orange;
}
#mCAL .event {
padding:3px;
padding-top:8px;
clear:left;
font-weight:bold;
}
#mCAL .event a {
color:#4F4F4F;
text-decoration:none;
font-size:9px;
}
#mCAL .moreButton {
border-style:none;
z-index:5;
position:absolute;
bottom:0px;
width:100%;
height:9px;
background-color:#517AC8;
font-size:5px;
text-align:center;
}
#mCAL .moreButton:hover {
background-color:orange;
}
#mCAL .empty {
border-style:none;
background-color:#CCD2E3;
-moz-border-radius:10px;
}
#mCAL .months {
text-align:center;
background-color:#DFE3EE;
}
#mCAL .months a {
color:#517AC8;
text-decoration:none;
}
#mCAL .months .monthLink {
text-decoration:none;
padding-left:5px;
padding-right:5px;
color:#AAB8D5;
font-size:12px;
font-weight:bold;
}
#mCAL .months .current {
color:#517AC8;
}
#mCAL .current {
font-weight:bold;
color:#517AC8;
background-color:#fff;
-moz-border-radius:5px;
}
#mCAL .curMonth {
text-align:left;
margin: 2px 0px;
background-color:#517AC8;
color:white;
font-size:14px;
font-weight:bold;
}
/* MORE STYLES */
#more1 {
position:absolute;
top:170px;
left:10px;
}
* html #more1 {
top:158px;
left:12px;
}
.moreDisplay {
border:solid orange 1px;
border-top:solid orange 2px;
font-family:arial;
font-size:10px;
width:300px;
padding:2px;
background-color:#FFD3A8;
z-index:10;
}
ul.eventList {
margin:0px;
padding:0px;
margin-left:30px;
color:#526896;
}
</style>

View file

@ -0,0 +1,263 @@
#CalendarWeek0000000001
<tmpl_if admin>
<p><tmpl_var adminControls></p>
</tmpl_if>
<tmpl_if displayTitle>
<h1><tmpl_var title></h1>
</tmpl_if>
<tmpl_if description>
<tmpl_var description>
</tmpl_if>
<table cellspacing="0" cellpadding="0" width="600" id="mCAL">
<tr>
<td style="text-align:right">
<a href="<tmpl_var urlDay>" class="tab">Day</a> <a href="<tmpl_var urlWeek>" class="tab active">Week</a> <a href="<tmpl_var urlMonth>" class="tab">Month</a> <a href="<tmpl_var urlSearch>" class="tab">Search</a>
<div class="controls">
<a href="<tmpl_var urlAdd>">Add Event</a> <!--&bull; <a href="#">Print</a> &bull; <a href="#">Subscribe</a>-->
</div>
</td>
</tr>
<tr>
<td class="months">
<div style="padding:3px 0px;">
<a href="<tmpl_var pagePrevUrl>" style="font-weight:bold;margin-right:8px;">&laquo; Previous Week
</a>&bull;
<a href="#" onclick="return false;" style="margin-right:8px;margin-left:8px;" class="monthLink current"><tmpl_var startMonthAbbr> <tmpl_var startDayOfMonth> <tmpl_var startYear>&nbsp;&nbsp;-&nbsp;&nbsp;<tmpl_var endMonthAbbr> <tmpl_var endDayOfMonth> <tmpl_var endYear></a>&bull;
<a href="<tmpl_var pageNextUrl>" style="font-weight:bold;padding-left:8px">Next Week &raquo;</a>
</div>
</td>
</tr>
<tr>
<td>
<div class="curMonth">
<tmpl_var startMonthName> <tmpl_var startDayOfMonth>, <tmpl_var startYear> to <tmpl_var endMonthName> <tmpl_var endDayOfMonth>, <tmpl_var endYear>
</div>
</td>
</tr>
<tr>
<td style="width:100%">
<table width="100%" cellspacing="2" cellpadding="0">
<tmpl_loop days><tr>
<td class="heading">
<div style="padding:4px;"><tmpl_var dayName></div>
</td>
<td class="day<tmpl_if dayCurrent> curDay</tmpl_if>">
<span class="border"><tmpl_var dayOfMonth></span>
<ul class="eventList"><tmpl_loop events>
<li><a href="<tmpl_var eventUrl>"><tmpl_var eventTitle></a></li>
</tmpl_loop></ul>
<br />
</td>
</tr></tmpl_loop>
</table>
</td>
</tr>
</table>
~~~
<style type="text/css">
#mCAL * {
/*margin:0px;*/
}
#mCAL td {
font-size:10px;
font-family:arial;
}
#mCAL .tab {
border-bottom-style:none;
font-weight:bold;
padding: 2px 15px 0px 15px;
text-align;center;
background-color:#E9ECF3;
-moz-border-radius-topLeft:10px;
-moz-border-radius-topRight:10px;
color:#7588B5;
text-decoration:none;
font-size:10pt;
display:block;
float:left;
margin-right:5px;
}
#mCAL .tab:hover {
color:black;
}
#mCAL .active {
background-color:#DFE3EE;
color:#404F77;
border-bottom:solid #DFE3EE 1px;
}
#mCAL .controls {
float:right;
vertical-align:bottom;
}
#mCAL a {
font-size:11px;
color:#517AC8;
}
#mCAL .heading {
width:200px;
-moz-box-sizing:border-box;
background-color:#ABB7D1;
text-align:center;
font-weight:bold;
color:#374664;
font-size:9px;
letter-spacing:1px;
text-transform:uppercase;
text-align:right;
vertical-align:top;
-moz-border-radius-bottomRight:8px;
-moz-border-radius-topRight:8px;
}
#mCAL .day {
background-color:#E9ECF3;
width:400px;
position:relative;
vertical-align:top;
-moz-border-radius-topLeft:8px;
-moz-border-radius-bottomLeft:8px;
border:solid #CCD2E3 1px;
}
#mCAL .curDay {
background-color:#FFE4B3;
border-color:orange;
}
#mCAL .dayWrapper {
height:100%;
width:100%;
position:relative;
z-index:0;
margin:0px;
padding:0px 0px 2px 5px;;
-moz-box-sizing:border-box;
}
html > body #mCAL .dayWrapper {
height:auto;
min-height:100%;
}
#mCAL .dayNum {
width:100%;
text-align:right;
}
#mCAL span.border {
text-align:center;
padding:5px;
font-weight:bold;
-moz-border-radius-bottomRight:5px;
-moz-border-radius-topLeft:5px;
color:black;
border-right:solid #CCD2E3 1px;
border-bottom: solid #CCD2E3 1px;
background-color:#ABB7D1;
-moz-box-sizing:border-box;
top:5px;
position:relative;
}
#mCAL .curDay span.border {
background-color:orange;
color:black;
border-color:orange;
}
#mCAL .event {
padding:3px;
padding-top:8px;
clear:left;
font-weight:bold;
}
#mCAL .event a {
color:#4F4F4F;
text-decoration:none;
font-size:9px;
}
#mCAL .moreButton {
border-style:none;
z-index:5;
position:absolute;
bottom:0px;
width:100%;
height:9px;
background-color:#517AC8;
font-size:5px;
text-align:center;
}
#mCAL .moreButton:hover {
background-color:orange;
}
#mCAL .empty {
border-style:none;
background-color:#CCD2E3;
-moz-border-radius:10px;
}
#mCAL .months {
text-align:center;
background-color:#DFE3EE;
}
#mCAL .months a {
color:#517AC8;
text-decoration:none;
}
#mCAL .months .monthLink {
text-decoration:none;
padding-left:5px;
padding-right:5px;
color:#AAB8D5;
font-size:12px;
font-weight:bold;
}
#mCAL .months .current {
color:#517AC8;
}
#mCAL .current {
font-weight:bold;
color:#517AC8;
background-color:#fff;
-moz-border-radius:5px;
}
#mCAL .curMonth {
text-align:center;
margin: 2px 0px;
background-color:#517AC8;
color:white;
font-size:14px;
font-weight:bold;
}
/* MORE STYLES */
#more1 {
position:absolute;
top:170px;
left:10px;
}
* html #more1 {
top:158px;
left:12px;
}
.moreDisplay {
border:solid orange 1px;
border-top:solid orange 2px;
font-family:arial;
font-size:10px;
width:300px;
padding:2px;
background-color:#FFD3A8;
z-index:10;
}
ul.eventList {
margin:0px;
padding:0px;
margin-left:50px;
color:#526896;
}
</style>