2020-08-15 13:42:57 +00:00
|
|
|
var CalendarModuleMonth2 = function(date,dom,subpart,url,index_flag){
|
2020-08-12 13:33:46 +00:00
|
|
|
_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(),
|
2021-08-26 10:57:42 +00:00
|
|
|
first_target_day = new Date(Date.UTC(year,month,1)),
|
|
|
|
|
last_target_day = new Date(Date.UTC(year,month+1,0)),
|
|
|
|
|
firstDay = new Date(Date.UTC(year,month,1)),
|
|
|
|
|
lastDay = new Date(Date.UTC(year,month+1,0)),
|
2020-08-12 13:33:46 +00:00
|
|
|
today = date.getDate(),
|
|
|
|
|
last_inserted_date = 1,
|
|
|
|
|
monthDom = $("<div data-year='"+year+"' data-month='"+month+"'></div>"),
|
|
|
|
|
eventHTML = dom.find('div.calendar-events')[0],
|
2020-08-14 14:20:03 +00:00
|
|
|
event_template = dom.find('div.calendar-events .event').prop('outerHTML'),
|
2020-08-12 13:33:46 +00:00
|
|
|
prevMonthFunc,
|
|
|
|
|
nextMonthFunc,
|
2020-08-14 14:20:03 +00:00
|
|
|
toggle_data,
|
|
|
|
|
hover_step=10,
|
|
|
|
|
hover_step_max=10,
|
|
|
|
|
hover_max_height=19.2,
|
|
|
|
|
toggling=false,
|
|
|
|
|
switching=false,
|
|
|
|
|
tp1,
|
|
|
|
|
tp2;
|
2020-08-12 13:33:46 +00:00
|
|
|
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";
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-08-14 14:20:03 +00:00
|
|
|
function hexToRGB(hex, alpha) {
|
|
|
|
|
if (hex){
|
|
|
|
|
var r = parseInt(hex.slice(1, 3), 16),
|
|
|
|
|
g = parseInt(hex.slice(3, 5), 16),
|
|
|
|
|
b = parseInt(hex.slice(5, 7), 16);
|
|
|
|
|
|
|
|
|
|
if (alpha) {
|
|
|
|
|
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
|
|
|
|
|
} else {
|
|
|
|
|
return "rgb(" + r + ", " + g + ", " + b + ")";
|
|
|
|
|
}
|
|
|
|
|
}else{
|
|
|
|
|
return ''
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-08-12 13:33:46 +00:00
|
|
|
function lighten_color(my_hex,percent){
|
|
|
|
|
if (my_hex[0] == '#'){
|
2020-08-13 08:51:04 +00:00
|
|
|
my_hex = my_hex.slice(1)
|
2020-08-12 13:33:46 +00:00
|
|
|
}
|
|
|
|
|
var comp = ''
|
|
|
|
|
var rgb = []
|
|
|
|
|
var batch_size = Math.ceil(my_hex.length/3)
|
2020-08-13 08:51:04 +00:00
|
|
|
for (var i=0;i<3;i++){
|
2020-08-12 13:33:46 +00:00
|
|
|
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)
|
2020-08-13 08:51:04 +00:00
|
|
|
for (var i=0;i<2-tmp.length;i++){
|
2020-08-12 13:33:46 +00:00
|
|
|
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()
|
2020-08-14 14:20:03 +00:00
|
|
|
$('.widget-calendar-2 div.calendar-events').each(function(){
|
|
|
|
|
var this_w = $(this).parents('.widget-calendar-2').width()
|
|
|
|
|
if (this_w>=728 && window_w>=768){
|
|
|
|
|
if (!$(this).hasClass('width-50')){
|
|
|
|
|
$(this).removeClass('width-100')
|
|
|
|
|
$(this).addClass('width-50')
|
2020-08-12 13:33:46 +00:00
|
|
|
$(this).css('width','50%')
|
|
|
|
|
$(this).parents('div[data-module="calendar"]').find('div').eq(0).css('width','50%')
|
|
|
|
|
}
|
|
|
|
|
}else{
|
2020-08-14 14:20:03 +00:00
|
|
|
if (!$(this).hasClass('width-100')){
|
|
|
|
|
$(this).addClass('width-100')
|
|
|
|
|
$(this).removeClass('width-50')
|
2020-08-12 13:33:46 +00:00
|
|
|
$(this).css('width','100%')
|
|
|
|
|
$(this).parents('div[data-module="calendar"]').find('div').eq(0).css('width','100%')
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-08-14 14:20:03 +00:00
|
|
|
|
2020-08-12 13:33:46 +00:00
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
var show_event = function(date,ele){
|
|
|
|
|
var event_div = $(ele).parents('div[data-module="calendar"]').find('div.calendar-events')
|
|
|
|
|
$(ele).parents('.w-calendar').find('td.shown').removeClass('shown')
|
|
|
|
|
$(ele).addClass('shown')
|
2020-08-14 14:20:03 +00:00
|
|
|
function set_event(date,active_flag){
|
|
|
|
|
var date_split = date.split('-')
|
|
|
|
|
var event_temp = $(event_template)
|
|
|
|
|
var read_more_text = $('html').attr('lang')=='zh_tw' ? '查看詳情' : 'Read more'
|
|
|
|
|
event_temp.find('.event-header .date .month').text(month_names[parseInt(date_split[1])])
|
|
|
|
|
event_temp.find('.event-header .date .day').text(parseInt(date_split[0]))
|
|
|
|
|
|
|
|
|
|
$.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-one has-dialog"><div class="title_temp"></div><div class="duration_temp"></div><div class="event-content"></div>'+modal_tp+'</div>')
|
2020-08-12 13:33:46 +00:00
|
|
|
}else{
|
2020-08-14 14:20:03 +00:00
|
|
|
tp = $('<a class="event-container-one"><div class="title_temp"></div><div class="duration_temp"></div><div class="event-content"></div></a>').attr('href',v.url_linked)
|
2020-08-12 13:33:46 +00:00
|
|
|
}
|
2020-08-14 14:20:03 +00:00
|
|
|
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>'
|
2020-08-12 13:33:46 +00:00
|
|
|
}
|
2020-08-14 14:20:03 +00:00
|
|
|
tp.css('color',hexToRGB(v.color,0.45))
|
|
|
|
|
tp.find('.event-content').html(v.note || read_more_text)
|
|
|
|
|
tp.find('.title_temp').html(v.title)
|
|
|
|
|
tp.find('.duration_temp').html(duration)
|
|
|
|
|
if (k==0){
|
|
|
|
|
tp.addClass('active')
|
|
|
|
|
event_temp.find('.event-header .event-inner-title').html(v.title)
|
|
|
|
|
event_temp.find('.event-header .duration').html(duration)
|
|
|
|
|
}
|
|
|
|
|
event_temp.find('.event-containers').append(tp)
|
|
|
|
|
})
|
|
|
|
|
if (active_flag){
|
|
|
|
|
event_temp.addClass('active')
|
2020-08-12 13:33:46 +00:00
|
|
|
}
|
2020-08-14 14:35:16 +00:00
|
|
|
if (events[date] && events[date].length>1){
|
2020-08-14 14:20:03 +00:00
|
|
|
var switch_button_wraper = $("<div class=\"switch_button_wraper\"> <button class=\"switch_button\" for=\"prev\" type=\"button\"><</button>"
|
|
|
|
|
+"<button class=\"switch_button\" for=\"next\" type=\"button\">></button>"
|
|
|
|
|
+"</div>")
|
|
|
|
|
switch_button_wraper.find('button').click(function(){
|
|
|
|
|
if (!switching){
|
|
|
|
|
var showing_event = $(this).parents('.event-wraper').find('.event-container-one.active')
|
|
|
|
|
var next_event
|
|
|
|
|
showing_event.css('position','')
|
|
|
|
|
showing_event.css('right','0')
|
|
|
|
|
showing_event.removeClass('active')
|
|
|
|
|
if ($(this).attr('for')=='prev'){
|
|
|
|
|
next_event = showing_event.prev('.event-container-one')
|
|
|
|
|
if (next_event.length==0){
|
|
|
|
|
next_event = $(this).parents('.event-wraper').find('.event-container-one').eq(-1)
|
|
|
|
|
}
|
|
|
|
|
next_event.addClass('active')
|
|
|
|
|
next_event.css('right','100%')
|
|
|
|
|
switching = true
|
|
|
|
|
next_event.animate({'right': '0%'},function(){
|
|
|
|
|
$(this).css('right','')
|
|
|
|
|
if ($(this).find('.event-content').height()>$(this).height()){
|
|
|
|
|
$(this).css('position','relative')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
showing_event.animate({'right': '-100%'},function(){
|
|
|
|
|
switching = false
|
|
|
|
|
})
|
|
|
|
|
}else{
|
|
|
|
|
next_event = showing_event.next('.event-container-one')
|
|
|
|
|
if (next_event.length==0){
|
|
|
|
|
next_event = $(this).parents('.event-wraper').find('.event-container-one').eq(0)
|
|
|
|
|
}
|
|
|
|
|
next_event.addClass('active')
|
|
|
|
|
next_event.css('right','-100%')
|
|
|
|
|
switching = true
|
|
|
|
|
next_event.animate({'right': '0%'},function(){
|
|
|
|
|
$(this).css('right','')
|
|
|
|
|
if ($(this).find('.event-content').height()>$(this).height()){
|
|
|
|
|
$(this).css('position','relative')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
showing_event.animate({'right': '100%'},function(){
|
|
|
|
|
switching = false
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
$(this).parents('.event').eq(0).find('.event-header .event-inner-title').html(next_event.find('.title_temp').html())
|
|
|
|
|
$(this).parents('.event').eq(0).find('.event-header .duration').html(next_event.find('.duration_temp').html())
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
event_temp.find('.event-wraper').eq(0).append(switch_button_wraper)
|
|
|
|
|
}
|
|
|
|
|
event_div.append(event_temp)
|
|
|
|
|
}
|
|
|
|
|
event_div.html('')
|
|
|
|
|
set_event(date,true)
|
|
|
|
|
var all_event_in_table = $(ele).parents('table').eq(0).find('td.w-calendar-event')
|
|
|
|
|
var ele_index = all_event_in_table.index(ele)
|
|
|
|
|
var next_ele = all_event_in_table.eq(ele_index+1)
|
|
|
|
|
if (next_ele.length){
|
|
|
|
|
set_event(next_ele.data('date-node'),false)
|
|
|
|
|
}
|
|
|
|
|
event_div.find('.has-dialog').click(function(){
|
|
|
|
|
var tmp=$(this).find('.dialog_event').clone().dialog({dialogClass: 'calendar-dialog'});
|
|
|
|
|
$('.ui-dialog button').blur();
|
2020-08-12 13:33:46 +00:00
|
|
|
})
|
2020-08-14 14:20:03 +00:00
|
|
|
function event_hover(){
|
|
|
|
|
if (!$(this).hasClass('active')){
|
|
|
|
|
tp1 = $(this).parents('.calendar-events').eq(0).find('.event.active .event-containers')
|
|
|
|
|
tp2 = $(this).find('.event-containers')
|
|
|
|
|
if (!toggling){
|
|
|
|
|
tp2.css('height','0')
|
|
|
|
|
tp2.css('min-height','0')
|
|
|
|
|
hover_step = hover_step_max
|
|
|
|
|
}else{
|
|
|
|
|
hover_step = hover_step_max - hover_step
|
|
|
|
|
}
|
|
|
|
|
$(this).addClass('active')
|
|
|
|
|
function toggle_height(){
|
|
|
|
|
tp1.css('height',(hover_step*hover_max_height/hover_step_max)+'em')
|
|
|
|
|
tp2.css('height',(hover_max_height-hover_step*hover_max_height/20)+'em')
|
|
|
|
|
hover_step = hover_step-1;
|
|
|
|
|
if (hover_step>=0){
|
|
|
|
|
setTimeout(toggle_height,50)
|
|
|
|
|
}else{
|
|
|
|
|
tp1.css('min-height','')
|
|
|
|
|
tp2.css('min-height','')
|
|
|
|
|
tp1.css('height','')
|
|
|
|
|
tp2.css('height','')
|
|
|
|
|
toggling = false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (!toggling){
|
|
|
|
|
setTimeout(toggle_height,50)
|
|
|
|
|
}
|
|
|
|
|
tp1.css('height',tp1.height())
|
|
|
|
|
tp1.css('min-height','0')
|
|
|
|
|
tp1.parents('.event').removeClass('active')
|
|
|
|
|
toggling = true
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
event_div.find('.event').hover(event_hover)
|
|
|
|
|
event_div.find('.event').click(event_hover)
|
2020-08-12 13:33:46 +00:00
|
|
|
$(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%')
|
2020-08-14 14:20:03 +00:00
|
|
|
event_div.addClass('width-50')
|
|
|
|
|
event_div.removeClass('width-100')
|
2020-08-12 13:33:46 +00:00
|
|
|
$(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','50%')
|
|
|
|
|
}else{
|
|
|
|
|
event_div.css('width','100%')
|
2020-08-14 14:20:03 +00:00
|
|
|
event_div.addClass('width-100')
|
|
|
|
|
event_div.removeClass('width-50')
|
2020-08-12 13:33:46 +00:00
|
|
|
$(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','100%')
|
|
|
|
|
}
|
|
|
|
|
event_div.show()
|
|
|
|
|
}
|
|
|
|
|
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')
|
2020-08-14 14:20:03 +00:00
|
|
|
event_div.find('.event-container-one').remove()
|
2020-08-12 13:33:46 +00:00
|
|
|
}
|
|
|
|
|
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()
|
2020-08-13 08:51:04 +00:00
|
|
|
first_target_day = new Date(first_line_first_year,first_line_first_month,first_line_first_date)
|
2020-08-12 13:33:46 +00:00
|
|
|
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");
|
|
|
|
|
}
|
2021-08-28 11:19:44 +00:00
|
|
|
td.find('div').html(last_inserted_date<10 ? " "+last_inserted_date+" " : last_inserted_date);
|
2020-08-12 13:33:46 +00:00
|
|
|
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");
|
|
|
|
|
}
|
2021-08-28 11:19:44 +00:00
|
|
|
td.find('div').html(last_inserted_date<10 ? " "+last_inserted_date+" " : last_inserted_date);
|
2020-08-12 13:33:46 +00:00
|
|
|
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;
|
|
|
|
|
}
|
2020-08-13 08:51:04 +00:00
|
|
|
last_target_day = new Date(next_year,next_month,6-lastDay.getDay())
|
2020-08-12 13:33:46 +00:00
|
|
|
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");
|
|
|
|
|
}
|
2021-08-28 11:19:44 +00:00
|
|
|
td.find('div').html(last_inserted_date<10 ? " "+last_inserted_date+" " : last_inserted_date);
|
2020-08-12 13:33:46 +00:00
|
|
|
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')
|
2020-08-14 14:43:11 +00:00
|
|
|
var toggle_month
|
2020-08-12 13:33:46 +00:00
|
|
|
if ($(ele).length==1){
|
|
|
|
|
$(ele).addClass('w-calendar-toggle')
|
|
|
|
|
toggle_data = $(ele).data('date-node')
|
2020-08-14 14:43:11 +00:00
|
|
|
toggle_month = $(ele).data('date-node').split('-')[1]
|
2020-08-12 13:33:46 +00:00
|
|
|
}
|
|
|
|
|
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),
|
2020-08-13 08:51:04 +00:00
|
|
|
usd_target = Math.round(first_target_day/1000),
|
|
|
|
|
ued_target = Math.round(last_target_day/1000);
|
2020-08-12 13:33:46 +00:00
|
|
|
$.ajax({
|
2020-08-15 13:42:57 +00:00
|
|
|
url : (index_flag ? "/xhr/calendars/index_agenda" : "/xhr/calendars/agenda"),
|
2020-08-13 08:51:04 +00:00
|
|
|
data : {"month_start" : usd,"unix_start" : usd_target, "unix_end" : ued_target, "subpart_id" : subpartid, "locale" : $('html').attr('lang')},
|
2020-08-12 13:33:46 +00:00
|
|
|
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++){
|
2021-08-26 10:57:42 +00:00
|
|
|
var dt = inserting_date + "-" + sd.getMonth() + "-" + sd.getFullYear(),
|
2020-08-12 13:33:46 +00:00
|
|
|
td = dom.find("td[data-date-node=" + dt + "]");
|
|
|
|
|
if (events[dt]==undefined){
|
|
|
|
|
events[dt]=[]
|
|
|
|
|
}
|
|
|
|
|
events[dt].push(eve)
|
|
|
|
|
td.addClass("w-calendar-event");
|
2020-08-14 14:35:16 +00:00
|
|
|
if(events[dt] && events[dt].length==1){
|
2020-08-12 13:33:46 +00:00
|
|
|
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)
|
2020-08-14 14:35:16 +00:00
|
|
|
if(events[dt] && events[dt].length==1){
|
2020-08-12 13:33:46 +00:00
|
|
|
td.click(function(){
|
|
|
|
|
toggle_event(this,'show')
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
td.addClass("w-calendar-event");
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
if (!toggle_data){
|
2021-08-26 10:57:42 +00:00
|
|
|
if (dom.find('td.w-calendar-today').length != 0){
|
2020-08-14 14:46:46 +00:00
|
|
|
toggle_event(dom.find('td.w-calendar-today'),'show')
|
2020-08-12 13:33:46 +00:00
|
|
|
}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){
|
2020-08-16 06:51:41 +00:00
|
|
|
var hex_color = rgb2hex(clicked_color)
|
|
|
|
|
if (hex_color != '#000000'){
|
|
|
|
|
clicked_color = lighten_color(hex_color,-45)
|
2020-08-13 08:51:04 +00:00
|
|
|
dom.find('table').append($('<style>.widget-calendar-2 table.w-calendar-table .w-calendar-toggle{ background-color:'+clicked_color+';color: white;}</style>'))
|
2020-08-12 13:33:46 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
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;
|
|
|
|
|
}
|
2021-08-26 10:57:42 +00:00
|
|
|
firstDay = new Date(Date.UTC(year,month,1));
|
|
|
|
|
lastDay =new Date(Date.UTC(year,month+1,0));
|
2020-08-12 13:33:46 +00:00
|
|
|
today = (initialDate.getMonth() == month && initialDate.getFullYear() == year ? initialDate.getDate() : 0);
|
|
|
|
|
last_inserted_date = 1;
|
2020-08-13 08:51:04 +00:00
|
|
|
var toggle_type,ele;
|
2020-08-12 13:33:46 +00:00
|
|
|
if (toggle_data && toggle_flag){
|
2020-08-13 08:51:04 +00:00
|
|
|
ele = dom.find('td[data-date-node="'+toggle_data+'"]')
|
|
|
|
|
toggle_type = (ele.hasClass('w-calendar-event') ? 'show' : 'hide')
|
2020-08-12 13:33:46 +00:00
|
|
|
}else{
|
|
|
|
|
toggle_data = undefined
|
|
|
|
|
}
|
2020-08-13 08:51:04 +00:00
|
|
|
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);
|
2020-08-12 13:33:46 +00:00
|
|
|
}
|
|
|
|
|
nextMonthFunc = this.nextMonth;
|
|
|
|
|
this.prevMonth = function(toggle_flag){
|
|
|
|
|
clearTimeout(fetchInterval);
|
|
|
|
|
monthDom.find("i.loading").removeClass("hide");
|
|
|
|
|
month--;
|
|
|
|
|
if(month == -1){
|
|
|
|
|
year--;
|
|
|
|
|
month = 11;
|
|
|
|
|
}
|
2021-08-26 10:57:42 +00:00
|
|
|
firstDay = new Date(Date.UTC(year,month,1));
|
|
|
|
|
lastDay = new Date(Date.UTC(year,month+1,0));
|
2020-08-12 13:33:46 +00:00
|
|
|
today = (initialDate.getMonth() == month && initialDate.getFullYear() == year ? initialDate.getDate() : 0);
|
|
|
|
|
last_inserted_date = 1;
|
2020-08-13 08:51:04 +00:00
|
|
|
var toggle_type,ele;
|
2020-08-12 13:33:46 +00:00
|
|
|
if (toggle_data && toggle_flag){
|
2020-08-13 08:51:04 +00:00
|
|
|
ele = dom.find('td[data-date-node="'+toggle_data+'"]')
|
|
|
|
|
toggle_type = (ele.hasClass('w-calendar-event') ? 'show' : 'hide')
|
2020-08-12 13:33:46 +00:00
|
|
|
}else{
|
|
|
|
|
toggle_data = undefined
|
|
|
|
|
}
|
2020-08-13 08:51:04 +00:00
|
|
|
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);
|
2020-08-12 13:33:46 +00:00
|
|
|
}
|
|
|
|
|
prevMonthFunc = this.prevMonth;
|
|
|
|
|
}
|
