calendar update

This commit is contained in:
devin 2012-09-12 16:16:01 +08:00
parent 7bab8bf8ad
commit e96ebefe9c
7 changed files with 1669 additions and 5 deletions

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,33 @@
$(window).load(function(){
if($('.color-picker').length > 0){
$('.color-picker').miniColors(); // just in category view
}
// below calendar start
// 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
.find('.month_row')
.not('.month_row.header')
.height(($('#main-sidebar').outerHeight()-sum_h-92) / 6);
});
}
$.get('http://localhost:3000/panel/calendar/back_end/cals/new', function(data) {
$('#create .modal-body').html(data);
});
});

View File

@ -0,0 +1,127 @@
/* orbit calendar */
#orbit_calendar {
padding: 10px 8px;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
.calendar_color_tag {
display: inline-block;
width: 18px;
height: 18px;
margin-right: 4px;
vertical-align: bottom;
}
.calendar_mode {
float: right;
}
/* month view */
#calendar_month {
border-bottom: solid 1px #ddd;
}
#calendar_month .month_row {
position: relative;
border: solid 1px #ddd;
border-bottom: 0;
height: 60px;
overflow: hidden;
}
#calendar_month .month_row .table {
table-layout: fixed;
margin-bottom: 0;
width: 100%;
position: absolute;
}
#calendar_month .month_row .table td {
border: 0;
border-left: solid 1px #ddd;
padding: 2px 4px 0 4px;
}
#calendar_month .month_row .table td:first-child {
border-left: 0;
}
#calendar_month .month_row.header {
height: 28px;
border: 0;
}
#calendar_month .month_row.header th {
font-size: 12px;
padding: 4px;
border: 0;
}
#calendar_month .month_row .month_table {
height: 100%;
}
#calendar_month .month_row .month_date {
color: #666;
font-size: 11px;
cursor: pointer;
}
#calendar_month .month_row .month_date td {
border-left: 0
}
#calendar_month .month_row .month_date .day_title:hover {
text-decoration: underline;
}
#calendar_month .month_row td.today {
background-color: #D9EDF7;
border-bottom: solid 1px #fff;
border-top: solid 1px #fff;
}
#calendar_month .month_row .event {
padding: 1px 3px;
margin: 0 -2px;
font-size: 12px;
border-radius: 3px;
cursor: pointer;
position: relative;
color: #000;
}
#calendar_month .month_row .month_date .event:hover {
text-decoration: none !important;
}
#calendar_month .month_row td.disable {
background-color: #f6f6f6;
color: #ccc;
border-left: solid 1px #ddd;
}
/* calendars(category) */
.calendars_color_tag {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 3px;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
}
/* Event Controller */
.event_controller {
width: 300px;
}
.event_controller .row-fluid {
margin-bottom: 6px;
}
.event_controller .row-fluid .control-label {
line-height: 30px;
}
.close {
border: 0;
background: none;
}
/* miniColors tweak */
.miniColors-trigger {
width: 20px;
height: 20px;
margin-bottom: 10px;
margin-left: 10px;
border-color: #f1f1f1;
}
.miniColors-selector {
float: none;
margin: 4px 0 0 0;
}

View File

@ -5,4 +5,8 @@ class Panel::Calendar::BackEnd::CalsController < OrbitBackendController
end end
def new
render :layout => false
end
end end

View File

@ -1 +1,91 @@
this is category page <%= stylesheet_link_tag "jquery.miniColors" %>
<%= stylesheet_link_tag "calendar" %>
<%= javascript_include_tag "jquery.miniColors.min" %>
<% content_for :page_specific_javascript do %>
<%= javascript_include_tag "calendarAPI" %>
<% end %>
<div id="filter" class="subnav">
<div class="filters">
<div id="sort_headers" class="table-label">
<table class="table main-list">
<thead>
<tr>
<th class="span2"><span class="" title="">Key</span></th>
<th class="span2">Color</th>
<th class="span2">English</th>
<th class="span2">Chiness</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<table id="callendars" class="table main-list">
<thead>
<tr>
<th class="span2"></th>
<th class="span2"></th>
<th class="span2"></th>
<th class="span2"></th>
</tr>
</thead>
<tbody>
<tr id="" class="with_action">
<td>
key_name
<div class="quick-edit">
<ul class="nav nav-pills hide">
<li><a href="">Category Authorization</a></li>
<li><a href="">Edit</a></li>
<li><a href="">Delete</a></li>
</ul>
</div>
</td>
<td>
<span class="calendars_color_tag" style="background-color: #fc3"></span>
</td>
<td>English_title</td>
<td>Chinese_title</td>
</tr>
</tbody>
</table>
<div id="form">
<form class="new_calendar" id="new_calendar" method="post"><div><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value=""></div>
<h2>Add</h2>
<div class="row-fluid">
<div class="span3">
<label for="calendar_key">Key</label>
<input id="calendar_key" name="calendars[key]" size="30" type="text">
</div>
<div class="span2">
<label for="">Color</label>
<input type="text" name="calendar_color" class="color-picker miniColors span5" size="7" maxlength="7" autocomplete="off" value="#FFCC00">
</div>
</div>
<div>
<div class="control-group">
<label class="control-label" for="name-zh_tw">Name-chinese</label>
<div class="controls">
<input class="input-xxlarge" id="" name="" size="30" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="name-en">Name-english</label>
<div class="controls">
<input class="input-xxlarge" id="" name="" size="30" type="text">
</div>
</div>
</div>
<div class="form-actions pagination-right">
<input class="btn btn-primary" name="commit" type="submit" value="Submit">
</div>
</form>
</div>

View File

@ -1,7 +1,246 @@
<%= stylesheet_link_tag "font-awesome" %>
<%= stylesheet_link_tag "calendar" %> <%= stylesheet_link_tag "calendar" %>
<%= stylesheet_link_tag "bootstrap-responsive" %>
this is calendar page
<% content_for :page_specific_javascript do %> <% content_for :page_specific_javascript do %>
<%= javascript_include_tag "calendarAPI" %> <%= javascript_include_tag "calendarAPI" %>
<% end %> <% end %>
<div id="filter" class="subnav">
<ul class="nav nav-pills filter">
<li class="accordion-group">
<div class="accordion-heading">
<a href="#collapse-categories" data-toggle="collapse" data-parent=".filters" class="accordion-toggle"><span class="" title="">Calendar</span> <b class="web-symbol"></b></a>
</div>
</li>
</ul>
<div class="filters">
<div class="accordion-body collapse" id="collapse-categories">
<div class="accordion-inner filter_btns cats" data-toggle="buttons-checkbox">
<a href="" class="btn" onclick="return false;"><span class="calendar_color_tag" style="background-color: #ffcc00;"></span>Calendar1</a>
<a href="" class="btn" onclick="return false;"><span class="calendar_color_tag" style="background-color: #ff6600;"></span>Calendar2</a>
<a href="" class="btn" onclick="return false;"><span class="calendar_color_tag" style="background-color: #ff4400;"></span>Calendar3</a>
</div>
<div class="filter-clear">
<a href="" class="btn" onclick="return false;" for="cats"><i class="icons-brush-large"></i>Clear</a>
</div>
</div>
</div>
</div>
<div id="orbit_calendar" class="month_view">
<div class="row-fluid">
<div class="span4">
<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-group">
<button class="btn">Today</button>
</div>
<div class="btn-group">
<button class="btn"><span class="icon-chevron-left"></span></button>
<button class="btn"><span class="icon-chevron-right"></span></button>
</div>
</div>
</div>
<div class="span4">
<a id="create_event" href="" class="btn btn-primary pull-right">Add</a>
</div>
</div>
</div>
<div id="create" class="modal" style="right: 8px; bottom: 50px; left: auto; top: auto; width: 330px; margin: 0;">
<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>

View File

@ -0,0 +1,113 @@
<div class="event_controller">
<form class="form-horizontal">
<div class="row-fluid">
<input class="span12" type="text" placeholder="Event name">
</div>
<div class="row-fluid">
<input class="span12" type="text" placeholder="Location">
</div>
<div class="row-fluid">
<label class="checkbox inline">
<input type="checkbox"> All day
</label>
<label class="checkbox inline">
<input type="checkbox"> Repeat
</label>
</div>
<div class="row-fluid">
<label class="control-label span3">From</label>
<div class="row-fluid span9">
<input class="span5" type="text" placeholder="09/12/2012">
<select name="" id="" class="span4">
<option value="">1:00</option>
<option value="">1:30</option>
<option value="">2:00</option>
<option value="">2:30</option>
<option value="">3:00</option>
<option value="">3:30</option>
<option value="">4:00</option>
<option value="">4:30</option>
<option value="">5:00</option>
<option value="">5:30</option>
<option value="">6:00</option>
<option value="">6:30</option>
<option value="">7:00</option>
<option value="">7:30</option>
<option value="">8:00</option>
<option value="">8:30</option>
<option value="">9:00</option>
<option value="">9:30</option>
<option value="">10:00</option>
<option value="">10:30</option>
<option value="">11:00</option>
<option value="">11:30</option>
<option value="">12:00</option>
<option value="">12:30</option>
</select>
<select name="" id="" class="span3">
<option value="">AM</option>
<option value="">PM</option>
</select>
</div>
</div>
<div class="row-fluid">
<label class="control-label span3">To</label>
<div class="row-fluid span9">
<input class="span5" type="text" placeholder="09/12/2012">
<select name="" id="" class="span4">
<option value="">1:00</option>
<option value="">1:30</option>
<option value="">2:00</option>
<option value="">2:30</option>
<option value="">3:00</option>
<option value="">3:30</option>
<option value="">4:00</option>
<option value="">4:30</option>
<option value="">5:00</option>
<option value="">5:30</option>
<option value="">6:00</option>
<option value="">6:30</option>
<option value="">7:00</option>
<option value="">7:30</option>
<option value="">8:00</option>
<option value="">8:30</option>
<option value="">9:00</option>
<option value="">9:30</option>
<option value="">10:00</option>
<option value="">10:30</option>
<option value="">11:00</option>
<option value="">11:30</option>
<option value="">12:00</option>
<option value="">12:30</option>
</select>
<select name="" id="" class="span3">
<option value="">AM</option>
<option value="">PM</option>
</select>
</div>
</div>
<div class="row-fluid">
<label for="" class="control-label span3">Calendars</label>
<div class="row-fluid span9">
<select name="" id="" class="span12">
<option value="">calendar 1</option>
<option value="">calendar 2</option>
<option value="">calendar 3</option>
</select>
</div>
</div>
<div class="row-fluid">
<label for="" class="control-label span3">Note</label>
<div class="row-fluid span9">
<textarea name="" id="" cols="30" rows="3" class="span12"></textarea>
</div>
</div>
<div class="row-fluid">
<div class="span9 offset3">
<button class="btn">Delete</button>
<button class="btn">Cancel</button>
<button class="btn">Create</button>
</div>
</div>
</form>
</div>