calendar update

This commit is contained in:
devin 2012-09-13 18:06:18 +08:00
parent 1917ce5cf5
commit 3e3699c873
10 changed files with 594 additions and 222 deletions

View File

@ -3,31 +3,81 @@ $(window).load(function(){
$('.color-picker').miniColors(); // just in category view $('.color-picker').miniColors(); // just in category view
} }
var view_url = 'http://localhost:3000/panel/calendar/back_end/cals/';
// below calendar start // below calendar start
// month view $.get(view_url+'month_view', function(data) {
if($('#calendar_month').length > 0){ $('#view_holder').html(data);
var $c_table = $('#calendar_month'); month_fn();
var sum_h = 0;
var context_h = $('#main-sidebar').outerHeight();
$('#main-wrap > *').not('#orbit_calendar, .modal').each(function(){
sum_h += $(this).outerHeight();
}); });
$.get(view_url+'new', function(data) {
$('#create .modal-body').html(data);
});
// view switch (for view test)
$('.mode_switch').click(function(){
var target = $(this).text();
$.get(view_url+target+'_view', function(data) {
$('#view_holder').html(data);
switch(target){
case 'month':
month_fn();
break;
case 'week':
week_fn();
break;
case 'day':
day_fn();
break;
case 'agenda':
agenda_fn();
break;
}
});
});
// month fn
var month_fn = function(){
$('.current_day_title').text('September 2012');
// month view
if($('#calendar_month').length > 0){
var $c_table = $('#calendar_month');
var sum_h = 0;
var context_h = $('#main-sidebar').outerHeight();
$('#main-wrap > *').not('#orbit_calendar, .modal').each(function(){
sum_h += $(this).outerHeight();
});
$c_table
// .height(context_h-sum_h-64)
.find('.month_row')
.not('.month_row.header')
.height((context_h-sum_h-92) / 6);
$(window).resize(function(){
$c_table $c_table
// .height(context_h-sum_h-64)
.find('.month_row') .find('.month_row')
.not('.month_row.header') .not('.month_row.header')
.height(($('#main-sidebar').outerHeight()-sum_h-92) / 6); .height((context_h-sum_h-92) / 6);
});
$(window).resize(function(){
$c_table
.find('.month_row')
.not('.month_row.header')
.height(($('#main-sidebar').outerHeight()-sum_h-92) / 6);
});
}
};
// week fn
var week_fn = function(){
$('.current_day_title').text('September 2 - 8, 2012');
} }
$.get('http://localhost:3000/panel/calendar/back_end/cals/new', function(data) {
$('#create .modal-body').html(data); // day fn
}); var day_fn = function(){
$('.current_day_title').text('September 2, 2012');
}
// agenda fn
var agenda_fn = function(){
$('.current_day_title').text('September 2, 2012');
}
}); });

View File

@ -13,9 +13,25 @@
margin-right: 4px; margin-right: 4px;
vertical-align: bottom; vertical-align: bottom;
} }
.current_day_title {
text-align: center;
line-height: 28px;
}
.calendar_mode { .calendar_mode {
float: right; float: right;
} }
.mode_switch {
text-transform: capitalize;
}
.today {
background-color: #D9EDF7;
}
.event {
font-size: 12px;
border-radius: 3px;
cursor: pointer;
padding: 1px 3px;
}
/* month view */ /* month view */
#calendar_month { #calendar_month {
border-bottom: solid 1px #ddd; border-bottom: solid 1px #ddd;
@ -65,16 +81,11 @@
text-decoration: underline; text-decoration: underline;
} }
#calendar_month .month_row td.today { #calendar_month .month_row td.today {
background-color: #D9EDF7;
border-bottom: solid 1px #fff; border-bottom: solid 1px #fff;
border-top: solid 1px #fff; border-top: solid 1px #fff;
} }
#calendar_month .month_row .event { #calendar_month .month_row .event {
padding: 1px 3px;
margin: 0 -2px; margin: 0 -2px;
font-size: 12px;
border-radius: 3px;
cursor: pointer;
position: relative; position: relative;
color: #000; color: #000;
} }
@ -87,6 +98,87 @@
border-left: solid 1px #ddd; border-left: solid 1px #ddd;
} }
/* agenda view */
#calendar_agenda {
border-bottom: solid 1px #ddd;
}
#calendar_agenda .table {
margin-bottom: 0;
}
.event_time {
font-family: Tahoma, sans-serif;
}
/* day view */
#calendar_day .header {
margin-bottom: 10px;
}
#calendar_day .header th {
text-align: center;
}
#calendar_day td {
border: 0;
}
#calendar_day .event {
margin-bottom: 2px;
}
#calendar_day .all_day_event {
background: #eee;
border: solid 1px #ddd
}
#calendar_day .event_list .table {
border-top: solid 1px #ddd;
}
#calendar_day .event_list td {
padding: 0;
}
#calendar_day .event_list .day_time {
height: 30px;
border-bottom: solid 1px #ddd;
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 {
outline: solid 1px #fff;
}
#calendar_day .event dl, #calendar_day .event dt, #calendar_day .event dd {
margin: 0;
padding: 0;
}
#calendar_day .event dl {
padding: 3px;
}
#calendar_day .event dt {
font-size: 11px;
font-weight: normal;
line-height: 12px;
}
/* calendars(category) */ /* calendars(category) */
.calendars_color_tag { .calendars_color_tag {

View File

@ -8,5 +8,21 @@ class Panel::Calendar::BackEnd::CalsController < OrbitBackendController
def new def new
render :layout => false render :layout => false
end end
def day_view
render :layout => false
end
def week_view
render :layout => false
end
def month_view
render :layout => false
end
def agenda_view
render :layout => false
end
end end

View File

@ -0,0 +1,48 @@
<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>

View File

@ -0,0 +1,155 @@
<div id="calendar_day">
<table class="table header">
<tr>
<th class="span1"></th>
<th>
<h2>Sunday 9/2</h2>
</th>
</tr>
<tr>
<td></td>
<td class="all_day_event">
<div class="event" style="background-color: #ffcc00;">event1</div>
<div class="event" style="background-color: #ffcc00;">event2</div>
</td>
</tr>
</table>
<div class="event_list">
<table class="table">
<tr>
<td style="width: 60px;">
<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 style="position: relative;">
<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 class="event_holder">
<div class="event" style="background-color: #66cc00; top: 0;">
<dl>
<dt>10:30am - 11:00am</dt>
<dd>template</dd>
</dl>
</div>
<div class="event" style="background-color: #00aacc; top: 39px;">
<dl>
<dt>10:30am - 11:00am</dt>
<dd>template</dd>
</dl>
</div>
<div class="event half" style="background-color: #ccffee; top: 117px;">
<dl>
<dt>10:30am - template</dt>
<dd></dd>
</dl>
</div>
<div class="event" style="background-color: #00ffee; top: 195px; width: 85%;">
<dl>
<dt>10:30am - 11:00am</dt>
<dd>template</dd>
</dl>
</div>
<div class="event over" style="background-color: #00ffee; top: 214px; left: 50%; width: 50%;">
<dl>
<dt>10:30am - 11:00am</dt>
<dd>template</dd>
</dl>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>

View File

@ -28,189 +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="span4"> <div class="span2">
<h3>Semptember 2012</h3>
</div>
<div class="span8">
<div class="btn-group calendar_mode" data-toggle="buttons-radio">
<button class="btn">Day</button>
<button class="btn">Week</button>
<button class="btn active">Month</button>
<button class="btn">Agenda</button>
</div>
</div>
</div>
<div id="calendar_month">
<div class="month_row header">
<table class="table">
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</table>
</div>
<div class="month_row">
<table class="table month_table">
<tr>
<td class="disable"></td>
<td class="disable"></td>
<td class="disable"></td>
<td class="disable"></td>
<td class="disable"></td>
<td class="disable"></td>
<td></td>
</tr>
</table>
<table class="table month_date">
<tr>
<td class="day_title disable">Aug 26</td>
<td class="day_title disable">27</td>
<td class="day_title disable">28</td>
<td class="day_title disable">29</td>
<td class="day_title disable">30</td>
<td class="day_title disable">31</td>
<td>Sep 1</td>
</tr>
</table>
</div>
<div class="month_row">
<table class="table month_table">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="table month_date">
<tr>
<td class="day_title">2</td>
<td class="day_title">3</td>
<td class="day_title">4</td>
<td class="day_title">5</td>
<td class="day_title">6</td>
<td class="day_title">7</td>
<td class="day_title">8</td>
</tr>
</table>
</div>
<div class="month_row">
<table class="table month_table">
<tr>
<td></td>
<td></td>
<td class="today"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="table month_date">
<tr>
<td class="day_title">9</td>
<td class="day_title">10</td>
<td class="day_title">11</td>
<td class="day_title">12</td>
<td class="day_title">13</td>
<td class="day_title">14</td>
<td class="day_title">15</td>
</tr>
<tr>
<td colspan="7"><div class="event" style="background-color: #ffcc00;">7pm - 9pm test event</div></td>
</tr>
<tr>
<td colspan="3"></td>
<td><div class="event" style="color: #ffcc00;">7pm - 9pm test event</div></td>
<td colspan="3"></td>
</tr>
</table>
</div>
<div class="month_row">
<table class="table month_table">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="table month_date">
<tr>
<td class="day_title">16</td>
<td class="day_title">17</td>
<td class="day_title">18</td>
<td class="day_title">19</td>
<td class="day_title">20</td>
<td class="day_title">21</td>
<td class="day_title">22</td>
</tr>
</table>
</div>
<div class="month_row">
<table class="table month_table">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="table month_date">
<tr>
<td class="day_title">23</td>
<td class="day_title">24</td>
<td class="day_title">25</td>
<td class="day_title">26</td>
<td class="day_title">27</td>
<td class="day_title">28</td>
<td class="day_title">29</td>
</tr>
</table>
</div>
<div class="month_row">
<table class="table month_table">
<tr>
<td></td>
<td class="disable"></td>
<td class="disable"></td>
<td class="disable"></td>
<td class="disable"></td>
<td class="disable"></td>
<td class="disable"></td>
</tr>
</table>
<table class="table month_date">
<tr>
<td>30</td>
<td class="day_title disable">Nov 1</td>
<td class="day_title disable">2</td>
<td class="day_title disable">3</td>
<td class="day_title disable">4</td>
<td class="day_title disable">5</td>
<td class="day_title disable">6</td>
</tr>
</table>
</div>
</div>
</div>
<div class="form-actions form-fixed">
<div class="row-fluid">
<div class="span8">
<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>
@ -221,6 +39,24 @@
</div> </div>
</div> </div>
</div> </div>
<div class="span7">
<h4 class="current_day_title">Semptember 2012</h4>
</div>
<div class="span3">
<div class="btn-group calendar_mode" data-toggle="buttons-radio">
<button class="btn mode_switch">day</button>
<button class="btn mode_switch">week</button>
<button class="btn active mode_switch">month</button>
<button class="btn mode_switch">agenda</button>
</div>
</div>
</div>
<div id="view_holder"></div>
</div>
<div class="form-actions form-fixed">
<div class="row-fluid">
<div class="span8">
</div>
<div class="span4"> <div class="span4">
<a id="create_event" href="" class="btn btn-primary pull-right">Add</a> <a id="create_event" href="" class="btn btn-primary pull-right">Add</a>
</div> </div>
@ -228,19 +64,4 @@
</div> </div>
<div id="create" class="modal" style="right: 8px; bottom: 50px; left: auto; top: auto; width: 330px; margin: 0;"> <div id="create" class="modal" style="right: 8px; bottom: 50px; left: auto; top: auto; width: 330px; margin: 0;">
<div class="modal-body"></div> <div class="modal-body"></div>
</div>
<div id="quick_view" class="modal" style="width: 300px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Event Name</h3>
</div>
<div class="modal-body">
<div class="event_summary">
Thu, September 13
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn">Delete</a>
<a href="#" class="btn btn-primary">Edit</a>
</div>
</div> </div>

View File

@ -0,0 +1,182 @@
<div id="calendar_month">
<div class="month_row header">
<table class="table">
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</table>
</div>
<div class="month_row">
<table class="table month_table">
<tr>
<td class="disable"></td>
<td class="disable"></td>
<td class="disable"></td>
<td class="disable"></td>
<td class="disable"></td>
<td class="disable"></td>
<td></td>
</tr>
</table>
<table class="table month_date">
<tr>
<td class="day_title disable">Aug 26</td>
<td class="day_title disable">27</td>
<td class="day_title disable">28</td>
<td class="day_title disable">29</td>
<td class="day_title disable">30</td>
<td class="day_title disable">31</td>
<td>Sep 1</td>
</tr>
</table>
</div>
<div class="month_row">
<table class="table month_table">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="table month_date">
<tr>
<td class="day_title">2</td>
<td class="day_title">3</td>
<td class="day_title">4</td>
<td class="day_title">5</td>
<td class="day_title">6</td>
<td class="day_title">7</td>
<td class="day_title">8</td>
</tr>
</table>
</div>
<div class="month_row">
<table class="table month_table">
<tr>
<td></td>
<td></td>
<td class="today"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="table month_date">
<tr>
<td class="day_title">9</td>
<td class="day_title">10</td>
<td class="day_title">11</td>
<td class="day_title">12</td>
<td class="day_title">13</td>
<td class="day_title">14</td>
<td class="day_title">15</td>
</tr>
<tr>
<td colspan="7"><div class="event" style="background-color: #ffcc00;">7pm - 9pm test event</div></td>
</tr>
<tr>
<td colspan="3"></td>
<td><div class="event" style="color: #ffcc00;">7pm - 9pm test event</div></td>
<td colspan="3"></td>
</tr>
</table>
</div>
<div class="month_row">
<table class="table month_table">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="table month_date">
<tr>
<td class="day_title">16</td>
<td class="day_title">17</td>
<td class="day_title">18</td>
<td class="day_title">19</td>
<td class="day_title">20</td>
<td class="day_title">21</td>
<td class="day_title">22</td>
</tr>
</table>
</div>
<div class="month_row">
<table class="table month_table">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="table month_date">
<tr>
<td class="day_title">23</td>
<td class="day_title">24</td>
<td class="day_title">25</td>
<td class="day_title">26</td>
<td class="day_title">27</td>
<td class="day_title">28</td>
<td class="day_title">29</td>
</tr>
</table>
</div>
<div class="month_row">
<table class="table month_table">
<tr>
<td></td>
<td class="disable"></td>
<td class="disable"></td>
<td class="disable"></td>
<td class="disable"></td>
<td class="disable"></td>
<td class="disable"></td>
</tr>
</table>
<table class="table month_date">
<tr>
<td>30</td>
<td class="day_title disable">Nov 1</td>
<td class="day_title disable">2</td>
<td class="day_title disable">3</td>
<td class="day_title disable">4</td>
<td class="day_title disable">5</td>
<td class="day_title disable">6</td>
</tr>
</table>
</div>
</div>
<div id="quick_view" class="modal" style="width: 300px; top: 60%;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Event Name</h3>
</div>
<div class="modal-body">
<div class="event_summary">
Thu, September 13
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn">Delete</a>
<a href="#" class="btn btn-primary">Edit</a>
</div>
</div>

View File

@ -1,5 +1,8 @@
<div class="event_controller"> <div class="event_controller">
<form class="form-horizontal"> <form class="form-horizontal">
<div class="row-fluid">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="row-fluid"> <div class="row-fluid">
<input class="span12" type="text" placeholder="Event name"> <input class="span12" type="text" placeholder="Event name">
</div> </div>

View File

@ -3,6 +3,10 @@ Rails.application.routes.draw do
namespace :calendar do namespace :calendar do
namespace :back_end do namespace :back_end do
match 'cals/agenda_view' => 'cals#agenda_view', :via => :get
match 'cals/month_view' => 'cals#month_view', :via => :get
match 'cals/day_view' => 'cals#day_view', :via => :get
match 'cals/week_view' => 'cals#week_view', :via => :get
resources :cals resources :cals
resources :calendar_categories resources :calendar_categories