webgui/docs/upgrades/templates-7.3.0/default-calendar-week.tmpl

#CalendarWeek0000000001
#create
#namespace:Calendar/Week
#url:default-calendar-week
#title:Default Calendar Week
#menuTitle:Default Calendar Week

<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>

<div id="calendar">
	<!-- tabs -->
	<div class="tabs">
		<a href="<tmpl_var urlDay>">Day</a>
		<a href="<tmpl_var urlWeek>">Week</a>
		<a href="<tmpl_var urlMonth>">Month</a>
		<a href="/<tmpl_var url>?func=search">Search</a>
	</div>
	
	<!-- other actions -->
	<div class="actions">
		<tmpl_if editor><a href="/<tmpl_var url>?func=add;class=WebGUI::Asset::Event">Add Event</a></tmpl_if>
		<!--&bull; <a href="#">Print</a>
		&bull; <a href="#">Subscribe</a>-->
	</div>
	
	
	<div class="navigation">
		<!-- previous year -->
		<div class="previous"><a href="<tmpl_var pagePrevUrl>">&laquo; Previous Week</a></div>
	
		<!-- next year -->
		<div class="next"><a href="<tmpl_var pageNextUrl>">Next Week &raquo;</a></div>
	
		<!-- I guess write the week again -->
		<p><tmpl_var startMonthAbbr> <tmpl_var startDayOfMonth>, <tmpl_var startYear> to <tmpl_var endMonthAbbr> <tmpl_var endDayOfMonth>, <tmpl_var endYear></p>
	</div>
	
	
	<!-- banner -->
	<h2><tmpl_var startMonthName> <tmpl_var startDayOfMonth>, <tmpl_var startYear> to <tmpl_var endMonthName> <tmpl_var endDayOfMonth>, <tmpl_var endYear></h2>
	
	
	<!-- the calendar table -->
	<table id="week">
		<tmpl_loop days><tr>
		<th><tmpl_var dayName></th>
		<td><div>
		<div class="number"><tmpl_var dayOfMonth></div>
		<tmpl_if events><ul><tmpl_loop events>
			<li><a href="/<tmpl_var eventUrl>"><tmpl_var eventTitle></a></li>
		</tmpl_loop></ul></tmpl_if></div></td> <!-- /events -->
		</tr></tmpl_loop><!--/days-->
	</table>
</div>
~~~
<style type="text/css">
body * 
{
	margin:			0px;
}

#calendar *	
{
	/* Override any defaults that mess up our template */
}

#calendar
{
	width:			630px;
}



/**** DEFAULTS ****/
#calendar table
{
	width:			100%;
}

#calendar td 
{
	font-size:		10px;
	font-family:		Arial, sans-serif;
}

#calendar a 
{
	font-size:		11px;
	color:			#517AC8;
}

#calendar h2 
{
	text-align:		center;
	margin: 		2px 0px;
	background-color:	#517AC8;
	color:			white;
	font-size:		14px;
	font-weight:		bold;
}


/**** Tabs ****/
#calendar .tabs
{
	list-style:		none;
	float:			left;
	text-align:		left;
	margin:			0px;
	padding:		0px;
}

#calendar .tabs a
{	
	-moz-border-radius-topLeft:	10px;
	-moz-border-radius-topRight:	10px;
	display:		block;
	float:			left;
	margin-right:		5px;
	padding: 		2px 15px 0px 15px;
	border-bottom-style:	none;
	background-color:	#E9ECF3;
	color:			#7588B5;
	font-weight:		bold;
	font-size:		10pt;
	text-align:		center;
	text-decoration:	none;
}

#calendar .tabs a:hover 
{
	color:			black;
}


/**** Actions ****/
#calendar .actions
{
	float:			right;
	vertical-align:		bottom;
}


/**** Navigation ****/
#calendar .navigation 
{
	clear:			both;
	text-align:		center;
	background-color:	#DFE3EE;
	padding:		3px 0px;		
}

#calendar .navigation .previous
{
	float:			left;
}

#calendar .navigation .next
{
	float:			right;
}

#calendar .navigation ul 
{
	list-style:		none;
	margin:			0px;
	padding:		0px;
}

#calendar .navigation li
{
	display:		inline;
	margin:			0px;
	padding:		0px;
}

#calendar .navigation a 
{
	text-decoration:	none;			
	padding-left:		5px;
	padding-right:		5px;
	color:			#AAB8D5;
	font-size:		12px;
	font-weight:		bold;
}	

#calendar .navigation a.current, #calendar .navigation a:hover 
{
	-moz-border-radius:	5px;
	font-weight:		bold;
	color:			#517AC8;
	background-color:	#fff;			
}

/* Week */
#calendar table#week th
{
	width:			35%;
	-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;		
}

#calendar table#week td 
{
	width:			65%;
	vertical-align:		top;		
	background-color:	#E9ECF3;			
	-moz-border-radius-topLeft:8px;
	-moz-border-radius-bottomLeft:8px;			
	border:			solid #CCD2E3 1px;
}

#calendar table#week td div
{
	position:		relative;
	min-height:		35px;
}
/* IE min-height hack */
* html body #calendar table#week td { height: 45px; }

#calendar table#week ul { padding-left: 50px; }

#calendar table#week .number
{
	position:		absolute;
	top:			-2px;
	left:			-2px;
	width:			2em;
	height:			1em;
	min-height:		1em;
	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;
}


</style>