oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/docs/upgrades/templates-7.3.2/CalendarMonth.tmpl

321 lines
6.8 KiB
Cheetah
Executable file
Raw Blame History

#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> &bull; <a href="<tmpl_var urlPrint>">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; <tmpl_var pagePrevYear></a>&bull;
<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>
&bull;
<a href="<tmpl_var pageNextUrl>" style="font-weight:bold;padding-left:8px"><tmpl_var pageNextYear> &raquo;</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="#" onmouseover="DelayedRollover.showPopup('more<tmpl_var dayMonth>')" onmouseout="DelayedRollover.hidePopup('more<tmpl_var dayMonth>')" class="moreButton" onclick="return false;">
<img src="/extras/wobject/Calendar/images/more.gif" />
</a>
<div style="display: none" id="more<tmpl_var dayMonth>" class="moreDisplay" onmouseover="DelayedRollover.showPopup('more<tmpl_var dayMonth>')" onmouseout="DelayedRollover.hidePopup('more<tmpl_var dayMonth>')" >
<tmpl_loop events>
<a href="/<tmpl_var eventUrl>"><tmpl_var eventTitle></a><br/>
</tmpl_loop>
</div>
</tmpl_if> <!--/events-->
</tmpl_if> <!--/day-->
</div></td></tmpl_loop> <!--/days-->
</tr></tmpl_loop>
</table>
</tr>
</table>
~~~
<script type="text/javascript">
// Delayed rollovers
// From: http://www.pjhyett.com/articles/2006/07/05/timeout-your-mouseovers
// Modified by: Doug Bell
var DelayedRollover = {
timeout : new Array(),
showPopup : function(e){
element = document.getElementById(e);
clearTimeout(this.timeout[e]);
if(element.style.display == 'none'){
this.timeout[e] = setTimeout(function(){element.style.display="block"},10);
}
},
hidePopup : function(e){
element = document.getElementById(e);
if(element.style.display == 'none'){
clearTimeout(this.timeout[e]);
}else{
this.timeout[e] = setTimeout(function(){element.style.display="none"},10);
}
}
}
</script>
<style type="text/css">
#mCAL { z-index: 0; }
#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;
}
#mCAL table#month .moreButton:hover
{
background-color: orange;
}
/* MORE STYLES */
#mCAL table#month .moreDisplay
{
position: absolute;
left: 0px;
top: 85px;
border: solid orange 1px;
border-top: solid orange 2px;
font-family: arial;
font-size: 10px;
width: 300px;
height: auto;
padding: 2px;
background-color: #FFD3A8;
z-index: 100;
}
* html body table#month td { position: relative; z-index: 1; }
</style>
Reference in a new issue View git blame Copy permalink