calendar update
- delete unwanted style in bootstrap-responsive.css - yet start repeat panel - please just refer how google works (functionality)
This commit is contained in:
		
							parent
							
								
									3e3699c873
								
							
						
					
					
						commit
						17768867a5
					
				
										
											
												File diff suppressed because it is too large
												Load Diff
											
										
									
								
							|  | @ -31,6 +31,59 @@ | ||||||
| 	border-radius: 3px; | 	border-radius: 3px; | ||||||
| 	cursor: pointer; | 	cursor: pointer; | ||||||
| 	padding: 1px 3px; | 	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 */ | /* month view */ | ||||||
| #calendar_month { | #calendar_month { | ||||||
|  | @ -97,6 +150,11 @@ | ||||||
| 	color: #ccc; | 	color: #ccc; | ||||||
| 	border-left: solid 1px #ddd; | 	border-left: solid 1px #ddd; | ||||||
| } | } | ||||||
|  | #calendar_month .event.single { | ||||||
|  | 	-webkit-box-shadow: none; | ||||||
|  | 	-moz-box-shadow: none; | ||||||
|  | 	box-shadow: none; | ||||||
|  | } | ||||||
| 
 | 
 | ||||||
| /* agenda view */ | /* agenda view */ | ||||||
| #calendar_agenda { | #calendar_agenda { | ||||||
|  | @ -105,6 +163,11 @@ | ||||||
| #calendar_agenda .table { | #calendar_agenda .table { | ||||||
| 	margin-bottom: 0; | 	margin-bottom: 0; | ||||||
| } | } | ||||||
|  | #calendar_agenda .event { | ||||||
|  | 	-webkit-box-shadow: none; | ||||||
|  | 	-moz-box-shadow: none; | ||||||
|  | 	box-shadow: none; | ||||||
|  | } | ||||||
| .event_time { | .event_time { | ||||||
| 	font-family: Tahoma, sans-serif; | 	font-family: Tahoma, sans-serif; | ||||||
| } | } | ||||||
|  | @ -132,52 +195,61 @@ | ||||||
| #calendar_day .event_list td { | #calendar_day .event_list td { | ||||||
| 	padding: 0; | 	padding: 0; | ||||||
| } | } | ||||||
| #calendar_day .event_list .day_time { | 
 | ||||||
| 	height: 30px; | /* week view */ | ||||||
| 	border-bottom: solid 1px #ddd; | #calendar_week { | ||||||
| 	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 { |  | ||||||
| 
 | 
 | ||||||
| } | } | ||||||
| #calendar_day .event_holder .event.over { | #calendar_week .cell_wrapper { | ||||||
| 	outline: solid 1px #fff; | 	position: absolute; | ||||||
|  | 	width: 100%; | ||||||
| } | } | ||||||
| #calendar_day .event dl, #calendar_day .event dt, #calendar_day .event dd { | #calendar_week td { | ||||||
| 	margin: 0; |  | ||||||
| 	padding: 0; | 	padding: 0; | ||||||
| } | } | ||||||
| #calendar_day .event dl { | #calendar_week .table { | ||||||
| 	padding: 3px; | 	margin-bottom: 0; | ||||||
| } | } | ||||||
| #calendar_day .event dt { | #calendar_week .header { | ||||||
| 	font-size: 11px; | 	margin-bottom: 12px; | ||||||
| 	font-weight: normal; | 	border-top: 0; | ||||||
| 	line-height: 12px; | 	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) */ | /* calendars(category) */ | ||||||
|  |  | ||||||
|  | @ -117,35 +117,37 @@ | ||||||
| 						<div class="divide"></div> | 						<div class="divide"></div> | ||||||
| 					</div> | 					</div> | ||||||
| 					<div class="event_holder"> | 					<div class="event_holder"> | ||||||
| 						<div class="event" style="background-color: #66cc00; top: 0;"> | 						<div class="inner"> | ||||||
| 							<dl> | 							<div class="event" style="background-color: #66cc00; top: 0;"> | ||||||
| 								<dt>10:30am - 11:00am</dt> | 								<dl> | ||||||
| 								<dd>template</dd> | 									<dt>10:30am - 11:00am</dt> | ||||||
| 							</dl> | 									<dd>template</dd> | ||||||
| 						</div> | 								</dl> | ||||||
| 						<div class="event" style="background-color: #00aacc; top: 39px;"> | 							</div> | ||||||
| 							<dl> | 							<div class="event" style="background-color: #00aacc; top: 39px;"> | ||||||
| 								<dt>10:30am - 11:00am</dt> | 								<dl> | ||||||
| 								<dd>template</dd> | 									<dt>10:30am - 11:00am</dt> | ||||||
| 							</dl> | 									<dd>template</dd> | ||||||
| 						</div> | 								</dl> | ||||||
| 						<div class="event half" style="background-color: #ccffee; top: 117px;"> | 							</div> | ||||||
| 							<dl> | 							<div class="event half" style="background-color: #ccffee; top: 117px;"> | ||||||
| 								<dt>10:30am - template</dt> | 								<dl> | ||||||
| 								<dd></dd> | 									<dt>10:30am - template</dt> | ||||||
| 							</dl> | 									<dd></dd> | ||||||
| 						</div> | 								</dl> | ||||||
| 						<div class="event" style="background-color: #00ffee; top: 195px; width: 85%;"> | 							</div> | ||||||
| 							<dl> | 							<div class="event" style="background-color: #00ffee; top: 195px; width: 85%;"> | ||||||
| 								<dt>10:30am - 11:00am</dt> | 								<dl> | ||||||
| 								<dd>template</dd> | 									<dt>10:30am - 11:00am</dt> | ||||||
| 							</dl> | 									<dd>template</dd> | ||||||
| 						</div> | 								</dl> | ||||||
| 						<div class="event over" style="background-color: #00ffee; top: 214px; left: 50%; width: 50%;"> | 							</div> | ||||||
| 							<dl> | 							<div class="event over" style="background-color: #00ccee; top: 214px; left: 50%; width: 50%;"> | ||||||
| 								<dt>10:30am - 11:00am</dt> | 								<dl> | ||||||
| 								<dd>template</dd> | 									<dt>10:30am - 11:00am</dt> | ||||||
| 							</dl> | 									<dd>template</dd> | ||||||
|  | 								</dl> | ||||||
|  | 							</div> | ||||||
| 						</div> | 						</div> | ||||||
| 					</div> | 					</div> | ||||||
| 				</td> | 				</td> | ||||||
|  |  | ||||||
|  | @ -28,7 +28,7 @@ | ||||||
| </div> | </div> | ||||||
| <div id="orbit_calendar" class="month_view"> | <div id="orbit_calendar" class="month_view"> | ||||||
| 	<div class="row-fluid"> | 	<div class="row-fluid"> | ||||||
| 		<div class="span2"> | 		<div class="span3"> | ||||||
| 			<div class="btn-toolbar" style="margin:0;"> | 			<div class="btn-toolbar" style="margin:0;"> | ||||||
| 				<div class="btn-group"> | 				<div class="btn-group"> | ||||||
| 					<button class="btn">Today</button> | 					<button class="btn">Today</button> | ||||||
|  | @ -39,10 +39,10 @@ | ||||||
| 				</div> | 				</div> | ||||||
| 			</div> | 			</div> | ||||||
| 		</div> | 		</div> | ||||||
| 		<div class="span7"> | 		<div class="span5"> | ||||||
| 			<h4 class="current_day_title">Semptember 2012</h4> | 			<h4 class="current_day_title">Semptember 2012</h4> | ||||||
| 		</div> | 		</div> | ||||||
| 		<div class="span3"> | 		<div class="span4"> | ||||||
| 			<div class="btn-group calendar_mode" data-toggle="buttons-radio"> | 			<div class="btn-group calendar_mode" data-toggle="buttons-radio"> | ||||||
| 				<button class="btn mode_switch">day</button> | 				<button class="btn mode_switch">day</button> | ||||||
| 				<button class="btn mode_switch">week</button> | 				<button class="btn mode_switch">week</button> | ||||||
|  |  | ||||||
|  | @ -87,7 +87,7 @@ | ||||||
| 			</tr> | 			</tr> | ||||||
| 			<tr> | 			<tr> | ||||||
| 				<td colspan="3"></td> | 				<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> | 				<td colspan="3"></td> | ||||||
| 			</tr> | 			</tr> | ||||||
| 		</table> | 		</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