calendar agenda view update
This commit is contained in:
devin
chris
parent
513671e498
commit
d070c70512
|
|
@ -169,14 +169,43 @@
|
|||
#calendar_agenda .table {
|
||||
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 {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-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 {
|
||||
font-family: Tahoma, sans-serif;
|
||||
}
|
||||
.has_event {
|
||||
background-color: #08c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* day view */
|
||||
#calendar_day .header {
|
||||
|
|
|
|||
|
|
@ -1,267 +1,225 @@
|
|||
<div id="calendar_agenda">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="span2"></th>
|
||||
<th class="span2"></th>
|
||||
<th class=""></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="today">Thu, Sep 6</th>
|
||||
<td class="event_time">9:00am - 9:30am</td>
|
||||
<td>
|
||||
<div class="event" style="color: #ffcc00;">Commuting time, from home to RD</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<td class="event_time">9:30am - 12:00am</td>
|
||||
<td>
|
||||
<div class="event" style="color: #ffcc00;">Work on Thu project, and ask ika for help if possible</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<td class="event_time">13:30pm - 18:00pm</td>
|
||||
<td>
|
||||
<div class="event" style="color: #ffcc00;">Template design, at least finish 2 template</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Fri, Sep 7</th>
|
||||
<td class="event_time">9:00am - 18:00pm</td>
|
||||
<td>
|
||||
<div class="event" style="color: #ddee00;">Take a day off</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Sat, Sep 8</th>
|
||||
<td class="event_time">7:00am - 7:50pm</td>
|
||||
<td>
|
||||
<div class="event" style="color: #00ddee;">Work out with Joseph</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- <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 colspan="8" style="border:0;">
|
||||
<div class="event_list_wrapper" style="height:50px;">
|
||||
<table style="position: absolute; width: 100%; height: 50px; top: 0;">
|
||||
<tr>
|
||||
<td style="border: 0; background: none; width: 60px;"></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>
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="event_list">
|
||||
<table class="table cell_map">
|
||||
<tr height="0">
|
||||
<td style="width: 60px;"></td>
|
||||
<td colspan="7">
|
||||
<div class="event_list_wrapper">
|
||||
<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>
|
||||
</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 class="row-fluid">
|
||||
<div class="span3">
|
||||
<h4>September</h4>
|
||||
<div class="tiny_calendar">
|
||||
<table class="table">
|
||||
<tr>
|
||||
<th class="week_title">Sun</th>
|
||||
<th class="week_title">Mon</th>
|
||||
<th class="week_title">Tue</th>
|
||||
<th class="week_title">Wed</th>
|
||||
<th class="week_title">Thu</th>
|
||||
<th class="week_title">Fri</th>
|
||||
<th class="week_title">Sat</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>4</td>
|
||||
<td>5</td>
|
||||
<td>6</td>
|
||||
<td>7</td>
|
||||
<td>8</td>
|
||||
<td>9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>11</td>
|
||||
<td>12</td>
|
||||
<td class="has_event">13</td>
|
||||
<td>14</td>
|
||||
<td>15</td>
|
||||
<td>16</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>17</td>
|
||||
<td>18</td>
|
||||
<td>19</td>
|
||||
<td>20</td>
|
||||
<td>21</td>
|
||||
<td>22</td>
|
||||
<td>23</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24</td>
|
||||
<td>25</td>
|
||||
<td>26</td>
|
||||
<td>27</td>
|
||||
<td>28</td>
|
||||
<td>29</td>
|
||||
<td>30</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<table class="table event_list">
|
||||
<thead>
|
||||
<tr height="0">
|
||||
<th class="span2"></th>
|
||||
<th class="span2"></th>
|
||||
<th class=""></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="today">Thu, Sep 6</th>
|
||||
<td class="event_time">9:00am - 9:30am</td>
|
||||
<td>
|
||||
<div class="event" style="color: #ffcc00;">Commuting time, from home to RD</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<td class="event_time">9:30am - 12:00am</td>
|
||||
<td>
|
||||
<div class="event" style="color: #ffcc00;">Work on Thu project, and ask ika for help if possible</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<td class="event_time">13:30pm - 18:00pm</td>
|
||||
<td>
|
||||
<div class="event" style="color: #ffcc00;">Template design, at least finish 2 template</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Fri, Sep 7</th>
|
||||
<td class="event_time">9:00am - 18:00pm</td>
|
||||
<td>
|
||||
<div class="event" style="color: #ddee00;">Take a day off</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Sat, Sep 8</th>
|
||||
<td class="event_time">7:00am - 7:50pm</td>
|
||||
<td>
|
||||
<div class="event" style="color: #00ddee;">Work out with Joseph</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<div class="row-fluid">
|
||||
<div class="span3">
|
||||
<h4>October</h4>
|
||||
<div class="tiny_calendar">
|
||||
tiny calendar goes here
|
||||
</div>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<table class="table event_list">
|
||||
<thead>
|
||||
<tr height="0">
|
||||
<th class="span2"></th>
|
||||
<th class="span2"></th>
|
||||
<th class=""></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Thu, Sep 6</th>
|
||||
<td class="event_time">9:00am - 9:30am</td>
|
||||
<td>
|
||||
<div class="event" style="color: #ffcc00;">Commuting time, from home to RD</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<td class="event_time">9:30am - 12:00am</td>
|
||||
<td>
|
||||
<div class="event" style="color: #ffcc00;">Work on Thu project, and ask ika for help if possible</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<td class="event_time">13:30pm - 18:00pm</td>
|
||||
<td>
|
||||
<div class="event" style="color: #ffcc00;">Template design, at least finish 2 template</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Fri, Sep 7</th>
|
||||
<td class="event_time">9:00am - 18:00pm</td>
|
||||
<td>
|
||||
<div class="event" style="color: #ddee00;">Take a day off</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Sat, Sep 8</th>
|
||||
<td class="event_time">7:00am - 7:50pm</td>
|
||||
<td>
|
||||
<div class="event" style="color: #00ddee;">Work out with Joseph</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span3">
|
||||
<h4>November</h4>
|
||||
<div class="tiny_calendar">
|
||||
tiny calendar goes here
|
||||
</div>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<table class="table event_list">
|
||||
<thead>
|
||||
<tr height="0">
|
||||
<th class="span2"></th>
|
||||
<th class="span2"></th>
|
||||
<th class=""></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Thu, Sep 6</th>
|
||||
<td class="event_time">9:00am - 9:30am</td>
|
||||
<td>
|
||||
<div class="event" style="color: #ffcc00;">Commuting time, from home to RD</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<td class="event_time">9:30am - 12:00am</td>
|
||||
<td>
|
||||
<div class="event" style="color: #ffcc00;">Work on Thu project, and ask ika for help if possible</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<td class="event_time">13:30pm - 18:00pm</td>
|
||||
<td>
|
||||
<div class="event" style="color: #ffcc00;">Template design, at least finish 2 template</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Fri, Sep 7</th>
|
||||
<td class="event_time">9:00am - 18:00pm</td>
|
||||
<td>
|
||||
<div class="event" style="color: #ddee00;">Take a day off</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Sat, Sep 8</th>
|
||||
<td class="event_time">7:00am - 7:50pm</td>
|
||||
<td>
|
||||
<div class="event" style="color: #00ddee;">Work out with Joseph</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<%= stylesheet_link_tag "font-awesome" %>
|
||||
<%= stylesheet_link_tag "calendar" %>
|
||||
<%= stylesheet_link_tag "bootstrap-responsive" %>
|
||||
<%= javascript_include_tag "cals" %>
|
||||
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.0/themes/cupertino/jquery-ui.css">
|
||||
|
|
|
|||
Reference in New Issue