shit calendar update

This commit is contained in:
devin 2012-10-17 17:35:30 +08:00
parent 6113b9c46c
commit 47df69f8cf
5 changed files with 256 additions and 218 deletions

View File

@ -163,7 +163,7 @@ var calendarAPI = function(){
if($('#calendar_month').length > 0){ if($('#calendar_month').length > 0){
var $c_table = $('#calendar_month'); var $c_table = $('#calendar_month');
var sum_h = 0; var sum_h = 0;
var context_h = $('#main-sidebar').outerHeight(); var context_h = $(window).height() - $('#orbit-bar').height();
$('#main-wrap > *').not('#orbit_calendar, .modal').each(function(){ $('#main-wrap > *').not('#orbit_calendar, .modal').each(function(){
sum_h += $(this).outerHeight(); sum_h += $(this).outerHeight();
}); });

View File

@ -36,18 +36,21 @@
-webkit-box-shadow: inset 0 0 1px black; -webkit-box-shadow: inset 0 0 1px black;
-moz-box-shadow: inset 0 0 1px black; -moz-box-shadow: inset 0 0 1px black;
} }
.event_list_wrapper {
position: relative;
}
.event_list .cell { .event_list .cell {
height: 38px; height: 39px;
border: solid 1px #ddd; border: solid 1px #ddd;
border-top: 0; border-top: 0;
} }
.event_list .divide { .event_list .divide {
height: 18px; height: 19px;
margin-bottom: 18px; margin-bottom: 18px;
border-bottom: solid 1px #eee; border-bottom: solid 1px #eee;
} }
.event_list .day_time { .event_list .day_time {
height: 30px; height: 31px;
border-bottom: solid 1px #ddd; border-bottom: solid 1px #ddd;
border-left: solid 1px #ddd; border-left: solid 1px #ddd;
text-align: right; text-align: right;
@ -189,7 +192,7 @@
} }
#calendar_day .all_day_event { #calendar_day .all_day_event {
background: #eee; background: #eee;
border: solid 1px #ddd border: solid 1px #ddd;
} }
#calendar_day .event_list .table { #calendar_day .event_list .table {
border-top: solid 1px #ddd; border-top: solid 1px #ddd;
@ -223,14 +226,14 @@
} }
#calendar_week .header td { #calendar_week .header td {
border: solid 1px #ddd; border: solid 1px #ddd;
background-color: #eee; /*background-color: #eee;*/
} }
#calendar_week .week_day { #calendar_week .week_day {
padding: 0 2px; padding: 0 2px;
border: solid 1px #ddd; border: solid 1px #ddd;
} }
#calendar_week .header .week_day { #calendar_week .header .week_day {
padding: 1px 2px 10px 2px; padding: 2px 4px 0px 2px;
} }
#calendar_week .event_list .event { #calendar_week .event_list .event {
position: absolute; position: absolute;
@ -250,7 +253,18 @@
#calendar_week .event_holder .inner { #calendar_week .event_holder .inner {
margin: 0 8px 0 0; margin: 0 8px 0 0;
} }
#calendar_week .all_day_event_holder {
position: relative;
width: 100%;
table-layout: fixed;
}
#calendar_week .all_day_event_holder td {
border: 0;
background-color: transparent;
}
#calendar_week .all_day_event {
background: #eee;
}

View File

@ -59,108 +59,128 @@
<th>Sat 9/17</th> <th>Sat 9/17</th>
</tr> </tr>
<tr> <tr>
<td style="border: 0; background: none;"></td> <td colspan="8" style="border:0;">
<td class="all_day_event week_day"> <div class="event_list_wrapper" style="height:50px;">
<div class="event half" style="background-color: #ccffee;"> <table style="position: absolute; width: 100%; height: 50px; top: 0;">
<dl> <tr>
<dt>10:30am - template</dt> <td style="border: 0; background: none; width: 60px;"></td>
<dd></dd> <td class="all_day_event week_day"></td>
</dl> <td class="all_day_event week_day"></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>
<td class="all_day_event week_day"></td>
<td class="all_day_event week_day"></td>
</tr>
</table>
<table class="all_day_event_holder">
<tr>
<td rowspan="2" style="width:60px;"></td>
<td colspan="7" 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>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="2" 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 colspan="4"></td>
</tr>
</table>
</div> </div>
</td> </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> </tr>
</table> </table>
<div class="event_list"> <div class="event_list">
<table class="table cell_map"> <table class="table cell_map">
<tr height="1"> <tr height="0">
<td style="width: 60px;"></td> <td style="width: 60px;"></td>
<td colspan="7" style="position: relative;"> <td colspan="7">
<div class="cell_wrapper"> <div class="event_list_wrapper">
<div class="cell"> <div class="cell_wrapper">
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
<div class="divide"></div>
</div>
</div> </div>
</div> </div>
</td> </td>

View File

@ -43,110 +43,112 @@
<div class="day_time">10pm</div> <div class="day_time">10pm</div>
<div class="day_time">11pm</div> <div class="day_time">11pm</div>
</td> </td>
<td style="position: relative;"> <td>
<div class="cell"> <div class="event_list_wrapper">
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="event_holder"> </div>
<div class="inner"> <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: #00ccee; 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>
</div> </div>

View File

@ -40,18 +40,20 @@
</table> </table>
<div class="event_list"> <div class="event_list">
<table class="table cell_map"> <table class="table cell_map">
<tr height="1"> <tr height="0">
<td style="width: 60px;"></td> <td style="width: 60px;"></td>
<td colspan="7" style="position: relative;"> <td colspan="7">
<div class="cell_wrapper"> <div class="event_list_wrapper">
<% @hours.each do |hour| %> <div class="cell_wrapper">
<div class="cell"> <% @hours.each do |hour| %>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<% end %> </div>
<% end %>
</div>
</div> </div>
</td> </td>
</tr> </tr>