final calendar change...
This commit is contained in:
		
							parent
							
								
									0e507d549d
								
							
						
					
					
						commit
						6b791539f5
					
				|  | @ -31,6 +31,59 @@ | |||
| 	border-radius: 3px; | ||||
| 	cursor: pointer; | ||||
| 	padding: 1px 3px; | ||||
| 	box-shadow: inset 0 0 1px black; | ||||
| 	-webkit-box-shadow: inset 0 0 1px black; | ||||
| 	-moz-box-shadow: inset 0 0 1px black; | ||||
| } | ||||
| .event_list .cell { | ||||
| 	height: 38px; | ||||
| 	border: solid 1px #ddd; | ||||
| 	border-top: 0; | ||||
| } | ||||
| .event_list .divide { | ||||
| 	height: 18px; | ||||
| 	margin-bottom: 18px; | ||||
| 	border-bottom: solid 1px #eee; | ||||
| } | ||||
| .event_list .day_time { | ||||
| 	height: 30px; | ||||
| 	border-bottom: solid 1px #ddd; | ||||
| 	border-left: solid 1px #ddd; | ||||
| 	text-align: right; | ||||
| 	padding: 4px; | ||||
| } | ||||
| .event dl, .event dt, .event dd { | ||||
| 	margin: 0; | ||||
| 	padding: 0; | ||||
| } | ||||
| .event dl { | ||||
| 	padding: 3px; | ||||
| } | ||||
| .event dt { | ||||
| 	font-size: 11px; | ||||
| 	font-weight: normal; | ||||
| 	line-height: 12px; | ||||
| } | ||||
| #calendar_day .event_holder { | ||||
| 	width: 100%; | ||||
| 	height: 100%; | ||||
| 	position: absolute; | ||||
| 	top: 0; | ||||
| } | ||||
| .event_holder .inner { | ||||
| 	position: relative; | ||||
| 	margin: 0 16px 0 2px; | ||||
| } | ||||
| .event_holder .event { | ||||
| 	padding: 0px; | ||||
| 	position: absolute; | ||||
| 	width: 100%; | ||||
| } | ||||
| .event_holder .event.half { | ||||
| 
 | ||||
| } | ||||
| .event_holder .event.over { | ||||
| 	border: solid 1px #fff; | ||||
| } | ||||
| /* month view */ | ||||
| #calendar_month { | ||||
|  | @ -97,6 +150,11 @@ | |||
| 	color: #ccc; | ||||
| 	border-left: solid 1px #ddd; | ||||
| } | ||||
| #calendar_month .event.single { | ||||
| 	-webkit-box-shadow: none; | ||||
| 	-moz-box-shadow: none; | ||||
| 	box-shadow: none; | ||||
| } | ||||
| 
 | ||||
| /* agenda view */ | ||||
| #calendar_agenda { | ||||
|  | @ -105,6 +163,11 @@ | |||
| #calendar_agenda .table { | ||||
| 	margin-bottom: 0; | ||||
| } | ||||
| #calendar_agenda .event { | ||||
| 	-webkit-box-shadow: none; | ||||
| 	-moz-box-shadow: none; | ||||
| 	box-shadow: none; | ||||
| } | ||||
| .event_time { | ||||
| 	font-family: Tahoma, sans-serif; | ||||
| } | ||||
|  | @ -132,52 +195,61 @@ | |||
| #calendar_day .event_list td { | ||||
| 	padding: 0; | ||||
| } | ||||
| #calendar_day .event_list .day_time { | ||||
| 	height: 30px; | ||||
| 	border-bottom: solid 1px #ddd; | ||||
| 	border-left: solid 1px #ddd; | ||||
| 	text-align: right; | ||||
| 	padding: 4px; | ||||
| } | ||||
| #calendar_day .event_list .cell { | ||||
| 	height: 38px; | ||||
| 	border: solid 1px #ddd; | ||||
| 	border-top: 0; | ||||
| } | ||||
| #calendar_day .event_list .divide { | ||||
| 	height: 18px; | ||||
| 	margin-bottom: 18px; | ||||
| 	border-bottom: solid 1px #eee; | ||||
| } | ||||
| #calendar_day .event_holder { | ||||
| 	width: 100%; | ||||
| 	height: 100%; | ||||
| 	position: absolute; | ||||
| 	top: 0; | ||||
| } | ||||
| #calendar_day .event_holder .event { | ||||
| 	padding: 0px; | ||||
| 	position: absolute; | ||||
| 	width: 100%; | ||||
| } | ||||
| #calendar_day .event_holder .event.half { | ||||
| 
 | ||||
| /* week view */ | ||||
| #calendar_week { | ||||
| 
 | ||||
| } | ||||
| #calendar_day .event_holder .event.over { | ||||
| 	outline: solid 1px #fff; | ||||
| #calendar_week .cell_wrapper { | ||||
| 	position: absolute; | ||||
| 	width: 100%; | ||||
| } | ||||
| #calendar_day .event dl, #calendar_day .event dt, #calendar_day .event dd { | ||||
| 	margin: 0; | ||||
| #calendar_week td { | ||||
| 	padding: 0; | ||||
| } | ||||
| #calendar_day .event dl { | ||||
| 	padding: 3px; | ||||
| #calendar_week .table { | ||||
| 	margin-bottom: 0; | ||||
| } | ||||
| #calendar_day .event dt { | ||||
| 	font-size: 11px; | ||||
| 	font-weight: normal; | ||||
| 	line-height: 12px; | ||||
| #calendar_week .header { | ||||
| 	margin-bottom: 12px; | ||||
| 	border-top: 0; | ||||
| 	table-layout: fixed; | ||||
| } | ||||
| #calendar_week .header th { | ||||
| 	text-align: center; | ||||
| 	font-size: 12px; | ||||
| } | ||||
| #calendar_week .header td { | ||||
| 	border: solid 1px #ddd; | ||||
| 	background-color: #eee; | ||||
| } | ||||
| #calendar_week .week_day { | ||||
| 	padding: 0 2px; | ||||
| 	border: solid 1px #ddd; | ||||
| } | ||||
| #calendar_week .header .week_day { | ||||
| 	padding: 1px 2px 10px 2px; | ||||
| } | ||||
| #calendar_week .event_list .event { | ||||
| 	position: absolute; | ||||
| 	width: 100%; | ||||
| 	margin-bottom: 2px; | ||||
| } | ||||
| #calendar_week .cell_map { | ||||
| 	margin-bottom: 18px; | ||||
| } | ||||
| #calendar_week .cell_map td { | ||||
| 	border-top: 0; | ||||
| 	border-bottom: 0; | ||||
| } | ||||
| #calendar_week .cell_map tr:first-child td { | ||||
| 	border-top: solid 1px #ddd; | ||||
| } | ||||
| #calendar_week .event_holder .inner { | ||||
| 	margin: 0 8px 0 0; | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| /* calendars(category) */ | ||||
|  |  | |||
|  | @ -117,6 +117,7 @@ | |||
| 						<div class="divide"></div> | ||||
| 					</div> | ||||
| 					<div class="event_holder"> | ||||
| 						<div class="inner"> | ||||
| 							<div class="event" style="background-color: #66cc00; top: 0;"> | ||||
| 								<dl> | ||||
| 									<dt>10:30am - 11:00am</dt> | ||||
|  | @ -141,13 +142,14 @@ | |||
| 									<dd>template</dd> | ||||
| 								</dl> | ||||
| 							</div> | ||||
| 						<div class="event over" style="background-color: #00ffee; top: 214px; left: 50%; width: 50%;"> | ||||
| 							<div class="event over" style="background-color: #00ccee; top: 214px; left: 50%; width: 50%;"> | ||||
| 								<dl> | ||||
| 									<dt>10:30am - 11:00am</dt> | ||||
| 									<dd>template</dd> | ||||
| 								</dl> | ||||
| 							</div> | ||||
| 						</div> | ||||
| 					</div> | ||||
| 				</td> | ||||
| 			</tr> | ||||
| 		</table> | ||||
|  |  | |||
|  | @ -28,7 +28,7 @@ | |||
| </div> | ||||
| <div id="orbit_calendar" class="month_view"> | ||||
| 	<div class="row-fluid"> | ||||
| 		<div class="span2"> | ||||
| 		<div class="span3"> | ||||
| 			<div class="btn-toolbar" style="margin:0;"> | ||||
| 				<div class="btn-group"> | ||||
| 					<button class="btn">Today</button> | ||||
|  | @ -39,10 +39,10 @@ | |||
| 				</div> | ||||
| 			</div> | ||||
| 		</div> | ||||
| 		<div class="span7"> | ||||
| 		<div class="span5"> | ||||
| 			<h4 class="current_day_title">Semptember 2012</h4> | ||||
| 		</div> | ||||
| 		<div class="span3"> | ||||
| 		<div class="span4"> | ||||
| 			<div class="btn-group calendar_mode" data-toggle="buttons-radio"> | ||||
| 				<button class="btn mode_switch">day</button> | ||||
| 				<button class="btn mode_switch">week</button> | ||||
|  |  | |||
|  | @ -87,7 +87,7 @@ | |||
| 			</tr> | ||||
| 			<tr> | ||||
| 				<td colspan="3"></td> | ||||
| 				<td><div class="event" style="color: #ffcc00;">7pm - 9pm test event</div></td> | ||||
| 				<td><div class="event single" style="color: #ffcc00;">7pm - 9pm test event</div></td> | ||||
| 				<td colspan="3"></td> | ||||
| 			</tr> | ||||
| 		</table> | ||||
|  |  | |||
|  | @ -1 +1,198 @@ | |||
| week | ||||
| <div id="calendar_week"> | ||||
| 	<table class="table header"> | ||||
| 		<tr> | ||||
| 			<th style="width: 44px;"></th> | ||||
| 			<th>Sun 9/11</th> | ||||
| 			<th>Mon 9/12</th> | ||||
| 			<th class="today">Tue 9/13</th> | ||||
| 			<th>Wed 9/14</th> | ||||
| 			<th>Thu 9/15</th> | ||||
| 			<th>Fri 9/16</th> | ||||
| 			<th>Sat 9/17</th> | ||||
| 		</tr> | ||||
| 		<tr> | ||||
| 			<td style="border: 0; background: none;"></td> | ||||
| 			<td class="all_day_event week_day"> | ||||
| 				<div class="event half" style="background-color: #ccffee;"> | ||||
| 					<dl> | ||||
| 						<dt>10:30am - template</dt> | ||||
| 						<dd></dd> | ||||
| 					</dl> | ||||
| 				</div> | ||||
| 			</td> | ||||
| 			<td class="all_day_event week_day"> | ||||
| 			</td> | ||||
| 			<td class="all_day_event week_day"></td> | ||||
| 			<td class="all_day_event week_day"> | ||||
| 				<div class="event half" style="background-color: #ccffee;"> | ||||
| 					<dl> | ||||
| 						<dt>10:30am - template</dt> | ||||
| 						<dd></dd> | ||||
| 					</dl> | ||||
| 				</div> | ||||
| 			</td> | ||||
| 			<td class="all_day_event week_day"></td> | ||||
| 			<td class="all_day_event week_day"></td> | ||||
| 			<td class="all_day_event week_day"></td> | ||||
| 		</tr> | ||||
| 	</table> | ||||
| 	<div class="event_list"> | ||||
| 		<table class="table cell_map"> | ||||
| 			<tr height="1"> | ||||
| 				<td style="width: 60px;"></td> | ||||
| 				<td colspan="7" style="position: relative;"> | ||||
| 					<div class="cell_wrapper"> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 						<div class="cell"> | ||||
| 							<div class="divide"></div> | ||||
| 						</div> | ||||
| 					</div> | ||||
| 				</td> | ||||
| 			</tr> | ||||
| 			<tr> | ||||
| 				<td> | ||||
| 					<div class="day_time">12am</div> | ||||
| 					<div class="day_time">1am</div> | ||||
| 					<div class="day_time">2am</div> | ||||
| 					<div class="day_time">3am</div> | ||||
| 					<div class="day_time">4am</div> | ||||
| 					<div class="day_time">5am</div> | ||||
| 					<div class="day_time">6am</div> | ||||
| 					<div class="day_time">7am</div> | ||||
| 					<div class="day_time">8am</div> | ||||
| 					<div class="day_time">9am</div> | ||||
| 					<div class="day_time">10am</div> | ||||
| 					<div class="day_time">11am</div> | ||||
| 					<div class="day_time">12am</div> | ||||
| 					<div class="day_time">1pm</div> | ||||
| 					<div class="day_time">2pm</div> | ||||
| 					<div class="day_time">3pm</div> | ||||
| 					<div class="day_time">4pm</div> | ||||
| 					<div class="day_time">5pm</div> | ||||
| 					<div class="day_time">6pm</div> | ||||
| 					<div class="day_time">7pm</div> | ||||
| 					<div class="day_time">8pm</div> | ||||
| 					<div class="day_time">9pm</div> | ||||
| 					<div class="day_time">10pm</div> | ||||
| 					<div class="day_time">11pm</div> | ||||
| 				</td> | ||||
| 				<td class="week_day"> | ||||
| 					<div class="event_holder"> | ||||
| 						<div class="inner"> | ||||
| 						</div> | ||||
| 					</div> | ||||
| 				</td> | ||||
| 				<td class="week_day"> | ||||
| 					<div class="event_holder"> | ||||
| 						<div class="inner"> | ||||
| 						</div> | ||||
| 					</div> | ||||
| 				</td> | ||||
| 				<td class="week_day today"> | ||||
| 					<div class="event_holder"> | ||||
| 						<div class="inner"> | ||||
| 							<div class="event" style="background-color: #ccffee; top: 117px;"> | ||||
| 								<dl> | ||||
| 									<dt>10:30am - 11:00am</dt> | ||||
| 									<dd>template</dd> | ||||
| 								</dl> | ||||
| 							</div> | ||||
| 						</div> | ||||
| 					</div> | ||||
| 				</td> | ||||
| 				<td class="week_day"> | ||||
| 					<div class="event_holder"> | ||||
| 						<div class="inner"> | ||||
| 						</div> | ||||
| 					</div> | ||||
| 				</td> | ||||
| 				<td class="week_day"> | ||||
| 					<div class="event_holder"> | ||||
| 						<div class="inner"> | ||||
| 						</div> | ||||
| 					</div> | ||||
| 				</td> | ||||
| 				<td class="week_day"> | ||||
| 					<div class="event_holder"> | ||||
| 						<div class="inner"> | ||||
| 						</div> | ||||
| 					</div> | ||||
| 				</td> | ||||
| 				<td class="week_day"> | ||||
| 					<div class="event_holder"> | ||||
| 						<div class="inner"> | ||||
| 						</div> | ||||
| 					</div> | ||||
| 				</td> | ||||
| 			</tr> | ||||
| 		</table> | ||||
| 	</div> | ||||
| </div> | ||||
		Loading…
	
		Reference in New Issue