calendar agenda view update

This commit is contained in:
devin 2012-10-27 00:11:26 +08:00 committed by chris
parent 513671e498
commit d070c70512
3 changed files with 252 additions and 266 deletions

View File

@ -169,14 +169,43 @@
#calendar_agenda .table { #calendar_agenda .table {
margin-bottom: 0; margin-bottom: 0;
} }
#calendar_agenda .tiny_calendar {
border: solid 1px #eee;
}
#calendar_agenda .tiny_calendar .table th {
border-top: 0;
}
#calendar_agenda .tiny_calendar .table td {
text-align: center;
}
#calendar_agenda .event { #calendar_agenda .event {
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
#calendar_agenda .row-fluid {
margin-top: 20px;
padding-top: 20px;
border-top: dashed 1px #ddd;
}
#calendar_agenda .row-fluid:first-child {
border-top: 0;
padding-top: 0;
margin-top: 0;
}
#calendar_agenda .table.event_list .span2, #calendar_agenda .table.event_list thead th {
min-height: 0 !important;
height: 0 !important;
line-height: 0;
padding: 0;
}
.event_time { .event_time {
font-family: Tahoma, sans-serif; font-family: Tahoma, sans-serif;
} }
.has_event {
background-color: #08c;
color: #fff;
}
/* day view */ /* day view */
#calendar_day .header { #calendar_day .header {

View File

@ -1,267 +1,225 @@
<div id="calendar_agenda"> <div id="calendar_agenda">
<table class="table"> <div class="row-fluid">
<thead> <div class="span3">
<tr> <h4>September</h4>
<th class="span2"></th> <div class="tiny_calendar">
<th class="span2"></th> <table class="table">
<th class=""></th> <tr>
</tr> <th class="week_title">Sun</th>
</thead> <th class="week_title">Mon</th>
<tbody> <th class="week_title">Tue</th>
<tr> <th class="week_title">Wed</th>
<th class="today">Thu, Sep 6</th> <th class="week_title">Thu</th>
<td class="event_time">9:00am - 9:30am</td> <th class="week_title">Fri</th>
<td> <th class="week_title">Sat</th>
<div class="event" style="color: #ffcc00;">Commuting time, from home to RD</div> </tr>
</td> <tr>
</tr> <td></td>
<tr> <td></td>
<th></th> <td></td>
<td class="event_time">9:30am - 12:00am</td> <td></td>
<td> <td></td>
<div class="event" style="color: #ffcc00;">Work on Thu project, and ask ika for help if possible</div> <td>1</td>
</td> <td>2</td>
</tr> </tr>
<tr> <tr>
<th></th> <td>3</td>
<td class="event_time">13:30pm - 18:00pm</td> <td>4</td>
<td> <td>5</td>
<div class="event" style="color: #ffcc00;">Template design, at least finish 2 template</div> <td>6</td>
</td> <td>7</td>
</tr> <td>8</td>
<tr> <td>9</td>
<th>Fri, Sep 7</th> </tr>
<td class="event_time">9:00am - 18:00pm</td> <tr>
<td> <td>10</td>
<div class="event" style="color: #ddee00;">Take a day off</div> <td>11</td>
</td> <td>12</td>
</tr> <td class="has_event">13</td>
<tr> <td>14</td>
<th>Sat, Sep 8</th> <td>15</td>
<td class="event_time">7:00am - 7:50pm</td> <td>16</td>
<td> </tr>
<div class="event" style="color: #00ddee;">Work out with Joseph</div> <tr>
</td> <td>17</td>
</tr> <td>18</td>
</tbody> <td>19</td>
</table> <td>20</td>
</div> <td>21</td>
<!-- <div id="calendar_week"> <td>22</td>
<table class="table header"> <td>23</td>
<tr> </tr>
<th style="width: 44px;"></th> <tr>
<th>Sun 9/11</th> <td>24</td>
<th>Mon 9/12</th> <td>25</td>
<th class="today">Tue 9/13</th> <td>26</td>
<th>Wed 9/14</th> <td>27</td>
<th>Thu 9/15</th> <td>28</td>
<th>Fri 9/16</th> <td>29</td>
<th>Sat 9/17</th> <td>30</td>
</tr> </tr>
<tr> </table>
<td colspan="8" style="border:0;"> </div>
<div class="event_list_wrapper" style="height:50px;"> </div>
<table style="position: absolute; width: 100%; height: 50px; top: 0;"> <div class="span9">
<tr> <table class="table event_list">
<td style="border: 0; background: none; width: 60px;"></td> <thead>
<td class="all_day_event week_day"></td> <tr height="0">
<td class="all_day_event week_day"></td> <th class="span2"></th>
<td class="all_day_event week_day"></td> <th class="span2"></th>
<td class="all_day_event week_day"></td> <th class=""></th>
<td class="all_day_event week_day"></td> </tr>
<td class="all_day_event week_day"></td> </thead>
<td class="all_day_event week_day"></td> <tbody>
</tr> <tr>
</table> <th class="today">Thu, Sep 6</th>
<table class="all_day_event_holder"> <td class="event_time">9:00am - 9:30am</td>
<tr> <td>
<td rowspan="2" style="width:60px;"></td> <div class="event" style="color: #ffcc00;">Commuting time, from home to RD</div>
<td colspan="7" class="all_day_event week_day"> </td>
<div class="event half" style="background-color: #ccffee;"> </tr>
<dl> <tr>
<dt>10:30am - template</dt> <th></th>
<dd></dd> <td class="event_time">9:30am - 12:00am</td>
</dl> <td>
</div> <div class="event" style="color: #ffcc00;">Work on Thu project, and ask ika for help if possible</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td colspan="1"></td> <th></th>
<td colspan="2" class="all_day_event week_day"> <td class="event_time">13:30pm - 18:00pm</td>
<div class="event half" style="background-color: #ccffee;"> <td>
<dl> <div class="event" style="color: #ffcc00;">Template design, at least finish 2 template</div>
<dt>10:30am - template</dt> </td>
<dd></dd> </tr>
</dl> <tr>
</div> <th>Fri, Sep 7</th>
</td> <td class="event_time">9:00am - 18:00pm</td>
<td colspan="4"></td> <td>
</tr> <div class="event" style="color: #ddee00;">Take a day off</div>
</table> </td>
</div> </tr>
</td> <tr>
</tr> <th>Sat, Sep 8</th>
</table> <td class="event_time">7:00am - 7:50pm</td>
<div class="event_list"> <td>
<table class="table cell_map"> <div class="event" style="color: #00ddee;">Work out with Joseph</div>
<tr height="0"> </td>
<td style="width: 60px;"></td> </tr>
<td colspan="7"> </tbody>
<div class="event_list_wrapper"> </table>
<div class="cell_wrapper"> </div>
<div class="cell"> </div>
<div class="divide"></div> <div class="row-fluid">
</div> <div class="span3">
<div class="cell"> <h4>October</h4>
<div class="divide"></div> <div class="tiny_calendar">
</div> tiny calendar goes here
<div class="cell"> </div>
<div class="divide"></div> </div>
</div> <div class="span9">
<div class="cell"> <table class="table event_list">
<div class="divide"></div> <thead>
</div> <tr height="0">
<div class="cell"> <th class="span2"></th>
<div class="divide"></div> <th class="span2"></th>
</div> <th class=""></th>
<div class="cell"> </tr>
<div class="divide"></div> </thead>
</div> <tbody>
<div class="cell"> <tr>
<div class="divide"></div> <th>Thu, Sep 6</th>
</div> <td class="event_time">9:00am - 9:30am</td>
<div class="cell"> <td>
<div class="divide"></div> <div class="event" style="color: #ffcc00;">Commuting time, from home to RD</div>
</div> </td>
<div class="cell"> </tr>
<div class="divide"></div> <tr>
</div> <th></th>
<div class="cell"> <td class="event_time">9:30am - 12:00am</td>
<div class="divide"></div> <td>
</div> <div class="event" style="color: #ffcc00;">Work on Thu project, and ask ika for help if possible</div>
<div class="cell"> </td>
<div class="divide"></div> </tr>
</div> <tr>
<div class="cell"> <th></th>
<div class="divide"></div> <td class="event_time">13:30pm - 18:00pm</td>
</div> <td>
<div class="cell"> <div class="event" style="color: #ffcc00;">Template design, at least finish 2 template</div>
<div class="divide"></div> </td>
</div> </tr>
<div class="cell"> <tr>
<div class="divide"></div> <th>Fri, Sep 7</th>
</div> <td class="event_time">9:00am - 18:00pm</td>
<div class="cell"> <td>
<div class="divide"></div> <div class="event" style="color: #ddee00;">Take a day off</div>
</div> </td>
<div class="cell"> </tr>
<div class="divide"></div> <tr>
</div> <th>Sat, Sep 8</th>
<div class="cell"> <td class="event_time">7:00am - 7:50pm</td>
<div class="divide"></div> <td>
</div> <div class="event" style="color: #00ddee;">Work out with Joseph</div>
<div class="cell"> </td>
<div class="divide"></div> </tr>
</div> </tbody>
<div class="cell"> </table>
<div class="divide"></div> </div>
</div> </div>
<div class="cell"> <div class="row-fluid">
<div class="divide"></div> <div class="span3">
</div> <h4>November</h4>
<div class="cell"> <div class="tiny_calendar">
<div class="divide"></div> tiny calendar goes here
</div> </div>
<div class="cell"> </div>
<div class="divide"></div> <div class="span9">
</div> <table class="table event_list">
<div class="cell"> <thead>
<div class="divide"></div> <tr height="0">
</div> <th class="span2"></th>
<div class="cell"> <th class="span2"></th>
<div class="divide"></div> <th class=""></th>
</div> </tr>
</div> </thead>
</div> <tbody>
</td> <tr>
</tr> <th>Thu, Sep 6</th>
<tr> <td class="event_time">9:00am - 9:30am</td>
<td> <td>
<div class="day_time">12am</div> <div class="event" style="color: #ffcc00;">Commuting time, from home to RD</div>
<div class="day_time">1am</div> </td>
<div class="day_time">2am</div> </tr>
<div class="day_time">3am</div> <tr>
<div class="day_time">4am</div> <th></th>
<div class="day_time">5am</div> <td class="event_time">9:30am - 12:00am</td>
<div class="day_time">6am</div> <td>
<div class="day_time">7am</div> <div class="event" style="color: #ffcc00;">Work on Thu project, and ask ika for help if possible</div>
<div class="day_time">8am</div> </td>
<div class="day_time">9am</div> </tr>
<div class="day_time">10am</div> <tr>
<div class="day_time">11am</div> <th></th>
<div class="day_time">12am</div> <td class="event_time">13:30pm - 18:00pm</td>
<div class="day_time">1pm</div> <td>
<div class="day_time">2pm</div> <div class="event" style="color: #ffcc00;">Template design, at least finish 2 template</div>
<div class="day_time">3pm</div> </td>
<div class="day_time">4pm</div> </tr>
<div class="day_time">5pm</div> <tr>
<div class="day_time">6pm</div> <th>Fri, Sep 7</th>
<div class="day_time">7pm</div> <td class="event_time">9:00am - 18:00pm</td>
<div class="day_time">8pm</div> <td>
<div class="day_time">9pm</div> <div class="event" style="color: #ddee00;">Take a day off</div>
<div class="day_time">10pm</div> </td>
<div class="day_time">11pm</div> </tr>
</td> <tr>
<td class="week_day"> <th>Sat, Sep 8</th>
<div class="event_holder"> <td class="event_time">7:00am - 7:50pm</td>
<div class="inner"> <td>
</div> <div class="event" style="color: #00ddee;">Work out with Joseph</div>
</div> </td>
</td> </tr>
<td class="week_day"> </tbody>
<div class="event_holder"> </table>
<div class="inner"> </div>
</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>
</div> </div>
-->

View File

@ -1,5 +1,4 @@
<%= stylesheet_link_tag "font-awesome" %> <%= stylesheet_link_tag "font-awesome" %>
<%= stylesheet_link_tag "calendar" %>
<%= stylesheet_link_tag "bootstrap-responsive" %> <%= stylesheet_link_tag "bootstrap-responsive" %>
<%= javascript_include_tag "cals" %> <%= javascript_include_tag "cals" %>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.0/themes/cupertino/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.0/themes/cupertino/jquery-ui.css">