410 lines
9.3 KiB
Cheetah
410 lines
9.3 KiB
Cheetah
#CalendarMonth000000001
|
|
<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="630" id="mCAL">
|
|
<tr>
|
|
<td style="text-align:right">
|
|
<a class="tab" href="<tmpl_var urlDay>">Day</a>
|
|
<a class="tab" href="<tmpl_var urlWeek>">Week</a>
|
|
<a class="tab" href="<tmpl_var urlMonth>">Month</a>
|
|
<a class="tab" href="<tmpl_var urlSearch>">Search</a>
|
|
|
|
<div class="controls"><tmpl_if editor><a href="<tmpl_var urlAdd>">Add Event</a></tmpl_if> • <a href="<tmpl_var urlPrint>">Print</a>
|
|
<!--• <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;">« <tmpl_var pagePrevYear></a>•
|
|
<tmpl_loop months>
|
|
<a style="margin-right:4px;" href="<tmpl_var monthUrl>" class="monthLink<tmpl_if monthCurrent> current</tmpl_if>"><tmpl_var monthAbbr></a>
|
|
</tmpl_loop>
|
|
•
|
|
<a href="<tmpl_var pageNextUrl>" style="font-weight:bold;padding-left:8px"><tmpl_var pageNextYear> »</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="curMonth">
|
|
<tmpl_var monthName> <tmpl_var year>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width:100%">
|
|
|
|
<!-- the calendar table -->
|
|
<table id="month" width="100%" cellspacing="2" cellpadding="0">
|
|
<!-- day names -->
|
|
<tr><tmpl_loop dayNames>
|
|
<th><tmpl_var dayName></th>
|
|
</tmpl_loop></tr>
|
|
|
|
<!-- the grid -->
|
|
<tmpl_loop weeks><tr>
|
|
<tmpl_loop days><td><div class="<tmpl_if dayMonth>active</tmpl_if><tmpl_if dayCurrent> current</tmpl_if>">
|
|
<tmpl_if dayMonth>
|
|
<a class="number" href="<tmpl_var dayUrl>"><tmpl_var dayMonth></a>
|
|
<tmpl_if events>
|
|
<ul class="events">
|
|
<tmpl_loop events>
|
|
<li><a href="<tmpl_var eventUrl>">
|
|
<tmpl_var eventMenuTitle>
|
|
</a>
|
|
</li>
|
|
</tmpl_loop>
|
|
</ul>
|
|
|
|
<a href="#" id="event_<tmpl_var dayMonth>" class="moreButton" onmouseover="return showEvents('overlay<tmpl_var dayMonth>');">
|
|
<img src="<tmpl_var extrasUrl>/wobject/Calendar/images/more.gif" />
|
|
</a>
|
|
|
|
</tmpl_if> <!--/events-->
|
|
</tmpl_if> <!--/day-->
|
|
</div></td></tmpl_loop> <!--/days-->
|
|
</tr></tmpl_loop>
|
|
</table>
|
|
</tr>
|
|
</table>
|
|
<tmpl_loop weeks><tmpl_loop days><tmpl_if events>
|
|
<div id="overlay<tmpl_var dayMonth>" class="moreDisplay">
|
|
<div>
|
|
<ul>
|
|
<tmpl_loop events>
|
|
<li><a href="<tmpl_var eventUrl>"><tmpl_var eventTitle></a><br/></li>
|
|
</tmpl_loop>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</tmpl_if></tmpl_loop></tmpl_loop>
|
|
|
|
~~~
|
|
|
|
<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 .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, #mCAL .months .monthLink:hover {
|
|
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;
|
|
}
|
|
|
|
|
|
|
|
/**** Month view ****/
|
|
/* Table */
|
|
#mCAL table#month
|
|
{
|
|
|
|
}
|
|
|
|
#mCAL table#month *
|
|
{
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
#mCAL table#month a
|
|
{
|
|
text-decoration: none;
|
|
}
|
|
|
|
#mCAL table#month th
|
|
{
|
|
-moz-box-sizing:border-box;
|
|
width: 85px;
|
|
background-color: #517AC8;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: white;
|
|
}
|
|
|
|
#mCAL table#month div
|
|
{
|
|
position: relative;
|
|
width: 85px;
|
|
height: 85px;
|
|
margin: 0px;
|
|
background-color: #E9ECF3;
|
|
}
|
|
|
|
#mCAL table#month ul
|
|
{
|
|
overflow: hidden;
|
|
}
|
|
|
|
#mCAL table#month .active
|
|
{
|
|
-moz-border-radius-topLeft: 8px;
|
|
-moz-border-radius-bottomLeft: 8px;
|
|
-moz-border-radius-bottomRight: 8px;
|
|
vertical-align: top;
|
|
background-color: #CCD2E3;
|
|
border: solid #CCD2E3 1px;
|
|
}
|
|
|
|
#mCAL table#month .current
|
|
{
|
|
background-color: #FFE4B3;
|
|
border-color: orange;
|
|
}
|
|
|
|
#mCAL table#month .number
|
|
{
|
|
-moz-border-radius-bottomLeft:5px;
|
|
display: block;
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
height: 10px;
|
|
width: 10px;
|
|
background-color: #516BA4;
|
|
color: white;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
padding: 0px 3px 2px 2px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#mCAL table#month .current .number
|
|
{
|
|
background-color: orange;
|
|
color: black;
|
|
}
|
|
|
|
#mCAL table#month .events
|
|
{
|
|
padding: 3px;
|
|
padding-top: 8px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#mCAL table#month .events a
|
|
{
|
|
color: #4F4F4F;
|
|
text-decoration: none;
|
|
font-size: 9px;
|
|
}
|
|
|
|
#mCAL table#month .moreButton
|
|
{
|
|
border-style: none;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
height: 9px;
|
|
background-color: #517AC8;
|
|
font-size: 5px;
|
|
text-align: center;
|
|
-moz-border-radius-bottomLeft: 8px;
|
|
-moz-border-radius-bottomRight: 8px;
|
|
}
|
|
|
|
#mCAL table#month .moreButton img
|
|
{
|
|
border: none;
|
|
}
|
|
|
|
|
|
/* MORE STYLES */
|
|
|
|
.moreDisplay
|
|
{
|
|
position: absolute;
|
|
border: solid orange 1px;
|
|
border-top: solid orange 2px;
|
|
font-family: arial;
|
|
font-size: 10px;
|
|
width: 300px;
|
|
height: auto;
|
|
padding: 2px;
|
|
background-color: #FFD3A8;
|
|
color: black;
|
|
display: none;
|
|
z-index: 100;
|
|
}
|
|
|
|
.moreDisplay a {
|
|
color: black;
|
|
}
|
|
|
|
* html body table#month td { position: relative; z-index: 1; }
|
|
</style>
|
|
|
|
<script type="text/javascript" src='^Extras;yui/build/yahoo/yahoo.js'></script>
|
|
<script type="text/javascript" src='^Extras;yui/build/event/event.js' ></script>
|
|
|
|
<script>
|
|
<!--
|
|
//<![CDATA[
|
|
|
|
//-----------------------------------------------------------------------------------
|
|
function isSelfOrChildOf(parent,node) {
|
|
if(parent == node) return true;
|
|
if(parent == null || node == null) return false;
|
|
var childLen = parent.childNodes.length;
|
|
for (var i = 0; i < childLen; i++) {
|
|
var child = parent.childNodes[i];
|
|
if(child.nodeType != 1) continue; //Skip text and attribute nodes
|
|
if(isSelfOrChildOf (child,node)) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
//-----------------------------------------------------------------------------------
|
|
function findParentNodeFromChild (node,tagName) {
|
|
if(node == null) return node;
|
|
var parent = node.parentNode;
|
|
if(parent == null) return node;
|
|
if(parent.tagName == tagName) {
|
|
return parent;
|
|
}
|
|
return findParentNodeFromChild (parent,tagName);
|
|
}
|
|
|
|
|
|
//-----------------------------------------------------------------------------------
|
|
function showEvents(eventId) {
|
|
var evt = YAHOO.util.Event.getEvent();
|
|
var targ = YAHOO.util.Event.getTarget(evt);
|
|
|
|
var elem = document.getElementById(eventId);
|
|
var td;
|
|
var pPagex;
|
|
var pPagey;
|
|
|
|
//IE is stupid
|
|
var isIE = navigator.userAgent.indexOf("MSIE") > -1;
|
|
var isIE7 = navigator.userAgent.indexOf("MSIE 7") > -1;
|
|
if(isIE && !isIE7) {
|
|
//IE 6 and below don't register offsetTop or offsetLeft for the div
|
|
td = findParentNodeFromChild(targ,"TD");
|
|
pPagex = td.offsetTop;
|
|
pPagey = td.offsetLeft;
|
|
} else {
|
|
var cDiv = findParentNodeFromChild(targ,"DIV");
|
|
pPagex = cDiv.offsetTop;
|
|
pPagey = cDiv.offsetLeft;
|
|
td = findParentNodeFromChild(cDiv,"TD");
|
|
}
|
|
|
|
var tdHeight = td.offsetHeight;
|
|
|
|
var eventX = tdHeight + pPagex;
|
|
var eventY = pPagey;
|
|
|
|
elem.style.top = eventX + 'px';
|
|
elem.style.left = eventY + 'px';
|
|
elem.style.display = "block";
|
|
|
|
//Register listener
|
|
YAHOO.util.Event.addListener(document.body,"mousemove",hideEvents,{ "targ":targ, "elem": elem, "td": td })
|
|
return false;
|
|
}
|
|
|
|
//-----------------------------------------------------------------------------------
|
|
function hideEvents(e, el) {
|
|
if(!e || !el) return;
|
|
|
|
var elem = el.elem;
|
|
var td = el.td;
|
|
var targ = el.targ;
|
|
|
|
var evtTarg = YAHOO.util.Event.getTarget(e);
|
|
|
|
var inDiv = isSelfOrChildOf(elem,evtTarg);
|
|
var inTd = isSelfOrChildOf(td,evtTarg);
|
|
var inTarget = isSelfOrChildOf(targ,evtTarg);
|
|
|
|
if(inDiv || inTd || inTarget) {
|
|
//do nothing
|
|
} else {
|
|
elem.style.display = "none";
|
|
YAHOO.util.Event.removeListener (document.body,"mousemove",hideEvents);
|
|
}
|
|
return false;
|
|
}
|
|
|
|
//]]>
|
|
-->
|
|
</script>
|
|
|