update code for calendar
This commit is contained in:
Ray
parent
3194764c46
commit
9cdf957071
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
|
|
@ -45,6 +45,7 @@ var Calendar = function(dom){
|
|||
var success_event = function(data,allDay,type,addbtn){
|
||||
c.dialog.dismiss();
|
||||
|
||||
$('.bootstrap-datetimepicker-widget').remove();
|
||||
c.event_create_space.html(data);
|
||||
var create_space_height = c.event_create_space.height(),
|
||||
create_space_width = c.event_create_space.width();
|
||||
|
|
@ -107,6 +108,7 @@ var Calendar = function(dom){
|
|||
});
|
||||
$("a.btn-close").one("click",function(){
|
||||
c.event_create_space.html("").hide();
|
||||
$('.bootstrap-datetimepicker-widget').remove();
|
||||
return false;
|
||||
});
|
||||
|
||||
|
|
@ -245,16 +247,16 @@ var Calendar = function(dom){
|
|||
})
|
||||
if(view != "agenda"){
|
||||
if(c.currentView == "agenda"){
|
||||
$("#sec1").addClass("span3").removeClass("span7");
|
||||
// $("#sec1").addClass("span3").removeClass("span7");
|
||||
$("#sec2").show();
|
||||
$("#sec3").addClass("span4").removeClass("span5");
|
||||
// $("#sec3").addClass("span4").removeClass("span5");
|
||||
agendaView.hide();
|
||||
}
|
||||
c.calendar.fullCalendar('changeView',view);
|
||||
}else{
|
||||
$("#sec1").addClass("span7").removeClass("span3");
|
||||
// $("#sec1").addClass("span7").removeClass("span3");
|
||||
$("#sec2").hide();
|
||||
$("#sec3").addClass("span5").removeClass("span4");
|
||||
// $("#sec3").addClass("span5").removeClass("span4");
|
||||
agendaView.inflate();
|
||||
}
|
||||
c.currentView = view;
|
||||
|
|
@ -264,7 +266,7 @@ var Calendar = function(dom){
|
|||
}
|
||||
}
|
||||
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.isFormVisible()){
|
||||
c.dialog.dismiss();
|
||||
|
|
@ -334,35 +336,48 @@ var EventDialog = function(calendar,event){
|
|||
var event_quick_view = null;
|
||||
var template = "";
|
||||
var _this_event = null;
|
||||
var month_names = ["Jan","Feb","March","April","May","June","July","Aug","Sep","Oct","Nov","Dec"];
|
||||
this.inflate = function(_event){
|
||||
if(!_event) throw new UserException("EventStick can't be null!");
|
||||
_this_event = _event;
|
||||
var start_time = "",
|
||||
end_time = "",
|
||||
time_string = null;
|
||||
end_time = "",
|
||||
time_string = null;
|
||||
|
||||
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"));
|
||||
if(_event.allDay) {
|
||||
start_time = $.fullCalendar.formatDate(_event._start,"MMM dd, yyyy");
|
||||
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"));
|
||||
time_string = (_event._start === _event._end || !_event._end ? start_time : start_time + " - " + end_time);
|
||||
}else{
|
||||
var reg = new RegExp(/ [0-9][0-9]:[0-9][0-9]:[0-9][0-9]/),
|
||||
stime = _event._start.toLocaleString().split(",")[1],
|
||||
etime = _event._end.toLocaleString().split(",")[1];
|
||||
end_time = $.fullCalendar.formatDate(_event._end,"MMM dd, yyyy");
|
||||
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 {
|
||||
var sh = _event._start.getHours() > 12 ? _event._start.getHours() - 12 : _event._start.getHours(),
|
||||
eh = _event._end.getHours() > 12 ? _event._end.getHours() - 12 : _event._end.getHours(),
|
||||
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,"");
|
||||
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 );
|
||||
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>");
|
||||
}
|
||||
event_quick_view = $('<div class="modal" style="width: 300px; display:none; margin:0 0 0 0;"></div>');
|
||||
template = '<div class="modal-header"><button type="button" class="close event-close-btn" data-dismiss="modal" aria-hidden="true">×</button><h3>'+ _event.title +'</h3></div><div class="modal-body"><div class="event_summary">'+ time_string +'</div>'+ _event.note +'</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">×</button>' +
|
||||
'<h3>'+ _event.title +'</h3>' +
|
||||
'</div>' +
|
||||
'<div class="modal-body">' +
|
||||
'<div class="event_summary">' +
|
||||
time_string +
|
||||
'</div>' +
|
||||
_event.note +
|
||||
'</div>';
|
||||
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,
|
||||
y = pos.y,
|
||||
winheight = $(window).height();
|
||||
console.log(event_quick_view.width())
|
||||
if((x + event_quick_view.width()) > $(window).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_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 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 show_event_clicked = false;
|
||||
|
|
@ -570,7 +632,7 @@ var AgendaView = function(calendar){
|
|||
dateFormat = $.fullCalendar.formatDate(s, "ddd dd");
|
||||
else
|
||||
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("div.event").text(event.title).css("color",event.color);
|
||||
return e_t;
|
||||
|
|
|
|||
|
|
@ -80,16 +80,16 @@ var Calendar = function(dom,page_id){
|
|||
})
|
||||
if(view != "agenda"){
|
||||
if(c.currentView == "agenda"){
|
||||
$("#sec1").addClass("span3").removeClass("span7");
|
||||
// $("#sec1").addClass("span3").removeClass("span7");
|
||||
$("#sec2").show();
|
||||
$("#sec3").addClass("span4").removeClass("span5");
|
||||
// $("#sec3").addClass("span4").removeClass("span5");
|
||||
agendaView.hide();
|
||||
}
|
||||
c.calendar.fullCalendar('changeView',view);
|
||||
}else{
|
||||
$("#sec1").addClass("span7").removeClass("span3");
|
||||
// $("#sec1").addClass("span7").removeClass("span3");
|
||||
$("#sec2").hide();
|
||||
$("#sec3").addClass("span5").removeClass("span4");
|
||||
// $("#sec3").addClass("span5").removeClass("span4");
|
||||
agendaView.inflate();
|
||||
}
|
||||
c.currentView = view;
|
||||
|
|
@ -120,35 +120,47 @@ var EventDialog = function(calendar,event){
|
|||
var event_quick_view = null;
|
||||
var template = "";
|
||||
var _this_event = null;
|
||||
var month_names = ["Jan","Feb","March","April","May","June","July","Aug","Sep","Oct","Nov","Dec"];
|
||||
this.inflate = function(_event){
|
||||
if(!_event) throw new UserException("EventStick can't be null!");
|
||||
_this_event = _event;
|
||||
var start_time = "",
|
||||
end_time = "",
|
||||
time_string = null;
|
||||
end_time = "",
|
||||
time_string = null;
|
||||
|
||||
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"));
|
||||
if(_event.allDay) {
|
||||
start_time = $.fullCalendar.formatDate(_event._start,"MMM dd, yyyy");
|
||||
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"));
|
||||
time_string = (_event._start === _event._end || !_event._end ? start_time : start_time + " - " + end_time);
|
||||
}else{
|
||||
var reg = new RegExp(/ [0-9][0-9]:[0-9][0-9]:[0-9][0-9]/),
|
||||
stime = _event._start.toLocaleString().split(",")[1],
|
||||
etime = _event._end.toLocaleString().split(",")[1];
|
||||
end_time = $.fullCalendar.formatDate(_event._end,"MMM dd, yyyy");
|
||||
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 {
|
||||
var sh = _event._start.getHours() > 12 ? _event._start.getHours() - 12 : _event._start.getHours(),
|
||||
eh = _event._end.getHours() > 12 ? _event._end.getHours() - 12 : _event._end.getHours(),
|
||||
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,",");
|
||||
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 );
|
||||
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>");
|
||||
}
|
||||
event_quick_view = $('<div class="modal" style="width: 300px; display:none; margin:0 0 0 0;"></div>');
|
||||
template = '<div class="modal-header"><button type="button" class="close event-close-btn" data-dismiss="modal" aria-hidden="true">×</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>';
|
||||
event_quick_view = $('<div class="calendar-modal" style="display:none;"></div>');
|
||||
template = '<div class="modal-content">' +
|
||||
'<div class="modal-header">' +
|
||||
'<button type="button" class="close event-close-btn" data-dismiss="modal" aria-hidden="true">×</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){
|
||||
if(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_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 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 show_event_clicked = false;
|
||||
|
|
@ -353,7 +418,7 @@ var AgendaView = function(calendar){
|
|||
dateFormat = $.fullCalendar.formatDate(s, "ddd dd");
|
||||
else
|
||||
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("div.event").text(event.title).css("color",event.color);
|
||||
return e_t;
|
||||
|
|
@ -406,7 +471,7 @@ var AgendaView = function(calendar){
|
|||
|
||||
var Month = function(month,year){
|
||||
_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 list_template = $(event_list_template);
|
||||
var firstDay = new Date(year,month,1);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -100,7 +100,10 @@ class Admin::CalendarsController < OrbitAdminController
|
|||
@event = Event.new(p)
|
||||
|
||||
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
|
||||
respond_to do |format|
|
||||
format.html { render action: "new" }
|
||||
|
|
@ -116,7 +119,10 @@ class Admin::CalendarsController < OrbitAdminController
|
|||
p = event_page_params
|
||||
p["update_user_id"] = current_user.id
|
||||
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
|
||||
respond_to do |format|
|
||||
format.html { render action: "edit" }
|
||||
|
|
|
|||
|
|
@ -1,32 +1,39 @@
|
|||
|
||||
<% if @event.errors.any? %>
|
||||
<div id="error_explanation">
|
||||
<h2><%= pluralize(@event.errors.count, "error") %> prohibited this event from being saved:</h2>
|
||||
|
||||
<ul>
|
||||
<% if @event.errors.any? %>
|
||||
<div id="error_explanation">
|
||||
<h2><%= pluralize(@event.errors.count, "error") %> prohibited this event from being saved:</h2>
|
||||
<ul>
|
||||
<% @event.errors.full_messages.each do |msg| %>
|
||||
<li><%= msg %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="row-fluid">
|
||||
<%= f.label :title, :class=>"control-label span3" %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="control-group">
|
||||
<%= f.label :title, :class=>"control-label" %>
|
||||
<div class="controls">
|
||||
<%= f.text_field :title %>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<%= f.label :note, :class=>"control-label span3" %>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<%= f.label :note, :class=>"control-label" %>
|
||||
<div class="controls">
|
||||
<%= f.text_area :note, :rows => 3 %>
|
||||
</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 class="control-group">
|
||||
<label class="control-label"></label>
|
||||
<div class="controls">
|
||||
<label>
|
||||
<%= f.check_box :all_day,:id=>"all_day_check", :checked => @all_day %> All Day
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<%= f.label :start, :class=>"control-label span3" %>
|
||||
<%#= f.datetime_select :start %>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<%= f.label :start, :class=>"control-label" %>
|
||||
<%#= 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">
|
||||
<%= 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">
|
||||
<i class="icons-cross-3"></i>
|
||||
</span>
|
||||
|
|
@ -35,13 +42,14 @@
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<%= f.label :end, :class=>"control-label span3" %>
|
||||
<%#= f.datetime_select :end %>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<%= f.label :end, :class=>"control-label" %>
|
||||
<%#= 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">
|
||||
<%= 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> -->
|
||||
|
||||
<%= 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> -->
|
||||
<span class="add-on clearDate">
|
||||
<i class="icons-cross-3"></i>
|
||||
</span>
|
||||
|
|
@ -50,31 +58,43 @@
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<%= f.label "Calendar", :class=>"control-label span3" %>
|
||||
</div>
|
||||
<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 ]} %>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<label class="checkbox inline"><%= f.check_box :recurring,:id=>"recurring_checkbox", :checked => @recurring %> Recurring</label>
|
||||
</div>
|
||||
<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 id="recurring_panel" <%= (@recurring ? '' : "style=display:none;") %> >
|
||||
<div class="row-fluid">
|
||||
<%=f.label :period, "Repeats",:class=>"control-label span3" %>
|
||||
</div>
|
||||
<div id="recurring_panel" <%= (@recurring ? '' : "style=display:none;") %> >
|
||||
<div class="control-group">
|
||||
<%=f.label :period, "Repeats",:class=>"control-label" %>
|
||||
<div class="controls">
|
||||
<%=f.select :period, Event::REPEATS,{},:class=>"span5" %>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<%=f.label :frequency, "Every",:class=>"control-label span3" %>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<%=f.label :frequency, "Every",:class=>"control-label" %>
|
||||
<div class="controls">
|
||||
<%=f.select :frequency, (1..30).to_a,{},:class=>"span2" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span9 offset3">
|
||||
<% if action_name == "edit" %>
|
||||
<%= f.submit t("calendar.save"), :class=>"btn btn-primary" %>
|
||||
<% else %>
|
||||
<%= f.submit t(:create_), :class=>"btn btn-primary" %>
|
||||
<% end %>
|
||||
<a href="" class="btn btn-close">Cancel</a>
|
||||
</div>
|
||||
<div class="control-group last">
|
||||
<div class="controls">
|
||||
<% if action_name == "edit" %>
|
||||
<%= f.submit t("calendar.save"), :class=>"btn btn-primary" %>
|
||||
<% else %>
|
||||
<%= f.submit t(:create_), :class=>"btn btn-primary" %>
|
||||
<% end %>
|
||||
<a href="" class="btn btn-close">Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<div class="modal-body">
|
||||
<div class="event_controller">
|
||||
<% if !@categories.blank? %>
|
||||
<%= form_for @event, url: {action: "update"}, :remote=>true do |f| %>
|
||||
<%= render :partial => 'form', :locals => {:f => f} %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<div class="modal-body" id="no-categories">
|
||||
<div class="event_summary">
|
||||
No categories assigned.
|
||||
<a href="" class="btn btn-close" >×</a>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="event_controller">
|
||||
<% if !@categories.blank? %>
|
||||
<%= form_for @event, url: {action: "update"}, :remote=>true, :html => {:class=>"form-horizontal"} do |f| %>
|
||||
<%= render :partial => 'form', :locals => {:f => f} %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<div class="modal-body" id="no-categories">
|
||||
<div class="event_summary">
|
||||
No categories assigned.
|
||||
<a href="" class="btn btn-close" >×</a>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2,14 +2,18 @@
|
|||
<%= javascript_include_tag 'fullcalendar' %>
|
||||
<%= javascript_include_tag 'calendar' %>
|
||||
<%= javascript_include_tag 'bootstrap-datetimepicker' %>
|
||||
<%= javascript_include_tag 'validator' %>
|
||||
|
||||
<%= stylesheet_link_tag "fullcalendar"%>
|
||||
<%= stylesheet_link_tag "calendar"%>
|
||||
|
||||
<div id="orbit_calendar" class="month_view">
|
||||
<div class="row-fluid cal-fn">
|
||||
<div class="span3" id='sec1'>
|
||||
<div class="btn-toolbar" id="navigation" style="margin:0;">
|
||||
<div class="clearfix cal-fn">
|
||||
<div id='sec2'>
|
||||
<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 class="btn-group">
|
||||
<button class="btn" id="today_btn">Today</button>
|
||||
|
|
@ -24,14 +28,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-inline" id="range_selection" style="display:none;margin:0;">
|
||||
</div>
|
||||
<div class="form-inline" id="range_selection" style="display:none;"></div>
|
||||
</div>
|
||||
<div class="span5" id='sec2'>
|
||||
<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="pull-right" id='sec3'>
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group calendar_mode">
|
||||
<button class="btn mode_switch" data-mode="agendaDay" >day</button>
|
||||
<button class="btn mode_switch" data-mode="agendaWeek" >week</button>
|
||||
|
|
@ -51,9 +51,8 @@
|
|||
<div id="calendar_agenda"></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" class="modal" style="width: 400px; margin: 0;display:none;"></div>
|
||||
<div id="calendar-loading">Loading...</div>
|
||||
<div id="event_create_space"></div>
|
||||
<div id="calendar-loading"></div>
|
||||
<div class="form-actions form-fixed">
|
||||
<div class="row-fluid">
|
||||
<div class="span8">
|
||||
|
|
@ -66,4 +65,5 @@
|
|||
|
||||
<script type="text/javascript">
|
||||
var calendar = new Calendar("#calendar");
|
||||
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>');
|
||||
</script>
|
||||
|
|
@ -1,16 +1,18 @@
|
|||
<div class="modal-body">
|
||||
<div class="event_controller">
|
||||
<% if !@categories.blank? %>
|
||||
<%= form_for @event, :url=> admin_calendars_path, :remote=>true do |f| %>
|
||||
<%= render :partial => 'form', :locals => {:f => f} %>
|
||||
<% end %>
|
||||
<div class="modal-body">
|
||||
<div class="event_controller">
|
||||
<%= form_for @event, :url=>admin_calendars_path, :remote=>true, :html => {:class=>"form-horizontal"} do |f| %>
|
||||
<%= render :partial => 'form', :locals => {:f => f} %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="modal-body" id="no-categories">
|
||||
<div class="event_summary">
|
||||
No categories assigned.
|
||||
<a href="" class="btn btn-close" >×</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="event_summary alert" id="no-categories">
|
||||
No categories assigned.
|
||||
<a href="" class="close btn-close">×</a>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
new FormValidator($("#new_event"));
|
||||
</script>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="modal-header">
|
||||
<button type="button" class="close event-close-btn" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3><%= @event.title %></h3>
|
||||
<button type="button" class="close event-close-btn" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3><%= @event.title %></h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="event_summary">
|
||||
|
|
|
|||
Loading…
Reference in New Issue