harry
/
calendar
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update code for calendar

This commit is contained in:
Ray 2014-12-27 19:52:47 +08:00
parent 3194764c46
commit 9cdf957071
11 changed files with 908 additions and 542 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/loading1.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

114
app/assets/javascripts/calendar.js
View File

@ -45,6 +45,7 @@ var Calendar = function(dom){
var success_event = function(data,allDay,type,addbtn){ var success_event = function(data,allDay,type,addbtn){
c.dialog.dismiss(); c.dialog.dismiss();
$('.bootstrap-datetimepicker-widget').remove();
c.event_create_space.html(data); c.event_create_space.html(data);
var create_space_height = c.event_create_space.height(), var create_space_height = c.event_create_space.height(),
create_space_width = c.event_create_space.width(); create_space_width = c.event_create_space.width();
@ -107,6 +108,7 @@ var Calendar = function(dom){
}); });
$("a.btn-close").one("click",function(){ $("a.btn-close").one("click",function(){
c.event_create_space.html("").hide(); c.event_create_space.html("").hide();
$('.bootstrap-datetimepicker-widget').remove();
return false; return false;
}); });
@ -245,16 +247,16 @@ var Calendar = function(dom){
}) })
if(view != "agenda"){ if(view != "agenda"){
if(c.currentView == "agenda"){ if(c.currentView == "agenda"){
$("#sec1").addClass("span3").removeClass("span7"); // $("#sec1").addClass("span3").removeClass("span7");
$("#sec2").show(); $("#sec2").show();
$("#sec3").addClass("span4").removeClass("span5"); // $("#sec3").addClass("span4").removeClass("span5");
agendaView.hide(); agendaView.hide();
} }
c.calendar.fullCalendar('changeView',view); c.calendar.fullCalendar('changeView',view);
}else{ }else{
$("#sec1").addClass("span7").removeClass("span3"); // $("#sec1").addClass("span7").removeClass("span3");
$("#sec2").hide(); $("#sec2").hide();
$("#sec3").addClass("span5").removeClass("span4"); // $("#sec3").addClass("span5").removeClass("span4");
agendaView.inflate(); agendaView.inflate();
} }
c.currentView = view; c.currentView = view;
@ -264,7 +266,7 @@ var Calendar = function(dom){
} }
} }
if(c.currentView == "agenda"){toggleViews("agenda");loadeventsonviewchange = true;} if(c.currentView == "agenda"){toggleViews("agenda");loadeventsonviewchange = true;}
$(document).on("DOMMouseScroll mousewheel", function(e){ c.calendar.on("DOMMouseScroll mousewheel", function(e){
if(c.calendar.fullCalendar("getView").name == "month"){ if(c.calendar.fullCalendar("getView").name == "month"){
if(!c.isFormVisible()){ if(!c.isFormVisible()){
c.dialog.dismiss(); c.dialog.dismiss();
@ -334,6 +336,7 @@ var EventDialog = function(calendar,event){
var event_quick_view = null; var event_quick_view = null;
var template = ""; var template = "";
var _this_event = null; var _this_event = null;
var month_names = ["Jan","Feb","March","April","May","June","July","Aug","Sep","Oct","Nov","Dec"];
this.inflate = function(_event){ this.inflate = function(_event){
if(!_event) throw new UserException("EventStick can't be null!"); if(!_event) throw new UserException("EventStick can't be null!");
_this_event = _event; _this_event = _event;
@ -342,27 +345,39 @@ var EventDialog = function(calendar,event){
time_string = null; time_string = null;
if(_event.allDay) { if(_event.allDay) {
start_time = (/00:00:00/i.test(_event._start.toLocaleString()) ? $.fullCalendar.formatDate(_event._start,"ddd MMM dd, yyyy") : $.fullCalendar.formatDate(_event._start,"ddd MMM dd, yyyy hh:mm")); start_time = $.fullCalendar.formatDate(_event._start,"MMM dd, yyyy");
if(_event._end) if(_event._end)
end_time = (/00:00:00/i.test(_event._end.toLocaleString()) ? $.fullCalendar.formatDate(_event._end,"ddd MMM dd, yyyy") : $.fullCalendar.formatDate(_event._end,"ddd MMM dd, yyyy hh:mm")); end_time = $.fullCalendar.formatDate(_event._end,"MMM dd, yyyy");
time_string = (_event._start === _event._end || !_event._end ? start_time : start_time + " - " + end_time); time_string = (_event._start === _event._end || !_event._end ? "<p class='start-date'><i class='icons-calendar' /> " + start_time + "</p>" : "<i class='icons-calendar' /> " + start_time + " <i class='icons-arrow-right-5' /> " + end_time + "");
} else { } else {
var reg = new RegExp(/ [0-9][0-9]:[0-9][0-9]:[0-9][0-9]/), var sh = _event._start.getHours() > 12 ? _event._start.getHours() - 12 : _event._start.getHours(),
stime = _event._start.toLocaleString().split(",")[1], eh = _event._end.getHours() > 12 ? _event._end.getHours() - 12 : _event._end.getHours(),
etime = _event._end.toLocaleString().split(",")[1]; sm = _event._start.getMinutes() < 10 ? '0' + _event._start.getMinutes() : _event._start.getMinutes(),
em = _event._end.getMinutes() < 10 ? '0' + _event._end.getMinutes() : _event._end.getMinutes(),
stime = _event._start.getHours() > 12 ? sh + ':' + sm + " PM" : sh + ':' + sm + " AM",
etime = _event._end.getHours() > 12 ? eh + ':' + em + " PM" : eh + ':' + em + " AM",
same = (_event._start.getDate() == _event._end.getDate() && _event._start.getMonth() == _event._end.getMonth() && _event._start.getFullYear() == _event._end.getFullYear());
start_time = month_names[_event._start.getMonth()] + " " + _event._start.getDate() + ", " + _event._start.getFullYear();
end_time = month_names[_event._end.getMonth()] + " " + _event._end.getDate() + ", " + _event._end.getFullYear();
start_time = _event._start.toLocaleString().replace(stime,""); time_string = (same ? "<p class='date'><i class='icons-calendar' /> " + start_time + "</p><p class='time'><i class='icons-clock' /> " + stime + " <i class='icons-arrow-right-5' /> " + etime : "<p class='start-date'><i class='icons-arrow-right-2' /> " + start_time + "<span class='pull-right'>" + stime + "</span></p><p class='end-date'><i class='icons-arrow-left-2' /> " + end_time + "<span class='pull-right'>" + etime + "</p>");
end_time = _event._end.toLocaleString().replace(etime,"");
stime = stime.substr(0,stime.length - 3);
etime = etime.substr(0,etime.length - 3);
time_string = (start_time === end_time ? start_time + " " + stime + " - " + etime : start_time + " " + stime + " - " + end_time + " " +etime );
} }
event_quick_view = $('<div class="modal" style="width: 300px; display:none; margin:0 0 0 0;"></div>'); event_quick_view = $('<div class="modal calendar-modal" style="display:none;"></div>');
template = '<div class="modal-header"><button type="button" class="close event-close-btn" data-dismiss="modal" aria-hidden="true">&times;</button><h3>'+ _event.title +'</h3></div><div class="modal-body"><div class="event_summary">'+ time_string +'</div>'+ _event.note +'</div>'; template = '<div class="modal-header">' +
'<button type="button" class="close event-close-btn" data-dismiss="modal" aria-hidden="true">&times;</button>' +
'<h3>'+ _event.title +'</h3>' +
'</div>' +
'<div class="modal-body">' +
'<div class="event_summary">' +
time_string +
'</div>' +
_event.note +
'</div>';
if(_event.can_edit){ if(_event.can_edit){
template+='<div class="modal-footer"><a href="'+ _event.delete_url +'" class="delete btn btn-primary">Delete</a><a href="'+ _event.edit_url +'" class="edit btn btn-primary" >Edit</a></div>'; template += '<div class="modal-footer">' +
'<a href="'+ _event.delete_url +'" class="delete btn btn-primary">Delete</a>' +
'<a href="'+ _event.edit_url +'" class="edit btn btn-primary" >Edit</a>' +
'</div>';
} }
} }
@ -386,6 +401,7 @@ var EventDialog = function(calendar,event){
var x = pos.x, var x = pos.x,
y = pos.y, y = pos.y,
winheight = $(window).height(); winheight = $(window).height();
console.log(event_quick_view.width())
if((x + event_quick_view.width()) > $(window).width()){ if((x + event_quick_view.width()) > $(window).width()){
x = x - event_quick_view.width(); x = x - event_quick_view.width();
} }
@ -418,13 +434,59 @@ var AgendaView = function(calendar){
var end_month = ((start_month + minDifference) > 11 ? (start_month + minDifference) - 11 : start_month + minDifference); var end_month = ((start_month + minDifference) > 11 ? (start_month + minDifference) - 11 : start_month + minDifference);
var end_year = ((start_month + minDifference) > 11 ? start_year+1 : start_year); var end_year = ((start_month + minDifference) > 11 ? start_year+1 : start_year);
var monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December']; var monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var month_template = '<div class="span4"><h4></h4><div class="tiny_calendar"><table class="table"><tbody><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></tbody></table></div></div>'; var month_template = '<div class="span4">' +
'<h4></h4>' +
'<div class="tiny_calendar">' +
'<table class="table table-condensed table-bordered">' +
'<tbody>' +
'<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>' +
'</tbody>' +
'</table>' +
'</div>' +
'</div>';
var event_list_template = '<div class="span8"><table class="table event_list"><thead><tr height="0"><th class="span3"></th><th class="span2"></th><th class=""></th></tr></thead><tbody><tr><td colspan="3" class="no_events">No events for this month.</td></tr></tbody></table></div>'; var event_list_template = '<div class="span8">' +
'<table class="table table-condensed table-bordered event_list">' +
'<thead>' +
'<tr>' +
'<th>Date</th>' +
'<th>Time</th>' +
'<th>Events</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'<tr>' +
'<td colspan="3" class="no_events">No events for this month.</td>' +
'</tr>' +
'</tbody>' +
'</table>' +
'</div>';
var head_template = '<div><label>From</label> <select name="start_month" class="input-small"></select><select name="start_year" class="input-small"></select><label>To</label> <select name="end_month" class="input-small"></select><select name="end_year" class="input-small"></select><button id="show_events" class="btn bt-filter">Show Events</button></div>'; var head_template = '<div>' +
'<label>From</label>' +
'<select name="start_month" class="input-small" />' +
'<select name="start_year" class="input-small" />' +
'<label>To</label>' +
'<select name="end_month" class="input-small" />' +
'<select name="end_year" class="input-small" />' +
'<button id="show_events" class="btn bt-filter">Show Events</button>' +
'</div>';
var event_template = "<tr><th></th><td class='event_time'></td><td><div class='event'></div></td></tr>"; var event_template = '<tr>' +
'<td />' +
'<td class="event_time" />' +
'<td>' +
'<div class="event" />' +
'</td>' +
'</tr>';
var cache = false; var cache = false;
var show_event_clicked = false; var show_event_clicked = false;
@ -570,7 +632,7 @@ var AgendaView = function(calendar){
dateFormat = $.fullCalendar.formatDate(s, "ddd dd"); dateFormat = $.fullCalendar.formatDate(s, "ddd dd");
else else
dateFormat = $.fullCalendar.formatDates(s, e, "ddd dd, MMM - {ddd dd, MMM}"); dateFormat = $.fullCalendar.formatDates(s, e, "ddd dd, MMM - {ddd dd, MMM}");
e_t.find("th").text(dateFormat); e_t.find("td:first").text(dateFormat);
e_t.find("td.event_time").text((event.allDay ? "All Day" : $.fullCalendar.formatDate(s, "hh:mm"))); e_t.find("td.event_time").text((event.allDay ? "All Day" : $.fullCalendar.formatDate(s, "hh:mm")));
e_t.find("div.event").text(event.title).css("color",event.color); e_t.find("div.event").text(event.title).css("color",event.color);
return e_t; return e_t;

115
app/assets/javascripts/calendar_frontend.js
View File

@ -80,16 +80,16 @@ var Calendar = function(dom,page_id){
}) })
if(view != "agenda"){ if(view != "agenda"){
if(c.currentView == "agenda"){ if(c.currentView == "agenda"){
$("#sec1").addClass("span3").removeClass("span7"); // $("#sec1").addClass("span3").removeClass("span7");
$("#sec2").show(); $("#sec2").show();
$("#sec3").addClass("span4").removeClass("span5"); // $("#sec3").addClass("span4").removeClass("span5");
agendaView.hide(); agendaView.hide();
} }
c.calendar.fullCalendar('changeView',view); c.calendar.fullCalendar('changeView',view);
}else{ }else{
$("#sec1").addClass("span7").removeClass("span3"); // $("#sec1").addClass("span7").removeClass("span3");
$("#sec2").hide(); $("#sec2").hide();
$("#sec3").addClass("span5").removeClass("span4"); // $("#sec3").addClass("span5").removeClass("span4");
agendaView.inflate(); agendaView.inflate();
} }
c.currentView = view; c.currentView = view;
@ -120,6 +120,7 @@ var EventDialog = function(calendar,event){
var event_quick_view = null; var event_quick_view = null;
var template = ""; var template = "";
var _this_event = null; var _this_event = null;
var month_names = ["Jan","Feb","March","April","May","June","July","Aug","Sep","Oct","Nov","Dec"];
this.inflate = function(_event){ this.inflate = function(_event){
if(!_event) throw new UserException("EventStick can't be null!"); if(!_event) throw new UserException("EventStick can't be null!");
_this_event = _event; _this_event = _event;
@ -128,27 +129,38 @@ var EventDialog = function(calendar,event){
time_string = null; time_string = null;
if(_event.allDay) { if(_event.allDay) {
start_time = (/00:00:00/i.test(_event._start.toLocaleString()) ? $.fullCalendar.formatDate(_event._start,"ddd MMM dd, yyyy") : $.fullCalendar.formatDate(_event._start,"ddd MMM dd, yyyy hh:mm")); start_time = $.fullCalendar.formatDate(_event._start,"MMM dd, yyyy");
if(_event._end) if(_event._end)
end_time = (/00:00:00/i.test(_event._end.toLocaleString()) ? $.fullCalendar.formatDate(_event._end,"ddd MMM dd, yyyy") : $.fullCalendar.formatDate(_event._end,"ddd MMM dd, yyyy hh:mm")); end_time = $.fullCalendar.formatDate(_event._end,"MMM dd, yyyy");
time_string = (_event._start === _event._end || !_event._end ? start_time : start_time + " - " + end_time); time_string = (_event._start === _event._end || !_event._end ? "<p class='start-date'><i class='icons-calendar' /> " + start_time + "</p>" : "<i class='icons-calendar' /> " + start_time + " <i class='icons-arrow-right-5' /> " + end_time + "");
} else { } else {
var reg = new RegExp(/ [0-9][0-9]:[0-9][0-9]:[0-9][0-9]/), var sh = _event._start.getHours() > 12 ? _event._start.getHours() - 12 : _event._start.getHours(),
stime = _event._start.toLocaleString().split(",")[1], eh = _event._end.getHours() > 12 ? _event._end.getHours() - 12 : _event._end.getHours(),
etime = _event._end.toLocaleString().split(",")[1]; sm = _event._start.getMinutes() < 10 ? '0' + _event._start.getMinutes() : _event._start.getMinutes(),
em = _event._end.getMinutes() < 10 ? '0' + _event._end.getMinutes() : _event._end.getMinutes(),
stime = _event._start.getHours() > 12 ? sh + ':' + sm + " PM" : sh + ':' + sm + " AM",
etime = _event._end.getHours() > 12 ? eh + ':' + em + " PM" : eh + ':' + em + " AM",
same = (_event._start.getDate() == _event._end.getDate() && _event._start.getMonth() == _event._end.getMonth() && _event._start.getFullYear() == _event._end.getFullYear());
start_time = month_names[_event._start.getMonth()] + " " + _event._start.getDate() + ", " + _event._start.getFullYear();
end_time = month_names[_event._end.getMonth()] + " " + _event._end.getDate() + ", " + _event._end.getFullYear();
start_time = _event._start.toLocaleString().replace(stime,","); time_string = (same ? "<p class='date'><i class='icons-calendar' /> " + start_time + "</p><p class='time'><i class='icons-clock' /> " + stime + " <i class='icons-arrow-right-5' /> " + etime : "<p class='start-date'><i class='icons-arrow-right-2' /> " + start_time + "<span class='pull-right'>" + stime + "</span></p><p class='end-date'><i class='icons-arrow-left-2' /> " + end_time + "<span class='pull-right'>" + etime + "</p>");
end_time = _event._end.toLocaleString().replace(etime,",");
stime = stime.substr(0,stime.length - 3);
etime = etime.substr(0,etime.length - 3);
time_string = (start_time === end_time ? start_time + " " + stime + " - " + etime : start_time + " " + stime + " - " + end_time + " " +etime );
} }
event_quick_view = $('<div class="modal" style="width: 300px; display:none; margin:0 0 0 0;"></div>'); event_quick_view = $('<div class="calendar-modal" style="display:none;"></div>');
template = '<div class="modal-header"><button type="button" class="close event-close-btn" data-dismiss="modal" aria-hidden="true">&times;</button><h3>'+ _event.title +'</h3></div><div class="modal-body"><div class="event_summary">'+ time_string +'</div>'+ _event.note +'</div><div class="modal-footer"></div>'; template = '<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close event-close-btn" data-dismiss="modal" aria-hidden="true">&times;</button>' +
'<h3>' + _event.title + '</h3>' +
'</div>' +
'<div class="modal-body">' +
'<div class="event_summary">' + time_string + '</div>' +
_event.note +
'</div>' +
'<div class="modal-footer" />' +
'</div>';
} }
this.show = function(pos){ this.show = function(pos){
if(pos){ if(pos){
var pos = getPosition(pos); var pos = getPosition(pos);
@ -201,13 +213,66 @@ var AgendaView = function(calendar){
var end_month = ((start_month + minDifference) > 11 ? (start_month + minDifference) - 11 : start_month + minDifference); var end_month = ((start_month + minDifference) > 11 ? (start_month + minDifference) - 11 : start_month + minDifference);
var end_year = ((start_month + minDifference) > 11 ? start_year+1 : start_year); var end_year = ((start_month + minDifference) > 11 ? start_year+1 : start_year);
var monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December']; var monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var month_template = '<div class="span4"><h4></h4><div class="tiny_calendar"><table class="table"><tbody><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></tbody></table></div></div>'; var month_template = '<div class="col-md-4">' +
'<h4></h4>' +
'<div class="tiny_calendar">' +
'<table class="table table-condensed table-bordered">' +
'<tbody>' +
'<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>' +
'</tbody>' +
'</table>' +
'</div>' +
'</div>';
var event_list_template = '<div class="span8"><table class="table event_list"><thead><tr height="0"><th class="span3"></th><th class="span2"></th><th class=""></th></tr></thead><tbody><tr><td colspan="3" class="no_events">No events for this month.</td></tr></tbody></table></div>'; var event_list_template = '<div class="col-md-8">' +
'<table class="table table-condensed table-bordered event_list">' +
'<thead>' +
'<tr>' +
'<th>Date</th>' +
'<th>Time</th>' +
'<th>Events</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'<tr>' +
'<td colspan="3" class="no_events">No events for this month.</td>' +
'</tr>' +
'</tbody>' +
'</table>' +
'</div>';
var head_template = '<div><label>From</label> <select name="start_month" class="input-small"></select><select name="start_year" class="input-small"></select><label>To</label> <select name="end_month" class="input-small"></select><select name="end_year" class="input-small"></select><button id="show_events" class="btn bt-filter">Show Events</button></div>'; var head_template = '<div>' +
'<label>From</label>' +
'<select name="start_month" class="form-control input-sm" />' +
'<select name="start_year" class="form-control input-sm" />' +
'<label>To</label>' +
'<select name="end_month" class="form-control input-sm" />' +
'<select name="end_year" class="form-control input-sm" />' +
'<button id="show_events" class="btn btn-sm bt-filter">Show Events</button>' +
'</div>';
var event_template = "<tr><th></th><td class='event_time'></td><td><div class='event'></div></td></tr>"; var event_template = '<tr>' +
'<td />' +
'<td class="event_time" />' +
'<td>' +
'<div class="event" />' +
'</td>' +
'</tr>';
// var month_template = '<div class="span4"><h4></h4><div class="tiny_calendar"><table class="table"><tbody><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></tbody></table></div></div>';
// var event_list_template = '<div class="span8"><table class="table event_list"><thead><tr height="0"><th class="span3"></th><th class="span2"></th><th class=""></th></tr></thead><tbody><tr><td colspan="3" class="no_events">No events for this month.</td></tr></tbody></table></div>';
// var head_template = '<div><label>From</label> <select name="start_month" class="input-small"></select><select name="start_year" class="input-small"></select><label>To</label> <select name="end_month" class="input-small"></select><select name="end_year" class="input-small"></select><button id="show_events" class="btn bt-filter">Show Events</button></div>';
// var event_template = "<tr><th></th><td class='event_time'></td><td><div class='event'></div></td></tr>";
var cache = false; var cache = false;
var show_event_clicked = false; var show_event_clicked = false;
@ -353,7 +418,7 @@ var AgendaView = function(calendar){
dateFormat = $.fullCalendar.formatDate(s, "ddd dd"); dateFormat = $.fullCalendar.formatDate(s, "ddd dd");
else else
dateFormat = $.fullCalendar.formatDates(s, e, "ddd dd, MMM - {ddd dd, MMM}"); dateFormat = $.fullCalendar.formatDates(s, e, "ddd dd, MMM - {ddd dd, MMM}");
e_t.find("th").text(dateFormat); e_t.find("td:first").text(dateFormat);
e_t.find("td.event_time").text((event.allDay ? "All Day" : $.fullCalendar.formatDate(s, "hh:mm"))); e_t.find("td.event_time").text((event.allDay ? "All Day" : $.fullCalendar.formatDate(s, "hh:mm")));
e_t.find("div.event").text(event.title).css("color",event.color); e_t.find("div.event").text(event.title).css("color",event.color);
return e_t; return e_t;
@ -406,7 +471,7 @@ var AgendaView = function(calendar){
var Month = function(month,year){ var Month = function(month,year){
_this = this; _this = this;
this.monthDom = $("<div class='row-fluid' data-year='"+year+"' data-month='"+month+"'></div>"); this.monthDom = $("<div class='row' data-year='"+year+"' data-month='"+month+"'></div>");
var template = $(month_template); var template = $(month_template);
var list_template = $(event_list_template); var list_template = $(event_list_template);
var firstDay = new Date(year,month,1); var firstDay = new Date(year,month,1);

394
app/assets/stylesheets/calendar.css
View File

@ -1,394 +0,0 @@
/* orbit calendar */
#orbit_calendar {
padding: 10px 8px;
min-width: 960px;
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;
}
.current_day_title {
text-align: center;
line-height: 28px;
}
.calendar_mode {
z-index: 2;
}
.mode_switch {
text-transform: capitalize;
}
.today {
background-color: #D9EDF7;
}
.event {
font-size: 12px;
border-radius: 3px;
cursor: pointer;
padding: 1px 3px;
font-weight: bold;
box-shadow: inset 0 0 1px black;
-webkit-box-shadow: inset 0 0 1px black;
-moz-box-shadow: inset 0 0 1px black;
}
.modal-body {
max-height: 515px;
}
.event_list_wrapper {
position: relative;
}
.event_list .cell {
height: 39px;
border: solid 1px #ddd;
border-top: 0;
}
.event_list .divide {
height: 19px;
margin-bottom: 18px;
border-bottom: solid 1px #eee;
}
.event_list .day_time {
height: 31px;
border-bottom: solid 1px #ddd;
border-left: solid 1px #ddd;
text-align: right;
padding: 4px;
}
.event dl, .event dt, .event dd {
margin: 0;
padding: 0;
}
.event dl {
padding: 3px;
}
.event dt {
font-size: 11px;
font-weight: normal;
line-height: 12px;
}
#calendar_day .event_holder {
width: 100%;
/*height: 100%;*/
position: absolute;
top: 0;
z-index: 1;
}
.event_holder .inner {
position: relative;
margin: 0 16px 0 2px;
}
.event_holder .event {
padding: 0px;
position: absolute;
width: 100%;
}
.event_holder .event.half {
}
.event_holder .event.over {
border: solid 1px #fff;
}
/* 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 {
border-bottom: solid 1px #fff;
border-top: solid 1px #fff;
}
#calendar_month .month_row .event {
margin: 0 -2px;
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;
}
#calendar_month .event.single {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* agenda view */
#calendar_agenda {
margin-top: 20px;
}
#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 {
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;
}
/* week view */
#calendar_week {
}
#calendar_week .cell_wrapper {
position: absolute;
width: 100%;
}
#calendar_week td {
padding: 0;
}
#calendar_week .table {
margin-bottom: 0;
}
#calendar_week .header {
margin-bottom: 12px;
border-top: 0;
table-layout: fixed;
}
#calendar_week .header th {
text-align: center;
font-size: 12px;
}
#calendar_week .header td {
border: solid 1px #ddd;
/*background-color: #eee;*/
}
#calendar_week .week_day {
padding: 0 2px;
border: solid 1px #ddd;
}
#calendar_week .header .week_day {
padding: 2px 4px 0px 2px;
}
#calendar_week .event_list .event {
position: absolute;
width: 100%;
margin-bottom: 2px;
}
#calendar_week .cell_map {
margin-bottom: 18px;
}
#calendar_week .cell_map td {
border-top: 0;
border-bottom: 0;
}
#calendar_week .cell_map tr:first-child td {
border-top: solid 1px #ddd;
}
#calendar_week .event_holder .inner {
margin: 0 8px 0 0;
}
#calendar_week .all_day_event_holder {
position: relative;
width: 100%;
table-layout: fixed;
}
#calendar_week .all_day_event_holder td {
border: 0;
background-color: transparent;
}
#calendar_week .all_day_event {
background: #eee;
}
/* 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: 350px;
}
.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;
}
/* category edit */
.edit_cal {
margin: -8px;
background-color: whitesmoke;
}
.edit_cal .table td, .edit_cal .table {
border: 0 !important;
background-color: transparent !important;
margin: 0 !important;
}
.main-list td {
border-top: solid 1px #ddd;
}
/* create / edit event panel */
#tags_panel {
top: auto;
bottom: 34px;
width: 258px;
height: 170px;
padding: 8px 0;
overflow: hidden;
position: absolute;
clear: none;
}
#tags_panel .viewport {
height: 170px;
}
#tags_panel .scrollbar {
top: 8px;
}
#tags_list {
padding: 8px;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
z-index: 1051;
}
#main-wrap{
padding-bottom: 0;
}
.fc-other-month{
background-color: #F6F6F6;
}
#calendar-loading{
display: none;
background-color: red;
padding: 0 5px;
position: absolute;
top: 31px;
width: 60px;
z-index: 10;
}

605
app/assets/stylesheets/calendar.scss Normal file
View File

@ -0,0 +1,605 @@
/* orbit calendar */
#orbit_calendar {
padding: 10px 8px;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
.cal-fn {
position: relative;
}
#sec1 {
margin-top: 10px;
margin-bottom: 10px;
.internal-page & {
float: left;
@media screen and (max-width: 767px) {
float: none;
}
.btn-toolbar {
margin-left: 0;
}
.form-inline {
margin-top: 0;
margin-bottom: 0;
}
}
@media screen and (max-width: 767px) {
float: none;
}
}
#sec2 {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
.current_day_title {
width: 100%;
line-height: 28px;
}
@media screen and (max-width: 767px) {
position: absolute;
top: 0;
.current_day_title {
margin: 0;
text-align: right;
}
}
@media screen and (max-width: 479px) {
position: static;
.current_day_title {
text-align: center;
}
}
}
#sec3 {
margin-top: 10px;
margin-bottom: 10px;
.internal-page & {
.calendar_mode {
float: none;
}
@media screen and (max-width: 767px) {
float: none;
width: 100%;
text-align: left;
}
}
@media screen and (max-width: 767px) {
float: none;
}
}
#range_selection {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
font-size: 12px;
& > * {
margin: 0 5px;
}
@media screen and (max-width: 479px) {
margin-right: 0;
& > * {
margin: 0;
}
& > label,
#show_events {
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
& > select {
display: block;
width: 100%;
margin-bottom: 5px;
}
}
@media screen and (max-width: 767px) {
& > select {
.internal-page & {
margin-bottom: 5px;
}
}
}
}
.fc-view {
font-size: 1em;
background-color: #fff;
}
}
#view_holder {
clear: both;
}
.calendar_color_tag {
display: inline-block;
width: 18px;
height: 18px;
margin-right: 4px;
vertical-align: bottom;
}
.calendar_mode {
z-index: 2;
}
.mode_switch {
text-transform: capitalize;
}
.today {
background-color: #D9EDF7;
}
.event {
font-size: 12px;
border-radius: 3px;
cursor: pointer;
padding: 1px 3px;
font-weight: bold;
box-shadow: inset 0 0 1px black;
-webkit-box-shadow: inset 0 0 1px black;
-moz-box-shadow: inset 0 0 1px black;
}
.modal-body {
max-height: 400px;
}
.event_list_wrapper {
position: relative;
}
.event_list {
.cell {
height: 39px;
border: solid 1px #ddd;
border-top: 0;
}
.divide {
height: 19px;
margin-bottom: 18px;
border-bottom: solid 1px #eee;
}
.day_time {
height: 31px;
border-bottom: solid 1px #ddd;
border-left: solid 1px #ddd;
text-align: right;
padding: 4px;
}
}
.event {
dl, dt, dd {
margin: 0;
padding: 0;
}
dl {
padding: 3px;
}
dt {
font-size: 11px;
font-weight: normal;
line-height: 12px;
}
}
/* day view */
#calendar_day {
.event_holder {
width: 100%;
/*height: 100%;*/
position: absolute;
top: 0;
z-index: 1;
}
.header {
margin-bottom: 10px;
}
.header th {
text-align: center;
}
td {
border: 0;
}
.event {
margin-bottom: 2px;
}
.all_day_event {
background: #eee;
border: solid 1px #ddd;
}
.event_list .table {
border-top: solid 1px #ddd;
}
.event_list td {
padding: 0;
}
}
.event_holder {
.inner {
position: relative;
margin: 0 16px 0 2px;
}
.event {
padding: 0px;
position: absolute;
width: 100%;
}
.event.half {
}
.event.over {
border: solid 1px #fff;
}
}
/* month view */
#calendar_month {
border-bottom: solid 1px #ddd;
.month_row {
position: relative;
border: solid 1px #ddd;
border-bottom: 0;
height: 60px;
overflow: hidden;
&.header {
height: 28px;
border: 0;
th {
font-size: 12px;
padding: 4px;
border: 0;
}
}
.table {
table-layout: fixed;
margin-bottom: 0;
width: 100%;
position: absolute;
td {
border: 0;
border-left: solid 1px #ddd;
padding: 2px 4px 0 4px;
&.today {
border-bottom: solid 1px #fff;
border-top: solid 1px #fff;
}
&.disable {
background-color: #f6f6f6;
color: #ccc;
border-left: solid 1px #ddd;
}
&:first-child {
border-left: 0;
}
}
}
.month_table {
height: 100%;
}
.month_date {
color: #666;
font-size: 11px;
cursor: pointer;
td {
border-left: 0
}
.day_title:hover {
text-decoration: underline;
}
.event:hover {
text-decoration: none !important;
}
}
.event {
margin: 0 -2px;
position: relative;
color: #000;
}
}
.event.single {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
}
/* agenda view */
#calendar_agenda {
margin-top: 20px;
font-size: 12px;
.table {
margin-bottom: 0;
background-color: #fff;
}
.tiny_calendar {
.table {
th {
text-align: center;
border-top: 0;
}
td {
text-align: center;
}
}
}
.event {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.row-fluid {
margin-top: 20px;
padding-top: 20px;
border-top: dashed 1px #ddd;
&:first-child {
border-top: 0;
padding-top: 0;
margin-top: 0;
}
}
.table.event_list {
margin-top: 40px;
}
}
.event_time {
font-family: Tahoma, sans-serif;
}
.has_event {
background-color: #08c;
color: #fff;
}
/* week view */
#calendar_week {
.cell_wrapper {
position: absolute;
width: 100%;
}
td {
padding: 0;
}
.table {
margin-bottom: 0;
}
.header {
margin-bottom: 12px;
border-top: 0;
table-layout: fixed;
}
.header {
th {
text-align: center;
font-size: 12px;
}
td {
border: solid 1px #ddd;
/*background-color: #eee;*/
}
}
.week_day {
padding: 0 2px;
border: solid 1px #ddd;
}
.header .week_day {
padding: 2px 4px 0px 2px;
}
.event_list .event {
position: absolute;
width: 100%;
margin-bottom: 2px;
}
.cell_map {
margin-bottom: 18px;
td {
border-top: 0;
border-bottom: 0;
}
tr:first-child td {
border-top: solid 1px #ddd;
}
}
.event_holder .inner {
margin: 0 8px 0 0;
}
.all_day_event_holder {
position: relative;
width: 100%;
table-layout: fixed;
}
.all_day_event_holder td {
border: 0;
background-color: transparent;
}
.all_day_event {
background: #eee;
}
}
/* 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 {
.form-horizontal {
margin-bottom: 0;
.control-label {
width: 60px;
}
.controls {
margin-left: 80px;
input[type="text"],
select,
textarea,
.uneditable-input {
width: 100%;
height: 30px;
line-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input[type="checkbox"] {
margin-top: 0;
}
textarea {
height: auto;
line-height: 1em;
resize: vertical;
}
}
}
.last {
margin-bottom: 0;
}
.row-fluid {
margin-bottom: 6px;
.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;
}
/* category edit */
.edit_cal {
margin: -8px;
background-color: whitesmoke;
.table,
.table td {
border: 0 !important;
background-color: transparent !important;
margin: 0 !important;
}
}
.main-list td {
border-top: solid 1px #ddd;
}
/* create / edit event panel */
#tags_panel {
top: auto;
bottom: 34px;
width: 258px;
height: 170px;
padding: 8px 0;
overflow: hidden;
position: absolute;
clear: none;
.viewport {
height: 170px;
}
.scrollbar {
top: 8px;
}
}
#tags_list {
padding: 8px;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
z-index: 1051;
}
#main-wrap {
padding-bottom: 0;
}
.fc-other-month{
background-color: #F6F6F6;
}
#calendar-loading {
position: absolute;
top: 40%;
z-index: 10;
width: 120px;
height: 120px;
padding: 5px;
border-radius: 4px;
background-color: rgba(255,255,255,.95);
background-image: url('/assets/loading1.gif');
background-repeat: no-repeat;
background-position: center 20px;
background-size: 50%;
box-shadow: 0 0 30px -10px #000;
&:after {
content: "Loading...";
position: absolute;
bottom: 0;
display: block;
width: 100%;
line-height: 4em;
text-align: center;
}
}
#event_create_space {
display:none;
position: fixed;
width: 400px;
margin: 0;
background-color: #fff;
z-index: 1050;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
outline: none;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
.alert {
margin-bottom: 0;
}
.new_event {
margin-bottom: 0;
}
}
.calendar-modal {
position: fixed;
z-index: 1050;
width: 300px;
margin: 0;
font-size: 12px;
& > .modal-content {
h3 {
margin: 0;
}
}
.event_summary {
margin-right: -15px;
margin-bottom: 15px;
margin-left: -15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
border-bottom: 1px solid #eee;
> p {
margin-bottom: 0;
}
i {
color: #989898;
}
}
}

10
app/controllers/admin/calendars_controller.rb
View File

@ -100,7 +100,10 @@ class Admin::CalendarsController < OrbitAdminController
@event = Event.new(p) @event = Event.new(p)
if @event.present? && @event.save if @event.present? && @event.save
render json: @event.to_json e = @event.to_json
e = JSON.parse(e)
e["can_edit"] = true
render json: e.to_json
else else
respond_to do |format| respond_to do |format|
format.html { render action: "new" } format.html { render action: "new" }
@ -116,7 +119,10 @@ class Admin::CalendarsController < OrbitAdminController
p = event_page_params p = event_page_params
p["update_user_id"] = current_user.id p["update_user_id"] = current_user.id
if @event.update_attributes(p) if @event.update_attributes(p)
render json: @event.to_json e = @event.to_json
e = JSON.parse(e)
e["can_edit"] = true
render json: e.to_json
else else
respond_to do |format| respond_to do |format|
format.html { render action: "edit" } format.html { render action: "edit" }

70
app/views/admin/calendars/_form.html.erb
View File

@ -1,8 +1,6 @@
<% if @event.errors.any? %> <% if @event.errors.any? %>
<div id="error_explanation"> <div id="error_explanation">
<h2><%= pluralize(@event.errors.count, "error") %> prohibited this event from being saved:</h2> <h2><%= pluralize(@event.errors.count, "error") %> prohibited this event from being saved:</h2>
<ul> <ul>
<% @event.errors.full_messages.each do |msg| %> <% @event.errors.full_messages.each do |msg| %>
<li><%= msg %></li> <li><%= msg %></li>
@ -10,23 +8,32 @@
</ul> </ul>
</div> </div>
<% end %> <% end %>
<div class="row-fluid"> <div class="control-group">
<%= f.label :title, :class=>"control-label span3" %> <%= f.label :title, :class=>"control-label" %>
<div class="controls">
<%= f.text_field :title %> <%= f.text_field :title %>
</div> </div>
<div class="row-fluid"> </div>
<%= f.label :note, :class=>"control-label span3" %> <div class="control-group">
<%= f.label :note, :class=>"control-label" %>
<div class="controls">
<%= f.text_area :note, :rows => 3 %> <%= f.text_area :note, :rows => 3 %>
</div> </div>
<div class="row-fluid">
<label class="checkbox inline"><%= f.check_box :all_day,:id=>"all_day_check", :checked => @all_day %> All Day</label>
</div> </div>
<div class="control-group">
<div class="row-fluid"> <label class="control-label"></label>
<%= f.label :start, :class=>"control-label span3" %> <div class="controls">
<label>
<%= f.check_box :all_day,:id=>"all_day_check", :checked => @all_day %> All Day
</label>
</div>
</div>
<div class="control-group">
<%= f.label :start, :class=>"control-label" %>
<%#= f.datetime_select :start %> <%#= f.datetime_select :start %>
<div class="controls">
<div data-date-format="yyyy/MM/dd hh:mm" data-language="en" data-picktime="true" class="input-append datetimepick"> <div data-date-format="yyyy/MM/dd hh:mm" data-language="en" data-picktime="true" class="input-append datetimepick">
<%= f.text_field :start, :class => "input-large", :placeholder => 'YYYY/MM/DD',:value => @start_d_t %> <%= f.text_field :start, :class => "input-large", data: {"fv-validation" => "required;","fv-messages" => "Cannot be empty;"}, :placeholder => 'YYYY/MM/DD',:value => @start_d_t %>
<span class="add-on clearDate"> <span class="add-on clearDate">
<i class="icons-cross-3"></i> <i class="icons-cross-3"></i>
</span> </span>
@ -35,13 +42,14 @@
</span> </span>
</div> </div>
</div> </div>
<div class="row-fluid"> </div>
<%= f.label :end, :class=>"control-label span3" %> <div class="control-group">
<%= f.label :end, :class=>"control-label" %>
<%#= f.datetime_select :end %> <%#= f.datetime_select :end %>
<div class="controls">
<div data-date-format="yyyy/MM/dd hh:mm" data-language="en" data-picktime="true" class="input-append datetimepick"> <div data-date-format="yyyy/MM/dd hh:mm" data-language="en" data-picktime="true" class="input-append datetimepick">
<%= f.text_field :end, :class => "input-large", :placeholder => 'YYYY/MM/DD', :value => @end_d_t %> <%= f.text_field :end, :class => "input-large", :placeholder => 'YYYY/MM/DD', :value => @end_d_t %>
<!-- <input type="text" placeholder="YYYY/MM/DD" class="input-large" name="event[end]"></input> --> <!-- <input type="text" placeholder="YYYY/MM/DD" class="input-large" name="event[end]"></input> -->
<span class="add-on clearDate"> <span class="add-on clearDate">
<i class="icons-cross-3"></i> <i class="icons-cross-3"></i>
</span> </span>
@ -50,26 +58,38 @@
</span> </span>
</div> </div>
</div> </div>
<div class="row-fluid"> </div>
<%= f.label "Calendar", :class=>"control-label span3" %> <div class="control-group">
<%= f.label "Calendar", :class=>"control-label" %>
<div class="controls">
<%= f.select :calendar_type_id, @categories.collect{|t| [ t.title, t.id ]} %> <%= f.select :calendar_type_id, @categories.collect{|t| [ t.title, t.id ]} %>
</div> </div>
<div class="row-fluid"> </div>
<label class="checkbox inline"><%= f.check_box :recurring,:id=>"recurring_checkbox", :checked => @recurring %> Recurring</label> <div class="control-group">
<label class="control-label"></label>
<div class="controls">
<label>
<%= f.check_box :recurring, :id=>"recurring_checkbox", :checked => @recurring %> Recurring
</label>
</div>
</div> </div>
<div id="recurring_panel" <%= (@recurring ? '' : "style=display:none;") %> > <div id="recurring_panel" <%= (@recurring ? '' : "style=display:none;") %> >
<div class="row-fluid"> <div class="control-group">
<%=f.label :period, "Repeats",:class=>"control-label span3" %> <%=f.label :period, "Repeats",:class=>"control-label" %>
<div class="controls">
<%=f.select :period, Event::REPEATS,{},:class=>"span5" %> <%=f.select :period, Event::REPEATS,{},:class=>"span5" %>
</div> </div>
<div class="row-fluid"> </div>
<%=f.label :frequency, "Every",:class=>"control-label span3" %> <div class="control-group">
<%=f.label :frequency, "Every",:class=>"control-label" %>
<div class="controls">
<%=f.select :frequency, (1..30).to_a,{},:class=>"span2" %> <%=f.select :frequency, (1..30).to_a,{},:class=>"span2" %>
</div> </div>
</div> </div>
</div>
<div class="row-fluid"> <div class="control-group last">
<div class="span9 offset3"> <div class="controls">
<% if action_name == "edit" %> <% if action_name == "edit" %>
<%= f.submit t("calendar.save"), :class=>"btn btn-primary" %> <%= f.submit t("calendar.save"), :class=>"btn btn-primary" %>
<% else %> <% else %>

2
app/views/admin/calendars/edit.html.erb
View File

@ -1,7 +1,7 @@
<div class="modal-body"> <div class="modal-body">
<div class="event_controller"> <div class="event_controller">
<% if !@categories.blank? %> <% if !@categories.blank? %>
<%= form_for @event, url: {action: "update"}, :remote=>true do |f| %> <%= form_for @event, url: {action: "update"}, :remote=>true, :html => {:class=>"form-horizontal"} do |f| %>
<%= render :partial => 'form', :locals => {:f => f} %> <%= render :partial => 'form', :locals => {:f => f} %>
<% end %> <% end %>
<% else %> <% else %>

26
app/views/admin/calendars/index.html.erb
View File

@ -2,14 +2,18 @@
<%= javascript_include_tag 'fullcalendar' %> <%= javascript_include_tag 'fullcalendar' %>
<%= javascript_include_tag 'calendar' %> <%= javascript_include_tag 'calendar' %>
<%= javascript_include_tag 'bootstrap-datetimepicker' %> <%= javascript_include_tag 'bootstrap-datetimepicker' %>
<%= javascript_include_tag 'validator' %>
<%= stylesheet_link_tag "fullcalendar"%> <%= stylesheet_link_tag "fullcalendar"%>
<%= stylesheet_link_tag "calendar"%> <%= stylesheet_link_tag "calendar"%>
<div id="orbit_calendar" class="month_view"> <div id="orbit_calendar" class="month_view">
<div class="row-fluid cal-fn"> <div class="clearfix cal-fn">
<div class="span3" id='sec1'> <div id='sec2'>
<div class="btn-toolbar" id="navigation" style="margin:0;"> <h3 id="current_title" class="current_day_title"></h4>
</div>
<div class="pull-left" id='sec1'>
<div class="btn-toolbar" id="navigation">
<div id="calendar-nav"> <div id="calendar-nav">
<div class="btn-group"> <div class="btn-group">
<button class="btn" id="today_btn">Today</button> <button class="btn" id="today_btn">Today</button>
@ -24,14 +28,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-inline" id="range_selection" style="display:none;margin:0;"> <div class="form-inline" id="range_selection" style="display:none;"></div>
</div> </div>
</div> <div class="pull-right" id='sec3'>
<div class="span5" id='sec2'> <div class="btn-toolbar">
<h3 id="current_title" class="current_day_title"></h4>
</div>
<div class="span4" id='sec3'>
<div class="btn-toolbar" style="margin:0; text-align:right;">
<div class="btn-group calendar_mode"> <div class="btn-group calendar_mode">
<button class="btn mode_switch" data-mode="agendaDay" >day</button> <button class="btn mode_switch" data-mode="agendaDay" >day</button>
<button class="btn mode_switch" data-mode="agendaWeek" >week</button> <button class="btn mode_switch" data-mode="agendaWeek" >week</button>
@ -51,9 +51,8 @@
<div id="calendar_agenda"></div> <div id="calendar_agenda"></div>
</div> </div>
</div> </div>
<div id="event_quick_view" class="modal" style="width: 300px; display:none; margin:0 0 0 0;"></div> <div id="event_create_space"></div>
<div id="event_create_space" class="modal" style="width: 400px; margin: 0;display:none;"></div> <div id="calendar-loading"></div>
<div id="calendar-loading">Loading...</div>
<div class="form-actions form-fixed"> <div class="form-actions form-fixed">
<div class="row-fluid"> <div class="row-fluid">
<div class="span8"> <div class="span8">
@ -66,4 +65,5 @@
<script type="text/javascript"> <script type="text/javascript">
var calendar = new Calendar("#calendar"); var calendar = new Calendar("#calendar");
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>');
</script> </script>

20
app/views/admin/calendars/new.html.erb
View File

@ -1,16 +1,18 @@
<% if !@categories.blank? %>
<div class="modal-body"> <div class="modal-body">
<div class="event_controller"> <div class="event_controller">
<% if !@categories.blank? %> <%= form_for @event, :url=>admin_calendars_path, :remote=>true, :html => {:class=>"form-horizontal"} do |f| %>
<%= form_for @event, :url=> admin_calendars_path, :remote=>true do |f| %>
<%= render :partial => 'form', :locals => {:f => f} %> <%= render :partial => 'form', :locals => {:f => f} %>
<% end %> <% end %>
<% else %>
<div class="modal-body" id="no-categories">
<div class="event_summary">
No categories assigned.
<a href="" class="btn btn-close" >&times;</a>
</div> </div>
</div> </div>
<% else %>
<div class="event_summary alert" id="no-categories">
No categories assigned.
<a href="" class="close btn-close">&times;</a>
</div>
<% end %> <% end %>
</div>
</div> <script>
new FormValidator($("#new_event"));
</script>