auto update calendar template and fix many error

This commit is contained in:
chiu 2020-08-12 21:33:46 +08:00
parent cee8b1f008
commit c1c7b98638
19 changed files with 1261 additions and 144 deletions

View File

@ -79,21 +79,35 @@ var Calendar = function(dom){
}
c.event_create_space.show();
var dtpick = $('.datetimepick');
var pickers = new Array();
var pickers = $('.default_picker input');
var checked = ($("#all_day_check").is(":checked") ? true : false);
var checked_function = function(c){
var d = new Date()
if(c){
for(i=0;i<pickers.length;i++){
var input = pickers[i].find("input");
input.val(input.val().split(" ")[0]);
pickers.eq(i).ui_datetimepicker("destroy");
pickers.eq(i).attr('placeholder','yyyy/MM/dd')
var value = pickers.eq(i).val()
if (value != ''){
pickers.eq(i).val(value.split(" ")[0])
}
pickers.eq(i).ui_datepicker({dateFormat: 'yy/mm/dd',show_view: ''})
}
}else{
for(i=0;i<pickers.length;i++){
var d = new Date();
var input = pickers[i].find("input");
if(input.val())
input.val(input.val() + " " + d.getHours() + ":" + d.getMinutes());
pickers.eq(i).ui_datepicker("destroy");
pickers.eq(i).attr('placeholder','yyyy/MM/dd HH:mm')
var value = pickers.eq(i).val()
if (value != ''){
pickers.eq(i).val(value + " " + d.getHours() + ":" + d.getMinutes())
}
pickers.eq(i).ui_datetimepicker({
dateFormat: 'yy/mm/dd',
controlType: 'select',
timeInput: true,
oneLine: true,
timeFormat: 'HH:mm'
})
}
}
}
@ -104,25 +118,13 @@ var Calendar = function(dom){
c.event_create_space.find("#event_frequency").removeAttr("disabled");
}
}
dtpick.each(function() {
var $data = $(this).data();
var options = {
format: $data.dateFormat,
pickTime: $data.picktime,
language: $data.language,
place: "top"
}
pickers.push(
$(this).datetimepicker(options)
);
});
$("a.btn-close").one("click",function(){
c.event_create_space.html("").hide();
$('.bootstrap-datetimepicker-widget').remove();
return false;
});
$("#all_day_check").click(function(){
$("#all_day_check").change(function(){
if($(this).is(":checked")){
checked = true;
}else{
@ -147,17 +149,7 @@ var Calendar = function(dom){
c.event_create_space.find("#event_period").change(function(){
//repeat_function();
})
for(i=0;i<pickers.length;i++){
pickers[i].on("changeDate",function(e){
if(checked){
var input = $(this).find("input");
input.val(input.val().split(" ")[0]);
}
})
}
//repeat_function();
if(allDay)
checked_function(checked);
}
c.success_event = success_event;
var dview = (c.currentView == "agenda" ? "month" : c.currentView);
@ -375,7 +367,7 @@ var EventDialog = function(calendar,event){
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>' +
'<h3>'+ (_event.url_linked=='' ? _event.title : ("<a href=\"" +_event.url_linked+"\">"+_event.title+"</a>")) +'</h3>' +
'</div>' +
'<div class="modal-body">' +
'<div class="event_summary">' +

View File

@ -159,7 +159,7 @@ var EventDialog = function(calendar,event){
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>' +
'<h3>' + (_event.url_linked=='' ? _event.title : ("<a href=\"" +_event.url_linked+"\">"+_event.title+"</a>")) + '</h3>' +
'</div>' +
'<div class="modal-body">' +
'<div class="event_summary">' + time_string + '</div>' +

View File

@ -1,6 +1,8 @@
var CalendarModuleMonth = function(date,dom,subpart,url){
_this = this;
var events = {}
var template = dom.find(".month_template"),
month_names = ["Jan","Feb","March","April","May","June","July","Aug","Sep","Oct","Nov","Dec"],
monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December'],
initialDate = date,
subpartid = subpart,
@ -12,11 +14,166 @@
lastDay = new Date(year,month+1,0),
today = date.getDate(),
last_inserted_date = 1,
monthDom = $("<div data-year='"+year+"' data-month='"+month+"'></div>");
monthDom = $("<div data-year='"+year+"' data-month='"+month+"'></div>"),
eventHTML = dom.find('div.calendar-events')[0],
prevMonthFunc,
nextMonthFunc,
toggle_data;
monthDom.html(template);
var format_time = function(date){
var hours = date.getHours(),
minutes = date.getMinutes();
if (hours < 10) {hours = "0"+hours}
if (minutes < 10) {minutes = "0"+minutes}
return hours+':'+minutes;
}
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
if (rgb){
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}else{
return "#000000";
}
}
function lighten_color(my_hex,percent){
if (my_hex[0] == '#'){
my_hex = my_hex.slice(1,-1)
}
var comp = ''
var rgb = []
var batch_size = Math.ceil(my_hex.length/3)
for (i=0;i<3;i++){
rgb.push(my_hex.slice(batch_size*i,batch_size*(i+1)))
}
$.each(rgb,function(){
var a = this
var tmp
tmp = Math.ceil(parseInt(a,16)*(1+percent/100))
if (tmp>255) tmp = 255
if (tmp < 0) tmp = 0
tmp = tmp.toString(16)
for (i=0;i<2-tmp.length;i++){
tmp = '0' + tmp
}
comp = comp + tmp
})
return '#'+comp
}
var format_date = function(date){
var y = date.getFullYear(),
m = date.getMonth() + 1,
d = date.getDate();
if (m < 10) {m = "0"+m}
if (d < 10) {d = "0"+d}
return y+'/'+m+'/'+d;
}
var formate_datetime = function(date){
date = new Date(date)
return [format_date(date),format_time(date)]
}
$(window).resize(function(){
var window_w = $(window).width()
$('div.calendar-events').each(function(){
if ($(this).width()>=728 && window_w>=768){
if ($(this).css('width')!='50%'){
$(this).css('width','50%')
$(this).parents('div[data-module="calendar"]').find('div').eq(0).css('width','50%')
}
}else{
if ($(this).css('width')=='50%'){
$(this).css('width','100%')
$(this).parents('div[data-module="calendar"]').find('div').eq(0).css('width','100%')
}
}
})
})
var show_event = function(date,ele){
var date_split = date.split('-')
var event_div = $(ele).parents('div[data-module="calendar"]').find('div.calendar-events')
event_div.find('.event-header').text(parseInt(date_split[2])+'/'+(parseInt(date_split[1])+1)+'/'+parseInt(date_split[0]))
event_div.find('.event-container').remove()
$(ele).parents('.w-calendar').find('td.shown').removeClass('shown')
$(ele).addClass('shown')
$.each(events[date],function(k,v){
var tp
if (v.url_linked==''){
var time_string = ''
if(v.allDay) {
var end_time
var start_time = formate_datetime(v.start)[0]
if(v.end)
end_time = formate_datetime(v.end)[0]
else
end_time = start_time
time_string = (start_time==end_time ? "<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 st = formate_datetime(v.start),
et = formate_datetime(v.end),
start_time = st[0],
end_time = et[0],
same = (start_time==end_time),
etime = et[1],
stime = st[1]
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>");
}
var modal_tp = ('<div class="dialog_event" style="display: none;">' +
'<div class="modal-header">' +
'<h3>' + v.title + '</h3>' +
'</div>' +
'<div class="modal-body">' +
'<div class="event_summary">' + time_string + '</div>' +
v.note +
'</div>' +
'</div>')
tp = $('<div class="event-container" onclick="var tmp=$(this).find(\'.dialog_event\').clone().dialog({dialogClass: \'calendar-dialog\'});$(\'.ui-dialog button\').blur();return false;"><div class="event-icon"><div class="event-bullet-event"></div></div><div class="event-info"></div><div class="model-content"></div>'+modal_tp+'</div>')
}else{
tp = $('<a class="event-container"><div class="event-icon"><div class="event-bullet-event"></div></div><div class="event-info"></div></a>').attr('href',v.url_linked)
}
var sd = formate_datetime(v.start),
ed = formate_datetime(v.end),
duration = '';
if(v.allDay){
if (sd[0]!=ed[0]){
duration = sd[0]+'>'+ed[0] +'<br>'
}
}else if (sd[0]==ed[0]){
duration = sd[1]+'>'+ed[1] +'<br>'
}else{
duration = sd[0]+' '+sd[1]+'>'+ed[0]+' '+ed[1] +'<br>'
}
tp.find('.event-info').html(duration+v.title+"<div class=\"event-content\">"+v.note+"</div>")
tp.find('.event-bullet-event').css('background',v.color)
event_div.find('.event-containers').append(tp)
})
$(ele).parents('div[data-module="calendar"]').css('display','flex')
if ($(ele).parents('div[data-module="calendar"]').width()>=728 && $(window).width()>=768){
event_div.css('width','50%')
$(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','50%')
}else{
event_div.css('width','100%')
$(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','100%')
}
event_div.show()
$('.close_box').off('click')
$('.close_box').on('click',function(){
hide_event(this)
})
}
var hide_event = function(ele){
$(ele).parents('.w-calendar').find('td.shown').removeClass('shown')
var event_div = $(ele).parents('div[data-module="calendar"]').find('div.calendar-events')
$(ele).parents('div[data-module="calendar"]').css('display','block')
$(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','')
event_div.hide()
//$(ele).parents('div[data-module="calendar"]').find('td.w-calendar-toggle').removeClass('w-calendar-toggle')
event_div.find('.event-container').remove()
}
var renderMonth = function(){
var num_of_rows = getNumberOfRows(year,month),
var num_of_rows = getNumberOfRows(),
head_title = monthDom.find("h4 span.text"),
table_body = monthDom.find("table.table tbody");
table_body.html("");
@ -35,11 +192,10 @@
}
table_body.append(tr);
head_title.text(monthNames[firstDay.getMonth()] + " " + firstDay.getFullYear());
}
}
}
var getNumberOfRows = function(year, month) {
var getNumberOfRows = function() {
var day = 1,
sat_counter = 0,
sunday_counter = 0,
@ -62,41 +218,59 @@
var row = $("<tr></tr>");
switch (position){
case "first":
for(var i = 0;i < 7;i++){
var td = $("<td></td>");
if(i >= firstDay.getDay()){
if(today != 0 && last_inserted_date == today){
td.attr("class","w-calendar-today");
}
td.text(last_inserted_date);
td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
last_inserted_date++;
}
row.append(td);
var first_line_first_day = new Date(year,month,firstDay.getDate()-firstDay.getDay())
var first_line_first_date = first_line_first_day.getDate()
var first_line_first_month = first_line_first_day.getMonth()
var first_line_first_year = first_line_first_day.getFullYear()
for(var i = 0;i < 7;i++){
var td = $("<td><div></div></td>");
if(i >= firstDay.getDay()){
if(today != 0 && last_inserted_date == today){
td.addClass("w-calendar-today");
}
td.find('div').text(last_inserted_date);
td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
last_inserted_date++;
}else{
td.find('div').text(first_line_first_date+i)
td.attr("data-date-node",(first_line_first_date+i)+"-"+first_line_first_month+"-"+first_line_first_year);
td.addClass("w-calendar-other-month")
}
row.append(td);
}
break;
case "middle":
for(var i = 0;i < 7;i++){
var td = $("<td></td>");
var td = $("<td><div></div></td>");
if(today != 0 && last_inserted_date == today){
td.attr("class","w-calendar-today");
}
td.text(last_inserted_date);
td.find('div').text(last_inserted_date);
td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
last_inserted_date++;
row.append(td);
}
break;
case "last":
var next_month = month+1,
next_year = year;
if (next_month==12){
next_month = 0;
next_year = next_year + 1;
}
for(var i = 0;i < 7;i++){
var td = $("<td></td>");
var td = $("<td><div></div></td>");
if(i <= lastDay.getDay()){
if(today != 0 && last_inserted_date == today){
td.attr("class","w-calendar-today");
}
td.text(last_inserted_date);
td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
last_inserted_date++;
if(today != 0 && last_inserted_date == today){
td.attr("class","w-calendar-today");
}
td.find('div').text(last_inserted_date);
td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
last_inserted_date++;
}else{
td.find('div').text(i-lastDay.getDay())
td.attr("data-date-node",(i-lastDay.getDay())+"-"+next_month+"-"+next_year);
td.addClass("w-calendar-other-month")
}
row.append(td);
}
@ -107,33 +281,60 @@
}
return row;
}
function toggle_event(ele,type){
$(ele).parents('.month_template').find('td').removeClass('w-calendar-toggle')
if ($(ele).length==1){
$(ele).addClass('w-calendar-toggle')
toggle_data = $(ele).data('date-node')
}
var toggle_month = $(ele).data('date-node').split('-')[1]
if (toggle_month==month || $(ele).length!=1){
if (type=='show'){
show_event($(ele).data('date-node'),ele)
}else{
hide_event(ele)
}
}
else if(toggle_month==month+1 || toggle_month==0){
nextMonthFunc(toggle_data)
}else{
prevMonthFunc(toggle_data)
}
}
var fetchEvents = function(){
var usd = Math.round(firstDay/1000),
ued = Math.round(lastDay/1000);
$.ajax({
url : "/xhr/calendars/agenda",
data : {"unix_start" : usd, "unix_end" : ued, "subpart_id" : subpartid},
data : {"unix_start" : usd, "unix_end" : ued, "subpart_id" : subpartid, "locale" : $('html').attr('lang')},
dataType : "json",
type : "get"
}).done(function(data){
events = {}
$(dom).find('.w-calendar-title span').eq(-1).html(data['calendar_title'])
$.each(data.events,function(index,eve){
var sd = new Date(eve.start),
ed = new Date(eve.end),
timeDiff = Math.abs(ed.getTime() - sd.getTime()),
dayDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
if(eve.allDay){
dayDiff = 1 ;
sd_date = new Date(formate_datetime(eve.start)[0]),
ed_date = new Date(formate_datetime(eve.end)[0]),
timeDiff = ed_date.getTime() - sd_date.getTime(),
dayDiff = Math.round(timeDiff / (1000 * 3600 * 24));
if(eve.allDay && dayDiff < 1){
dayDiff = 1
}
if(dayDiff > 0){
var inserting_date = (sd < firstDay ? 1 : sd.getDate());
for(i = 0;i <= dayDiff; i++){
var inserting_date = sd.getDate();
for(var i = 0;i <= dayDiff; i++){
var dt = inserting_date + "-" + month + "-" + year,
td = dom.find("td[data-date-node=" + dt + "]");
if (events[dt]==undefined){
events[dt]=[]
}
events[dt].push(eve)
td.addClass("w-calendar-event");
if(index_url != ""){
td.on("click",function(){
window.location.href = "http://" + window.location.host + index_url + '/' + eve.id + '-';
if(events[dt].length==1){
td.click(function(){
toggle_event(this,'show')
})
}
inserting_date++;
@ -144,21 +345,52 @@
}else{
var dt = sd.getDate() + "-" + sd.getMonth() + "-" + sd.getFullYear();
td = dom.find("td[data-date-node=" + dt + "]");
if (events[dt]==undefined){
events[dt]=[]
}
events[dt].push(eve)
if(events[dt].length==1){
td.click(function(){
toggle_event(this,'show')
})
}
td.addClass("w-calendar-event");
}
})
if (!toggle_data){
if (dom.find('td.w-calendar-today').length != 0){
toggle_event(dom.find('td.w-calendar-today'),'show')
}else{
toggle_event(dom.find('td'),'hide')
}
}
dom.find('td:not(td.w-calendar-event)').click(function(){
toggle_event(this,'hide')
})
var clicked_color = dom.find('.w-calendar-event').css('background-color')
if (clicked_color){
clicked_color = lighten_color(rgb2hex(clicked_color),-20)
if (clicked_color!='#000000'){
dom.find('table').append($('<style>.w-calendar-table .w-calendar-toggle{ background-color:'+clicked_color+';color: white;}</style>'))
}
}
monthDom.find("i.loading").addClass("hide");
})
}
this.currentMonth = function(){
renderMonth();
dom.html(monthDom);
var div_tag = $('<div></div>')
var widge_title = dom.find('.w-calendar-title').eq(0)
div_tag.html(monthDom)
div_tag.prepend(widge_title)
dom.html(div_tag);
monthDom.find("i.loading").removeClass("hide");
fetchInterval = setTimeout(fetchEvents,300);
dom.find('div').eq(0).after(eventHTML)
}
this.nextMonth = function(){
this.nextMonth = function(toggle_flag){
clearTimeout(fetchInterval);
monthDom.find("i.loading").removeClass("hide");
month++;
@ -172,10 +404,15 @@
last_inserted_date = 1;
renderMonth();
dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
if (toggle_data && toggle_flag){
toggle_event(dom.find('td[data-date-node="'+toggle_data+'"]'),'show')
}else{
toggle_data = undefined
}
fetchInterval = setTimeout(fetchEvents,1000);
}
this.prevMonth = function(){
nextMonthFunc = this.nextMonth;
this.prevMonth = function(toggle_flag){
clearTimeout(fetchInterval);
monthDom.find("i.loading").removeClass("hide");
month--;
@ -189,19 +426,12 @@
last_inserted_date = 1;
renderMonth();
dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
if (toggle_data && toggle_flag){
toggle_event(dom.find('td[data-date-node="'+toggle_data+'"]'),'show')
}else{
toggle_data = undefined
}
fetchInterval = setTimeout(fetchEvents,1000);
}
}
prevMonthFunc = this.prevMonth;
}

View File

@ -0,0 +1,437 @@
var CalendarModuleMonth = function(date,dom,subpart,url){
_this = this;
var events = {}
var template = dom.find(".month_template"),
month_names = ["Jan","Feb","March","April","May","June","July","Aug","Sep","Oct","Nov","Dec"],
monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December'],
initialDate = date,
subpartid = subpart,
index_url = url,
fetchInterval = null,
month = date.getMonth(),
year = date.getFullYear(),
firstDay = new Date(year,month,1),
lastDay = new Date(year,month+1,0),
today = date.getDate(),
last_inserted_date = 1,
monthDom = $("<div data-year='"+year+"' data-month='"+month+"'></div>"),
eventHTML = dom.find('div.calendar-events')[0],
prevMonthFunc,
nextMonthFunc,
toggle_data;
monthDom.html(template);
var format_time = function(date){
var hours = date.getHours(),
minutes = date.getMinutes();
if (hours < 10) {hours = "0"+hours}
if (minutes < 10) {minutes = "0"+minutes}
return hours+':'+minutes;
}
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
if (rgb){
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}else{
return "#000000";
}
}
function lighten_color(my_hex,percent){
if (my_hex[0] == '#'){
my_hex = my_hex.slice(1,-1)
}
var comp = ''
var rgb = []
var batch_size = Math.ceil(my_hex.length/3)
for (i=0;i<3;i++){
rgb.push(my_hex.slice(batch_size*i,batch_size*(i+1)))
}
$.each(rgb,function(){
var a = this
var tmp
tmp = Math.ceil(parseInt(a,16)*(1+percent/100))
if (tmp>255) tmp = 255
if (tmp < 0) tmp = 0
tmp = tmp.toString(16)
for (i=0;i<2-tmp.length;i++){
tmp = '0' + tmp
}
comp = comp + tmp
})
return '#'+comp
}
var format_date = function(date){
var y = date.getFullYear(),
m = date.getMonth() + 1,
d = date.getDate();
if (m < 10) {m = "0"+m}
if (d < 10) {d = "0"+d}
return y+'/'+m+'/'+d;
}
var formate_datetime = function(date){
date = new Date(date)
return [format_date(date),format_time(date)]
}
$(window).resize(function(){
var window_w = $(window).width()
$('div.calendar-events').each(function(){
if ($(this).width()>=728 && window_w>=768){
if ($(this).css('width')!='50%'){
$(this).css('width','50%')
$(this).parents('div[data-module="calendar"]').find('div').eq(0).css('width','50%')
}
}else{
if ($(this).css('width')=='50%'){
$(this).css('width','100%')
$(this).parents('div[data-module="calendar"]').find('div').eq(0).css('width','100%')
}
}
})
})
var show_event = function(date,ele){
var date_split = date.split('-')
var event_div = $(ele).parents('div[data-module="calendar"]').find('div.calendar-events')
event_div.find('.event-header').text(parseInt(date_split[2])+'/'+(parseInt(date_split[1])+1)+'/'+parseInt(date_split[0]))
event_div.find('.event-container').remove()
$(ele).parents('.w-calendar').find('td.shown').removeClass('shown')
$(ele).addClass('shown')
$.each(events[date],function(k,v){
var tp
if (v.url_linked==''){
var time_string = ''
if(v.allDay) {
var end_time
var start_time = formate_datetime(v.start)[0]
if(v.end)
end_time = formate_datetime(v.end)[0]
else
end_time = start_time
time_string = (start_time==end_time ? "<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 st = formate_datetime(v.start),
et = formate_datetime(v.end),
start_time = st[0],
end_time = et[0],
same = (start_time==end_time),
etime = et[1],
stime = st[1]
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>");
}
var modal_tp = ('<div class="dialog_event" style="display: none;">' +
'<div class="modal-header">' +
'<h3>' + v.title + '</h3>' +
'</div>' +
'<div class="modal-body">' +
'<div class="event_summary">' + time_string + '</div>' +
v.note +
'</div>' +
'</div>')
tp = $('<div class="event-container" onclick="var tmp=$(this).find(\'.dialog_event\').clone().dialog({dialogClass: \'calendar-dialog\'});$(\'.ui-dialog button\').blur();return false;"><div class="event-icon"><div class="event-bullet-event"></div></div><div class="event-info"></div><div class="model-content"></div>'+modal_tp+'</div>')
}else{
tp = $('<a class="event-container"><div class="event-icon"><div class="event-bullet-event"></div></div><div class="event-info"></div></a>').attr('href',v.url_linked)
}
var sd = formate_datetime(v.start),
ed = formate_datetime(v.end),
duration = '';
if(v.allDay){
if (sd[0]!=ed[0]){
duration = sd[0]+'>'+ed[0] +'<br>'
}
}else if (sd[0]==ed[0]){
duration = sd[1]+'>'+ed[1] +'<br>'
}else{
duration = sd[0]+' '+sd[1]+'>'+ed[0]+' '+ed[1] +'<br>'
}
tp.find('.event-info').html(duration+v.title+"<div class=\"event-content\">"+v.note+"</div>")
tp.find('.event-bullet-event').css('background',v.color)
event_div.find('.event-containers').append(tp)
})
$(ele).parents('div[data-module="calendar"]').css('display','flex')
if ($(ele).parents('div[data-module="calendar"]').width()>=728 && $(window).width()>=768){
event_div.css('width','50%')
$(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','50%')
}else{
event_div.css('width','100%')
$(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','100%')
}
event_div.show()
$('.close_box').off('click')
$('.close_box').on('click',function(){
hide_event(this)
})
}
var hide_event = function(ele){
$(ele).parents('.w-calendar').find('td.shown').removeClass('shown')
var event_div = $(ele).parents('div[data-module="calendar"]').find('div.calendar-events')
$(ele).parents('div[data-module="calendar"]').css('display','block')
$(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','')
event_div.hide()
//$(ele).parents('div[data-module="calendar"]').find('td.w-calendar-toggle').removeClass('w-calendar-toggle')
event_div.find('.event-container').remove()
}
var renderMonth = function(){
var num_of_rows = getNumberOfRows(),
head_title = monthDom.find("h4 span.text"),
table_body = monthDom.find("table.table tbody");
table_body.html("");
for(var i = 0; i < num_of_rows; i++){
var tr = null;
if(i == 0){
tr = makeRow("first");
}else if(i == (num_of_rows - 1)){
tr = makeRow("last");
}else{
tr = makeRow("middle");
}
if(tr == null){
break;
}
table_body.append(tr);
head_title.text(monthNames[firstDay.getMonth()] + " " + firstDay.getFullYear());
}
}
var getNumberOfRows = function() {
var day = 1,
sat_counter = 0,
sunday_counter = 0,
date = new Date(year, month, day);
while(date.getMonth() === month) {
if(date.getDay() === 0) {
sunday_counter++;
}else if(date.getDay() === 6) {
sat_counter++;
}
day++;
date = new Date(year, month, day);
}
return (sunday_counter == 5 && sat_counter == 5 ? 6 : 5);
}
var makeRow = function(position){
if(last_inserted_date <= lastDay.getDate()){
var row = $("<tr></tr>");
switch (position){
case "first":
var first_line_first_day = new Date(year,month,firstDay.getDate()-firstDay.getDay())
var first_line_first_date = first_line_first_day.getDate()
var first_line_first_month = first_line_first_day.getMonth()
var first_line_first_year = first_line_first_day.getFullYear()
for(var i = 0;i < 7;i++){
var td = $("<td><div></div></td>");
if(i >= firstDay.getDay()){
if(today != 0 && last_inserted_date == today){
td.addClass("w-calendar-today");
}
td.find('div').text(last_inserted_date);
td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
last_inserted_date++;
}else{
td.find('div').text(first_line_first_date+i)
td.attr("data-date-node",(first_line_first_date+i)+"-"+first_line_first_month+"-"+first_line_first_year);
td.addClass("w-calendar-other-month")
}
row.append(td);
}
break;
case "middle":
for(var i = 0;i < 7;i++){
var td = $("<td><div></div></td>");
if(today != 0 && last_inserted_date == today){
td.attr("class","w-calendar-today");
}
td.find('div').text(last_inserted_date);
td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
last_inserted_date++;
row.append(td);
}
break;
case "last":
var next_month = month+1,
next_year = year;
if (next_month==12){
next_month = 0;
next_year = next_year + 1;
}
for(var i = 0;i < 7;i++){
var td = $("<td><div></div></td>");
if(i <= lastDay.getDay()){
if(today != 0 && last_inserted_date == today){
td.attr("class","w-calendar-today");
}
td.find('div').text(last_inserted_date);
td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
last_inserted_date++;
}else{
td.find('div').text(i-lastDay.getDay())
td.attr("data-date-node",(i-lastDay.getDay())+"-"+next_month+"-"+next_year);
td.addClass("w-calendar-other-month")
}
row.append(td);
}
break;
}
}else{
var row = null;
}
return row;
}
function toggle_event(ele,type){
$(ele).parents('.month_template').find('td').removeClass('w-calendar-toggle')
if ($(ele).length==1){
$(ele).addClass('w-calendar-toggle')
toggle_data = $(ele).data('date-node')
}
var toggle_month = $(ele).data('date-node').split('-')[1]
if (toggle_month==month || $(ele).length!=1){
if (type=='show'){
show_event($(ele).data('date-node'),ele)
}else{
hide_event(ele)
}
}
else if(toggle_month==month+1 || toggle_month==0){
nextMonthFunc(toggle_data)
}else{
prevMonthFunc(toggle_data)
}
}
var fetchEvents = function(){
var usd = Math.round(firstDay/1000),
ued = Math.round(lastDay/1000);
$.ajax({
url : "/xhr/calendars/agenda",
data : {"unix_start" : usd, "unix_end" : ued, "subpart_id" : subpartid, "locale" : $('html').attr('lang')},
dataType : "json",
type : "get"
}).done(function(data){
events = {}
$(dom).find('.w-calendar-title span').eq(-1).html(data['calendar_title'])
$.each(data.events,function(index,eve){
var sd = new Date(eve.start),
ed = new Date(eve.end),
sd_date = new Date(formate_datetime(eve.start)[0]),
ed_date = new Date(formate_datetime(eve.end)[0]),
timeDiff = ed_date.getTime() - sd_date.getTime(),
dayDiff = Math.round(timeDiff / (1000 * 3600 * 24));
if(eve.allDay && dayDiff < 1){
dayDiff = 1
}
if(dayDiff > 0){
var inserting_date = sd.getDate();
for(var i = 0;i <= dayDiff; i++){
var dt = inserting_date + "-" + month + "-" + year,
td = dom.find("td[data-date-node=" + dt + "]");
if (events[dt]==undefined){
events[dt]=[]
}
events[dt].push(eve)
td.addClass("w-calendar-event");
if(events[dt].length==1){
td.click(function(){
toggle_event(this,'show')
})
}
inserting_date++;
if(inserting_date > lastDay.getDate() || (ed.getMonth() == month && inserting_date > ed.getDate())){
break;
}
}
}else{
var dt = sd.getDate() + "-" + sd.getMonth() + "-" + sd.getFullYear();
td = dom.find("td[data-date-node=" + dt + "]");
if (events[dt]==undefined){
events[dt]=[]
}
events[dt].push(eve)
if(events[dt].length==1){
td.click(function(){
toggle_event(this,'show')
})
}
td.addClass("w-calendar-event");
}
})
if (!toggle_data){
if (dom.find('td.w-calendar-today').length != 0){
toggle_event(dom.find('td.w-calendar-today'),'show')
}else{
toggle_event(dom.find('td'),'hide')
}
}
dom.find('td:not(td.w-calendar-event)').click(function(){
toggle_event(this,'hide')
})
var clicked_color = dom.find('.w-calendar-event').css('background-color')
if (clicked_color){
clicked_color = lighten_color(rgb2hex(clicked_color),-20)
if (clicked_color!='#000000'){
dom.find('table').append($('<style>.w-calendar-table .w-calendar-toggle{ background-color:'+clicked_color+';color: white;}</style>'))
}
}
monthDom.find("i.loading").addClass("hide");
})
}
this.currentMonth = function(){
renderMonth();
var div_tag = $('<div></div>')
var widge_title = dom.find('.w-calendar-title').eq(0)
div_tag.html(monthDom)
div_tag.prepend(widge_title)
dom.html(div_tag);
monthDom.find("i.loading").removeClass("hide");
fetchInterval = setTimeout(fetchEvents,300);
dom.find('div').eq(0).after(eventHTML)
}
this.nextMonth = function(toggle_flag){
clearTimeout(fetchInterval);
monthDom.find("i.loading").removeClass("hide");
month++;
if(month == 12){
year++;
month = 0;
}
firstDay = new Date(year,month,1);
lastDay = new Date(year,month+1,0);
today = (initialDate.getMonth() == month && initialDate.getFullYear() == year ? initialDate.getDate() : 0);
last_inserted_date = 1;
renderMonth();
dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
if (toggle_data && toggle_flag){
toggle_event(dom.find('td[data-date-node="'+toggle_data+'"]'),'show')
}else{
toggle_data = undefined
}
fetchInterval = setTimeout(fetchEvents,1000);
}
nextMonthFunc = this.nextMonth;
this.prevMonth = function(toggle_flag){
clearTimeout(fetchInterval);
monthDom.find("i.loading").removeClass("hide");
month--;
if(month == -1){
year--;
month = 11;
}
firstDay = new Date(year,month,1);
lastDay = new Date(year,month+1,0);
today = (initialDate.getMonth() == month && initialDate.getFullYear() == year ? initialDate.getDate() : 0);
last_inserted_date = 1;
renderMonth();
dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
if (toggle_data && toggle_flag){
toggle_event(dom.find('td[data-date-node="'+toggle_data+'"]'),'show')
}else{
toggle_data = undefined
}
fetchInterval = setTimeout(fetchEvents,1000);
}
prevMonthFunc = this.prevMonth;
}

View File

@ -1176,7 +1176,9 @@ function EventManager(options, _sources) {
/* Event Normalization
-----------------------------------------------------------------------------*/
function addMinutes(date, minutes) {
return new Date(date.getTime() + minutes*60000);
}
function normalizeEvent(event) {
var source = event.source || {};
@ -1191,7 +1193,7 @@ function EventManager(options, _sources) {
event._start = cloneDate(event.start = parseDate(event.start, ignoreTimezone));
event.end = parseDate(event.end, ignoreTimezone);
if (event.end && event.end < event.start) {
event.end = event.start;
event.end = addMinutes(event.start,1);
}
event._end = event.end ? cloneDate(event.end) : null;
if (event.allDay === undefined) {

View File

@ -0,0 +1,98 @@
a.event-container{
color: inherit;
}
.event-container {
display: flex;
flex-wrap: wrap;
width: 100%;
border-radius: 10px;
margin-bottom: 1em;
transition: all .3s ease;
cursor: pointer;
padding: 0.5em;
min-height: 3em;
position: relative;
}
.close_box{
font-weight: bold;
position: relative;
float: right;
padding: 0.5em;
cursor: pointer;
}
.close_box:hover{
color: red;
}
.event-bullet-event {
width: 100%;
height: 100%;
border-radius: 50%;
}
.event-bullet-event {
width: 2em;
height: 2em;
border-radius: 1em;
}
.event-container:hover {
background-color: #fff;
box-shadow: 0 0.1em 0.7em -0.25em rgba(0, 0, 0, 0.65);
}
.event-container > .event-icon {
position: absolute;
display: flex;
justify-content: center;
width: 15%;
height: 100%;
z-index: 5;
}
.event-container > .event-icon::before {
content: '';
position: absolute;
top: 1em;
left: 50%;
width: 0.1em;
height: calc(100% + 1.5em);
background-color: #eaeaea;
z-index: -1;
}
.event-container:first-child > .event-icon::before {
top: 1.5em;
position: absolute;
}
.event-container:last-child > .event-icon::before {
height: 0;
}
.event-container:only-child > .event-icon::before {
background-color: unset;
}
.event-header{
width: 100%;
text-align: center;
font-size: 1.7em;
font-weight: bold;
padding: 0.35em 0;
}
.event-info{
padding-left: 15%;
}
.calendar-events{
position: relative;
background: #fbfbfb;
}
.month_template{
position: relative;
}
.w-calendar.widget-calendar-1{
flex-wrap: wrap;
margin-top: 2em;
}
.widget-calendar-1 .w-calendar-nav a {
top: 2em;
}
.calendar-dialog div.ui-dialog-content {
max-height: 20em !important;
overflow-wrap: break-word;
}
.widget-calendar-1 td{
cursor: pointer;
}

View File

@ -0,0 +1,145 @@
a.event-container{
color: inherit;
}
.event-container {
display: flex;
flex-wrap: wrap;
width: 100%;
border-radius: 10px;
margin-bottom: 1em;
transition: all .3s ease;
cursor: pointer;
padding: 0.5em;
min-height: 3em;
position: relative;
}
.close_box{
font-weight: bold;
position: relative;
float: right;
padding: 0.5em;
cursor: pointer;
}
.close_box:hover{
color: red;
}
.event-bullet-event {
width: 100%;
height: 100%;
border-radius: 50%;
}
.event-bullet-event {
width: 2em;
height: 2em;
border-radius: 1em;
}
.event-container:hover {
background-color: #fff;
box-shadow: 0 0.1em 0.7em -0.25em rgba(0, 0, 0, 0.65);
}
.event-container > .event-icon {
position: absolute;
display: flex;
justify-content: center;
width: 15%;
height: 100%;
z-index: 5;
}
.event-container > .event-icon::before {
content: '';
position: absolute;
top: 1em;
left: 50%;
width: 0.1em;
height: calc(100% + 1.5em);
background-color: #eaeaea;
z-index: -1;
}
.event-container:first-child > .event-icon::before {
top: 1.5em;
position: absolute;
}
.event-container:last-child > .event-icon::before {
height: 0;
}
.event-container:only-child > .event-icon::before {
background-color: unset;
}
.event-header{
width: 100%;
text-align: center;
font-size: 1.7em;
font-weight: bold;
padding: 0.35em 0;
}
.event-info{
padding-left: 15%;
}
.calendar-events{
position: relative;
background: #fbfbfb;
}
.month_template{
position: relative;
}
.w-calendar.widget-calendar-2{
flex-wrap: wrap;
margin-top: 2em;
}
.widget-calendar-2 .w-calendar-table td:hover {
background-color: #eaeaea;
color: #333;
}
.widget-calendar-2 .w-calendar-table td {
background: inherit;
color: inherit;
cursor: pointer;
border: 0;
}
.widget-calendar-2 .w-calendar-table td div{
display: inline-flex;
justify-content: center;
align-items: center;
margin: auto;
width: 3em;
height: 3em;
}
.widget-calendar-2 .w-calendar-table th {
background: unset;
color: unset;
border: 0;
width: 3em;
height: 3em;
}
.widget-calendar-2.w-calendar .widget-title {
padding: 0.2em;
font-size: 1.5em;
}
.widget-calendar-2 table.w-calendar-table td.w-calendar-toggle div {
background: #6f0007;
border-radius: 1.5em;
color: white;
}
.widget-calendar-2 .w-calendar-table td.w-calendar-event div{
border: 1px #6f0007 solid;
background: #eee;
border-radius: 1.5em;
}
.widget-calendar-2 .w-calendar-title{
background: rgb(146, 8, 17);
color: rgb(255, 255, 255);
padding: 0px 10%;
display: flex;
flex-flow: row-reverse wrap;
line-height: 2em;
justify-content: space-between;
font-size: 1.85em;
width: 100%;
}
.calendar-dialog div.ui-dialog-content {
max-height: 20em !important;
overflow-wrap: break-word;
}
.widget-calendar-2 table td.w-calendar-other-month {
color: #999797;
}

View File

@ -14,7 +14,7 @@ class Admin::CalendarsController < OrbitAdminController
sdt = Time.at(params[:start].to_i)
edt = Time.at(params[:end].to_i)
@monthly_events = Event.monthly_event(sdt,edt).with_categories(filters("category"))
.with_tags(filters("tag"))
.with_tags(filters("tag")).convert_front
@re = Event.with_categories(filters("category")).with_tags(filters("tag")).recurring_event(sdt,edt)
allevents = @monthly_events.inject(@re, :<<)
events = allevents.to_json

View File

@ -22,11 +22,12 @@ class CalendarsController < ApplicationController
def widget
part = OrbitHelper.get_current_widget
{
"extras" => {
"subpart-id" => part.id.to_s,
"more_url" => OrbitHelper.widget_more_url
"more_url" => OrbitHelper.widget_more_url,
'widget_title' => part.title,
'calendar_title' => get_calendar_title
}
}
end
@ -38,7 +39,7 @@ class CalendarsController < ApplicationController
if params[:start].present? && params[:end].present?
sdt = Time.at(params[:start].to_i)
edt = Time.at(params[:end].to_i)
events = Event.monthly_event(sdt,edt)+Event.recurring_event(sdt,edt)
events = Event.monthly_event(sdt,edt).convert_front+Event.recurring_event(sdt,edt)
end
end
respond_to do |format|
@ -48,23 +49,30 @@ class CalendarsController < ApplicationController
end
def agenda
if !params[:subpart_id].nil?
subpartid = params[:subpart_id]
widget = SubPart.find(subpartid)
calendar_types = widget.custom_array_field
else
calendar_types = []
end
if params[:unix_start].present? && params[:unix_end].present?
agenda_start = Time.at(params[:unix_start].to_i).to_s
agenda_end = Time.at(params[:unix_end].to_i).to_s
if !calendar_types.blank?
events = Event.where(:calendar_type_id.in => calendar_types).agenda_events(agenda_start,agenda_end)
I18n.with_locale(params[:locale]||I18n.locale) do
if !params[:subpart_id].nil?
subpartid = params[:subpart_id]
widget = SubPart.find(subpartid)
calendar_types = widget.custom_array_field
else
events = Event.agenda_events(agenda_start,agenda_end)
calendar_types = []
end
if params[:unix_start].present? && params[:unix_end].present?
agenda_start = Time.at(params[:unix_start].to_i).to_s
agenda_end = Time.at(params[:unix_end].to_i).to_s
if !calendar_types.blank?
events = Event.where(:calendar_type_id.in => calendar_types).agenda_events(agenda_start,agenda_end)
else
events = Event.agenda_events(agenda_start,agenda_end)
end
end
render json: {"events" => events,"calendar_title"=>get_calendar_title(Time.at(params[:unix_start].to_i))}.to_json({"frontend" => true})
end
render json: {"events" => events}.to_json({"frontend" => true})
end
def get_calendar_title(now_date=nil)
now_date = Time.now if now_date.nil?
month_name = I18n.locale.to_s=='zh_tw' ? now_date.month : I18n.t("calendar.month_name.#{now_date.month}")
I18n.t("calendar.calendar_title",year: now_date.year,month: month_name)
end
end

View File

@ -19,11 +19,22 @@ class Event
field :period
field :create_user_id
field :update_user_id
field :bulletin_id
field :module_key
field :model_cat
field :model_page_id
field :model_tags,type: Array,default: []
belongs_to :calendar_type
field :url
def get_module_url
page = !self.model_page_id.blank? ? Page.find(self.model_page_id): Page.where(:module => self.module_key).where(:categories.in => Array(self.model_cat)+[[]],:tags.in=>Array(self.model_tags)+[[]]).first
page.nil? ? '' : (page.url+'/'+eval(self.model_class).where(:id=>self.model_id).first.to_param)
end
def url_to_fronted
self.url.blank? ? (self.model_class.blank? ? '' : self.get_module_url) : self.url
end
attr_accessor :agenda_start, :agenda_end, :get_agenda_events
#let other model can connect to this model
#let other model can connect to this model
field :key
field :model_class
field :model_id
@ -110,7 +121,14 @@ class Event
end
def self.monthly_event(start_date,end_date)
self.any_of(:start.gte => start_date, :end.gte => start_date).and(:start.lte => end_date).asc(:start)
self.any_of({:start.lte => start_date,:end.gte => start_date},{:start.gte => start_date,:end.lte => end_date},{:start.lte => end_date,:end.gte => end_date}).asc(:start)
end
def self.convert_front
self.all.collect do |re|
edit_url = Rails.application.routes.url_helpers.edit_admin_calendar_path(:locale=>I18n.locale, :id=>re.id)
delete_url = Rails.application.routes.url_helpers.admin_calendar_path(:locale=>I18n.locale, :id=>re.id)
{:id => re.id.to_s, :title=>re.title, :note=>re.note || "", :allDay => re.all_day, :recurring => re.recurring, :calendar => re.calendar_type.id.to_s, :color => re.calendar_type.color, :edit_url => edit_url, :delete_url => delete_url, :url_linked => re.url_to_fronted, :start => re.start, :end => re.end}
end
end
def self.get_diff_month(date1,date2)
(date2.year-date1.year)*12+(date2.month-date1.month)
@ -121,12 +139,14 @@ class Event
@recurring_events.each do |re|
edit_url = Rails.application.routes.url_helpers.edit_admin_calendar_path(:locale=>I18n.locale, :id=>re.id)
delete_url = Rails.application.routes.url_helpers.admin_calendar_path(:locale=>I18n.locale, :id=>re.id)
data = {:id => re.id.to_s, :title=>re.title, :note=>re.note, :allDay => re.all_day, :recurring => re.recurring, :calendar => re.calendar_type.id.to_s, :color => re.calendar_type.color, :edit_url => edit_url, :delete_url => delete_url}
data = {:id => re.id.to_s, :title=>re.title, :note=>re.note || "", :allDay => re.all_day, :recurring => re.recurring, :calendar => re.calendar_type.id.to_s, :color => re.calendar_type.color, :edit_url => edit_url, :delete_url => delete_url, :url_linked => re.url_to_fronted}
case re.period
when 'Daily'
days = (end_date.to_date-re.start.to_date)
days = (end_date.to_date-re.start.to_date).to_i
freq = re.frequency.to_i
(1..days).each do |i|
start_key = (start_date.to_date-re.start.to_date).to_i
start_key = 1 if start_key<0
(start_key..days).each do |i|
if i%freq==0
@start_date = re.start + i
@end_date = re.end + i
@ -136,7 +156,7 @@ class Event
when "Weekly"
@start_date = re.start
@end_date = re.end
@i = TimeDifference.between(re.start,end_date).in_weeks.to_i
@i = TimeDifference.between(re.start.to_date,end_date.to_date).in_weeks.to_i
(1..@i).each do |i|
@start_date += (7*re.frequency.to_i)
@end_date += (7*re.frequency.to_i)
@ -150,10 +170,12 @@ class Event
start_datetime = start_date.to_datetime
months = self.get_diff_month(sd,start_datetime)..self.get_diff_month(sd,end_datetime)
months.each do |diff_month|
if (diff_month%re.frequency.to_i)==0
if (diff_month%re.frequency.to_i)==0
sd_tp = sd + diff_month.month
ed_tp = ed + diff_month.month
@recurring << data.merge({:start => sd_tp, :end => ed_tp})
if sd_tp>start_date
@recurring << data.merge({:start => sd_tp, :end => ed_tp})
end
end
end
end
@ -163,7 +185,7 @@ class Event
ed = re.end
start_datetime = start_date.to_datetime
end_datetime = end_date.to_datetime
if start_datetime>sd
if start_datetime>sd && start_datetime.year != sd.year
((start_datetime.year-sd.year)..(end_datetime.year-sd.year)).each do |year_diff|
if (year_diff%re.frequency.to_i)==0
sd_tp = sd + year_diff.year
@ -181,7 +203,7 @@ class Event
def self.agenda_events(agenda_start, agenda_end)
recurring = self.recurring_event(agenda_start,agenda_end)
events = self.any_of(:start.gte => agenda_start).or(:end.gte => agenda_start).and(:start.lte => agenda_end).asc(:start)
events = self.monthly_event(agenda_start, agenda_end).convert_front
all_events = recurring.concat(events)
recurring
end

View File

@ -36,6 +36,12 @@
<%= f.text_area :note, :rows => 3 %>
</div>
</div>
<div class="control-group">
<%= f.label t("url"), :class=>"control-label" %>
<div class="controls">
<%= f.text_field :url %>
</div>
</div>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
@ -44,35 +50,19 @@
</label>
</div>
</div>
<% data_format = (@event.all_day || @event.new_record?) ? 'yyyy/MM/dd' : 'yyyy/MM/dd hh:mm' %>
<div class="control-group">
<%= f.label t("start_date"), :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", 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>
<span class="add-on iconbtn">
<i data-time-icon="icons-clock" data-date-icon="icons-calendar"></i>
</span>
</div>
<%= f.datetime_picker :start, :class => "input-large", data: {"fv-validation" => "required;","fv-messages" => "Cannot be empty;"}, :placeholder => data_format, :new_record => @event.new_record?, :format => data_format %>
</div>
</div>
<div class="control-group">
<%= f.label t("end_date"), :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> -->
<span class="add-on clearDate">
<i class="icons-cross-3"></i>
</span>
<span class="add-on iconbtn">
<i data-time-icon="icons-clock" data-date-icon="icons-calendar"></i>
</span>
</div>
<%= f.datetime_picker :end, :class => "input-large", :placeholder => data_format, :new_record => @event.new_record?, :format=> data_format %>
</div>
</div>
<div class="control-group">
@ -120,3 +110,86 @@
<a href="" class="btn btn-close">Cancel</a>
</div>
</div>
<script type="text/javascript">
$('body').ready(function(){
if ($('.default_picker,.time_picker,.date_picker').find('input').length!=0){
$('.default_picker,.time_picker,.date_picker').find('.iconbtn').css('display','none')
$('.default_picker,.date_picker').each(function(i,v){
v = $(v).find('input')[0]
$(v).attr('autocomplete','off')
var org_format = $(v).data('format')
var format = org_format.toLowerCase().replace(/yyyy/,'yy')
var H_flag = false
if (org_format.search(/tt|H/)!= null ){
H_flag = true
}
var M_flag = false
if (org_format.match(/[hH].*M/)!=null){
M_flag = true
}
if (format.search(/h/)!= -1){
var result = format.match(/\W+[?=h]/)
if (result == null){
result = format.match(/h/)
}
var indice = result.index
var dateformat = format.slice(0,8)
var time_format_start = format.search(/h/)
var time_format = format.slice(time_format_start)
if (H_flag){
time_format = time_format.replace(/h/g,'H')
}
if (M_flag){
time_format = time_format.replace(/m/g,'M')
}
$(v).ui_datetimepicker({
dateFormat: dateformat,
controlType: 'select',
timeInput: true,
oneLine: true,
timeFormat: time_format
})
}else{
var show_view = ''
if (format.split(/\W/).slice(-1)[0].slice(-1)[0]=='m'){
show_view = 'month'
}
if (format.split(/\W/).slice(-1)[0].slice(-1)[0]=='y'){
show_view = 'year'
}
$(v).ui_datepicker({dateFormat: format,show_view: show_view})
}
})
$('.default_picker,.time_picker,.date_picker').find('.clearDate').click(function(){
$(this).parents('.default_picker,.time_picker,.date_picker').eq(-1).find('input').val('')
$(this).parents('.default_picker,.time_picker,.date_picker').eq(-1).find('input').trigger('change')
})
$('.time_picker input').each(function(i,v){
$(v).ui_timepicker({timeFormat: $(v).data('format'),
controlType: 'select',
timeInput: true,
oneLine: true})
})
$('.separated_picker').find('.date_picker,.time_picker').find('input').change(function(){
var parent_div = $(this).parents('.separated_picker').eq(-1)
var date_picker_value = parent_div.find('.date_picker>input').val()
var time_picker_value = parent_div.find('.time_picker>input').val()
if (date_picker_value == '' || time_picker_value == ''){
parent_div.children('input[type=hidden]').val('')
}
else{
parent_div.children('input[type=hidden]').val(date_picker_value+' '+time_picker_value)
}
})
}
$('.simple-date-picker').find('input[type="text"],select').change(function(){
var parent_div = $(this).parents('.simple-date-picker').eq(-1)
var year = parent_div.find('.span3').val()
var month = parent_div.find('.span2').val()
var day = parent_div.find('.span1').val()
if (year != '' && month != '' && day != ''){
parent_div.find('input[type="hidden"]').eq(-1).val(year+'-'+month+'-'+day)
}
})
})
</script>

View File

@ -1,7 +1,5 @@
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<%= javascript_include_tag 'fullcalendar' %>
<%= javascript_include_tag 'calendar' %>
<%= javascript_include_tag 'bootstrap-datetimepicker' %>
<%= javascript_include_tag 'validator' %>
<%= stylesheet_link_tag "fullcalendar"%>

View File

@ -2,7 +2,20 @@ $:.push File.expand_path("../lib", __FILE__)
# Maintain your gem's version:
require "calendar/version"
dir_pwd = ENV['PWD']
template_path = dir_pwd + '/app/templates'
all_template = Dir.glob(template_path+'/*/')
puts 'copying calendar module'
all_template.each do |folder|
if folder.split('/')[-1] != 'mobile'
begin
system ('cp -r '+ app_path + '/modules/ ' + folder)
rescue
puts 'error copy'
end
end
end
# Describe your gem and declare its dependencies:
Gem::Specification.new do |s|
s.name = "calendar"

View File

@ -17,3 +17,17 @@ en:
weekly: Weekly
monthly: Monthly
yearly: Yearly
month_name:
'1': 'January'
'2': 'February'
'3': 'March'
'4': 'April'
'5': 'May'
'6': 'June'
'7': 'July'
'8': 'August'
'9': 'September'
'10': 'October'
'11': 'November'
'12': 'December'
calendar_title: "%{month} %{year}"

View File

@ -14,4 +14,5 @@ zh_tw:
daily: 每天
weekly: 每週
monthly: 每月
yearly: 每年
yearly: 每年
calendar_title: "%{year}年%{month}月"

View File

@ -28,16 +28,23 @@
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="calendar-events" style="display: none;">
<div class="close_box">X</div>
<div class="event-header"></div>
<div class="event-containers">
</div>
</div>
</div>
<%= stylesheet_link_tag "calendar_widget1" %>
<script>
if(document.getElementById("calendar-widget_module") == null){
var tag = document.createElement('script');
tag.setAttribute("id", "calendar-widget_module");
tag.src = "/assets/calendar_widget.js";
tag.onload = function(){
$("div[data-module=calendar]").each(function(index){
$("div.widget-calendar-1[data-module=calendar]").each(function(index){
var calendar = $(this),
cmi = new CalendarModuleMonth(new Date(), calendar,calendar.data("subpart-id"),"{{more_url}}");
cmi.currentMonth();

View File

@ -0,0 +1,69 @@
<div class="w-calendar widget-calendar-2" data-module="calendar">
<div class="w-calendar-title">
<span>{{widget_title}}</span>
<span>{{calendar_title}}</span>
</div>
<div class='month_template'>
<h4 class="widget-title ">
<span class="text"></span>
<i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i>
</h4>
<div class="w-calendar-nav">
<a href="#" class="w-calendar-nav-prev">
<i class="fa fa-chevron-left"></i>
<span class="w-calendar-nav-prev-text hide">Prev</span>
</a>
<a href="#" class="w-calendar-nav-next">
<i class="fa fa-chevron-right"></i>
<span class="w-calendar-nav-next-text hide">Next</span>
</a>
</div>
<table class="table table-condensed w-calendar-table">
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="calendar-events" style="display: none;">
<div class="close_box">X</div>
<div class="event-header"></div>
<div class="event-containers">
</div>
</div>
</div>
<%= stylesheet_link_tag "calendar_widget2" %>
<script>
if(document.getElementById("calendar-widget_module2") == null){
var tag = document.createElement('script');
tag.setAttribute("id", "calendar-widget_module2");
tag.src = "/assets/calendar_widget2.js";
tag.onload = function(){
$("div.widget-calendar-2[data-module=calendar]").each(function(index){
var calendar = $(this),
cmi = new CalendarModuleMonth(new Date(), calendar,calendar.data("subpart-id"),"{{more_url}}");
cmi.currentMonth();
calendar.find("div.w-calendar-nav a").on("click",function(){
var el = $(this);
if(el.hasClass("w-calendar-nav-prev")){
cmi.prevMonth();
}else if(el.hasClass("w-calendar-nav-next")){
cmi.nextMonth();
}
return false;
})
})
}
var head = document.getElementsByTagName("head");
head[0].appendChild(tag);
}
</script>

View File

@ -17,6 +17,14 @@
"en" : "1. Calendar"
},
"thumbnail" : "thumb.png"
},
{
"filename" : "calendar_widget2",
"name" : {
"zh_tw" : "2. 行事曆加公告",
"en" : "2. Calendar with announcement"
},
"thumbnail" : "thumb2.png"
}
]
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB