final calendar change...
This commit is contained in:
parent
0e507d549d
commit
6b791539f5
|
@ -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>
|
Reference in New Issue