calendar update
This commit is contained in:
devin
parent
7bab8bf8ad
commit
e96ebefe9c
File diff suppressed because it is too large
Load Diff
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -5,4 +5,8 @@ class Panel::Calendar::BackEnd::CalsController < OrbitBackendController
|
|||
|
||||
end
|
||||
|
||||
def new
|
||||
render :layout => false
|
||||
end
|
||||
|
||||
end
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,246 @@
|
|||
<%= stylesheet_link_tag "font-awesome" %>
|
||||
<%= stylesheet_link_tag "calendar" %>
|
||||
|
||||
this is calendar page
|
||||
|
||||
<%= stylesheet_link_tag "bootstrap-responsive" %>
|
||||
<% content_for :page_specific_javascript do %>
|
||||
<%= javascript_include_tag "calendarAPI" %>
|
||||
<% 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">×</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>
|
||||
113
vendor/built_in_modules/calendar/app/views/panel/calendar/back_end/cals/new.html.erb
vendored
Normal file
113
vendor/built_in_modules/calendar/app/views/panel/calendar/back_end/cals/new.html.erb
vendored
Normal 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>
|
||||
Loading…
Reference in New Issue