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

fix some js and style error

This commit is contained in:
chiu 2020-08-13 16:51:04 +08:00
parent c1c7b98638
commit 1105f57bf9
5 changed files with 83 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
app/assets/javascripts/calendar_widget.js
View File

@ -10,6 +10,8 @@
fetchInterval = null, fetchInterval = null,
month = date.getMonth(), month = date.getMonth(),
year = date.getFullYear(), year = date.getFullYear(),
first_target_day = new Date(year,month,1),
last_target_day = new Date(year,month+1,0),
firstDay = new Date(year,month,1), firstDay = new Date(year,month,1),
lastDay = new Date(year,month+1,0), lastDay = new Date(year,month+1,0),
today = date.getDate(), today = date.getDate(),
@ -40,12 +42,12 @@
} }
function lighten_color(my_hex,percent){ function lighten_color(my_hex,percent){
if (my_hex[0] == '#'){ if (my_hex[0] == '#'){
my_hex = my_hex.slice(1,-1) my_hex = my_hex.slice(1)
} }
var comp = '' var comp = ''
var rgb = [] var rgb = []
var batch_size = Math.ceil(my_hex.length/3) var batch_size = Math.ceil(my_hex.length/3)
for (i=0;i<3;i++){ for (var i=0;i<3;i++){
rgb.push(my_hex.slice(batch_size*i,batch_size*(i+1))) rgb.push(my_hex.slice(batch_size*i,batch_size*(i+1)))
} }
$.each(rgb,function(){ $.each(rgb,function(){
@ -55,7 +57,7 @@
if (tmp>255) tmp = 255 if (tmp>255) tmp = 255
if (tmp < 0) tmp = 0 if (tmp < 0) tmp = 0
tmp = tmp.toString(16) tmp = tmp.toString(16)
for (i=0;i<2-tmp.length;i++){ for (var i=0;i<2-tmp.length;i++){
tmp = '0' + tmp tmp = '0' + tmp
} }
comp = comp + tmp comp = comp + tmp
@ -222,6 +224,7 @@
var first_line_first_date = first_line_first_day.getDate() var first_line_first_date = first_line_first_day.getDate()
var first_line_first_month = first_line_first_day.getMonth() var first_line_first_month = first_line_first_day.getMonth()
var first_line_first_year = first_line_first_day.getFullYear() var first_line_first_year = first_line_first_day.getFullYear()
first_target_day = new Date(first_line_first_year,first_line_first_month,first_line_first_date)
for(var i = 0;i < 7;i++){ for(var i = 0;i < 7;i++){
var td = $("<td><div></div></td>"); var td = $("<td><div></div></td>");
if(i >= firstDay.getDay()){ if(i >= firstDay.getDay()){
@ -258,6 +261,7 @@
next_month = 0; next_month = 0;
next_year = next_year + 1; next_year = next_year + 1;
} }
last_target_day = new Date(next_year,next_month,6-lastDay.getDay())
for(var i = 0;i < 7;i++){ for(var i = 0;i < 7;i++){
var td = $("<td><div></div></td>"); var td = $("<td><div></div></td>");
if(i <= lastDay.getDay()){ if(i <= lastDay.getDay()){
@ -303,10 +307,11 @@
} }
var fetchEvents = function(){ var fetchEvents = function(){
var usd = Math.round(firstDay/1000), var usd = Math.round(firstDay/1000),
ued = Math.round(lastDay/1000); usd_target = Math.round(first_target_day/1000),
ued_target = Math.round(last_target_day/1000);
$.ajax({ $.ajax({
url : "/xhr/calendars/agenda", url : "/xhr/calendars/agenda",
data : {"unix_start" : usd, "unix_end" : ued, "subpart_id" : subpartid, "locale" : $('html').attr('lang')}, data : {"month_start" : usd,"unix_start" : usd_target, "unix_end" : ued_target, "subpart_id" : subpartid, "locale" : $('html').attr('lang')},
dataType : "json", dataType : "json",
type : "get" type : "get"
}).done(function(data){ }).done(function(data){
@ -369,9 +374,9 @@
}) })
var clicked_color = dom.find('.w-calendar-event').css('background-color') var clicked_color = dom.find('.w-calendar-event').css('background-color')
if (clicked_color){ if (clicked_color){
clicked_color = lighten_color(rgb2hex(clicked_color),-20) clicked_color = lighten_color(rgb2hex(clicked_color),-35)
if (clicked_color!='#000000'){ if (clicked_color!='#000000'){
dom.find('table').append($('<style>.w-calendar-table .w-calendar-toggle{ background-color:'+clicked_color+';color: white;}</style>')) dom.find('table').append($('<style>.widget-calendar-1 table.w-calendar-table .w-calendar-toggle{ background-color:'+clicked_color+';color: white;}</style>'))
} }
} }
monthDom.find("i.loading").addClass("hide"); monthDom.find("i.loading").addClass("hide");
@ -402,14 +407,20 @@
lastDay = new Date(year,month+1,0); lastDay = new Date(year,month+1,0);
today = (initialDate.getMonth() == month && initialDate.getFullYear() == year ? initialDate.getDate() : 0); today = (initialDate.getMonth() == month && initialDate.getFullYear() == year ? initialDate.getDate() : 0);
last_inserted_date = 1; last_inserted_date = 1;
renderMonth(); var toggle_type,ele;
dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
if (toggle_data && toggle_flag){ if (toggle_data && toggle_flag){
toggle_event(dom.find('td[data-date-node="'+toggle_data+'"]'),'show') ele = dom.find('td[data-date-node="'+toggle_data+'"]')
toggle_type = (ele.hasClass('w-calendar-event') ? 'show' : 'hide')
}else{ }else{
toggle_data = undefined toggle_data = undefined
} }
fetchInterval = setTimeout(fetchEvents,1000); renderMonth();
dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
if (ele){
ele = dom.find('td[data-date-node="'+toggle_data+'"]')
toggle_event(ele,toggle_type)
}
fetchInterval = setTimeout(fetchEvents,300);
} }
nextMonthFunc = this.nextMonth; nextMonthFunc = this.nextMonth;
this.prevMonth = function(toggle_flag){ this.prevMonth = function(toggle_flag){
@ -424,14 +435,20 @@
lastDay = new Date(year,month+1,0); lastDay = new Date(year,month+1,0);
today = (initialDate.getMonth() == month && initialDate.getFullYear() == year ? initialDate.getDate() : 0); today = (initialDate.getMonth() == month && initialDate.getFullYear() == year ? initialDate.getDate() : 0);
last_inserted_date = 1; last_inserted_date = 1;
renderMonth(); var toggle_type,ele;
dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
if (toggle_data && toggle_flag){ if (toggle_data && toggle_flag){
toggle_event(dom.find('td[data-date-node="'+toggle_data+'"]'),'show') ele = dom.find('td[data-date-node="'+toggle_data+'"]')
toggle_type = (ele.hasClass('w-calendar-event') ? 'show' : 'hide')
}else{ }else{
toggle_data = undefined toggle_data = undefined
} }
fetchInterval = setTimeout(fetchEvents,1000); renderMonth();
dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
if (ele){
ele = dom.find('td[data-date-node="'+toggle_data+'"]')
toggle_event(ele,toggle_type)
}
fetchInterval = setTimeout(fetchEvents,300);
} }
prevMonthFunc = this.prevMonth; prevMonthFunc = this.prevMonth;
} }

47
app/assets/javascripts/calendar_widget2.js
View File

@ -10,6 +10,8 @@
fetchInterval = null, fetchInterval = null,
month = date.getMonth(), month = date.getMonth(),
year = date.getFullYear(), year = date.getFullYear(),
first_target_day = new Date(year,month,1),
last_target_day = new Date(year,month+1,0),
firstDay = new Date(year,month,1), firstDay = new Date(year,month,1),
lastDay = new Date(year,month+1,0), lastDay = new Date(year,month+1,0),
today = date.getDate(), today = date.getDate(),
@ -40,12 +42,12 @@
} }
function lighten_color(my_hex,percent){ function lighten_color(my_hex,percent){
if (my_hex[0] == '#'){ if (my_hex[0] == '#'){
my_hex = my_hex.slice(1,-1) my_hex = my_hex.slice(1)
} }
var comp = '' var comp = ''
var rgb = [] var rgb = []
var batch_size = Math.ceil(my_hex.length/3) var batch_size = Math.ceil(my_hex.length/3)
for (i=0;i<3;i++){ for (var i=0;i<3;i++){
rgb.push(my_hex.slice(batch_size*i,batch_size*(i+1))) rgb.push(my_hex.slice(batch_size*i,batch_size*(i+1)))
} }
$.each(rgb,function(){ $.each(rgb,function(){
@ -55,7 +57,7 @@
if (tmp>255) tmp = 255 if (tmp>255) tmp = 255
if (tmp < 0) tmp = 0 if (tmp < 0) tmp = 0
tmp = tmp.toString(16) tmp = tmp.toString(16)
for (i=0;i<2-tmp.length;i++){ for (var i=0;i<2-tmp.length;i++){
tmp = '0' + tmp tmp = '0' + tmp
} }
comp = comp + tmp comp = comp + tmp
@ -222,6 +224,7 @@
var first_line_first_date = first_line_first_day.getDate() var first_line_first_date = first_line_first_day.getDate()
var first_line_first_month = first_line_first_day.getMonth() var first_line_first_month = first_line_first_day.getMonth()
var first_line_first_year = first_line_first_day.getFullYear() var first_line_first_year = first_line_first_day.getFullYear()
first_target_day = new Date(first_line_first_year,first_line_first_month,first_line_first_date)
for(var i = 0;i < 7;i++){ for(var i = 0;i < 7;i++){
var td = $("<td><div></div></td>"); var td = $("<td><div></div></td>");
if(i >= firstDay.getDay()){ if(i >= firstDay.getDay()){
@ -258,6 +261,7 @@
next_month = 0; next_month = 0;
next_year = next_year + 1; next_year = next_year + 1;
} }
last_target_day = new Date(next_year,next_month,6-lastDay.getDay())
for(var i = 0;i < 7;i++){ for(var i = 0;i < 7;i++){
var td = $("<td><div></div></td>"); var td = $("<td><div></div></td>");
if(i <= lastDay.getDay()){ if(i <= lastDay.getDay()){
@ -303,10 +307,11 @@
} }
var fetchEvents = function(){ var fetchEvents = function(){
var usd = Math.round(firstDay/1000), var usd = Math.round(firstDay/1000),
ued = Math.round(lastDay/1000); usd_target = Math.round(first_target_day/1000),
ued_target = Math.round(last_target_day/1000);
$.ajax({ $.ajax({
url : "/xhr/calendars/agenda", url : "/xhr/calendars/agenda",
data : {"unix_start" : usd, "unix_end" : ued, "subpart_id" : subpartid, "locale" : $('html').attr('lang')}, data : {"month_start" : usd,"unix_start" : usd_target, "unix_end" : ued_target, "subpart_id" : subpartid, "locale" : $('html').attr('lang')},
dataType : "json", dataType : "json",
type : "get" type : "get"
}).done(function(data){ }).done(function(data){
@ -369,9 +374,9 @@
}) })
var clicked_color = dom.find('.w-calendar-event').css('background-color') var clicked_color = dom.find('.w-calendar-event').css('background-color')
if (clicked_color){ if (clicked_color){
clicked_color = lighten_color(rgb2hex(clicked_color),-20) clicked_color = lighten_color(rgb2hex(clicked_color),-35)
if (clicked_color!='#000000'){ if (clicked_color!='#000000'){
dom.find('table').append($('<style>.w-calendar-table .w-calendar-toggle{ background-color:'+clicked_color+';color: white;}</style>')) dom.find('table').append($('<style>.widget-calendar-2 table.w-calendar-table .w-calendar-toggle{ background-color:'+clicked_color+';color: white;}</style>'))
} }
} }
monthDom.find("i.loading").addClass("hide"); monthDom.find("i.loading").addClass("hide");
@ -402,14 +407,20 @@
lastDay = new Date(year,month+1,0); lastDay = new Date(year,month+1,0);
today = (initialDate.getMonth() == month && initialDate.getFullYear() == year ? initialDate.getDate() : 0); today = (initialDate.getMonth() == month && initialDate.getFullYear() == year ? initialDate.getDate() : 0);
last_inserted_date = 1; last_inserted_date = 1;
renderMonth(); var toggle_type,ele;
dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
if (toggle_data && toggle_flag){ if (toggle_data && toggle_flag){
toggle_event(dom.find('td[data-date-node="'+toggle_data+'"]'),'show') ele = dom.find('td[data-date-node="'+toggle_data+'"]')
toggle_type = (ele.hasClass('w-calendar-event') ? 'show' : 'hide')
}else{ }else{
toggle_data = undefined toggle_data = undefined
} }
fetchInterval = setTimeout(fetchEvents,1000); renderMonth();
dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
if (ele){
ele = dom.find('td[data-date-node="'+toggle_data+'"]')
toggle_event(ele,toggle_type)
}
fetchInterval = setTimeout(fetchEvents,300);
} }
nextMonthFunc = this.nextMonth; nextMonthFunc = this.nextMonth;
this.prevMonth = function(toggle_flag){ this.prevMonth = function(toggle_flag){
@ -424,14 +435,20 @@
lastDay = new Date(year,month+1,0); lastDay = new Date(year,month+1,0);
today = (initialDate.getMonth() == month && initialDate.getFullYear() == year ? initialDate.getDate() : 0); today = (initialDate.getMonth() == month && initialDate.getFullYear() == year ? initialDate.getDate() : 0);
last_inserted_date = 1; last_inserted_date = 1;
renderMonth(); var toggle_type,ele;
dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
if (toggle_data && toggle_flag){ if (toggle_data && toggle_flag){
toggle_event(dom.find('td[data-date-node="'+toggle_data+'"]'),'show') ele = dom.find('td[data-date-node="'+toggle_data+'"]')
toggle_type = (ele.hasClass('w-calendar-event') ? 'show' : 'hide')
}else{ }else{
toggle_data = undefined toggle_data = undefined
} }
fetchInterval = setTimeout(fetchEvents,1000); renderMonth();
dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
if (ele){
ele = dom.find('td[data-date-node="'+toggle_data+'"]')
toggle_event(ele,toggle_type)
}
fetchInterval = setTimeout(fetchEvents,300);
} }
prevMonthFunc = this.prevMonth; prevMonthFunc = this.prevMonth;
} }

17
app/assets/stylesheets/calendar_widget1.css
View File

@ -95,4 +95,21 @@ a.event-container{
} }
.widget-calendar-1 td{ .widget-calendar-1 td{
cursor: pointer; cursor: pointer;
}
.widget-calendar-1 .w-calendar-table td div {
width: 3em;
height: 3em;
display: inline-flex;
align-items: center;
justify-content: center;
}
.widget-calendar-1 .w-calendar-table td:hover {
background: #eaeaea;
color: black;
}
.widget-calendar-1 .w-calendar-table .w-calendar-event {
background: #444444;
}
.widget-calendar-1 table td.w-calendar-other-month {
color: #999797;
} }

2
app/controllers/calendars_controller.rb
View File

@ -66,7 +66,7 @@ class CalendarsController < ApplicationController
events = Event.agenda_events(agenda_start,agenda_end) events = Event.agenda_events(agenda_start,agenda_end)
end end
end end
render json: {"events" => events,"calendar_title"=>get_calendar_title(Time.at(params[:unix_start].to_i))}.to_json({"frontend" => true}) render json: {"events" => events,"calendar_title"=>get_calendar_title(Time.at(params[:month_start].to_i))}.to_json({"frontend" => true})
end end
end end
def get_calendar_title(now_date=nil) def get_calendar_title(now_date=nil)

2
app/models/event.rb
View File

@ -155,7 +155,7 @@ class Event
end end
when "Weekly" when "Weekly"
@start_date = re.start @start_date = re.start
@end_date = re.end @edn_date = re.end
@i = TimeDifference.between(re.start.to_date,end_date.to_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| (1..@i).each do |i|
@start_date += (7*re.frequency.to_i) @start_date += (7*re.frequency.to_i)