finish widget 2
This commit is contained in:
parent
1105f57bf9
commit
35ac66dc06
|
|
@ -78,18 +78,24 @@
|
|||
}
|
||||
$(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%'){
|
||||
$('.widget-calendar-1 div.calendar-events').each(function(){
|
||||
var this_w = $(this).parents('.widget-calendar-1').width()
|
||||
if (this_w>=728 && window_w>=768){
|
||||
if (!$(this).hasClass('width-50')){
|
||||
$(this).removeClass('width-100')
|
||||
$(this).addClass('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%'){
|
||||
if (!$(this).hasClass('width-100')){
|
||||
$(this).addClass('width-100')
|
||||
$(this).removeClass('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){
|
||||
|
|
@ -374,7 +380,7 @@
|
|||
})
|
||||
var clicked_color = dom.find('.w-calendar-event').css('background-color')
|
||||
if (clicked_color){
|
||||
clicked_color = lighten_color(rgb2hex(clicked_color),-35)
|
||||
clicked_color = lighten_color(rgb2hex(clicked_color),-45)
|
||||
if (clicked_color!='#000000'){
|
||||
dom.find('table').append($('<style>.widget-calendar-1 table.w-calendar-table .w-calendar-toggle{ background-color:'+clicked_color+';color: white;}</style>'))
|
||||
}
|
||||
|
|
@ -391,7 +397,7 @@
|
|||
div_tag.prepend(widge_title)
|
||||
dom.html(div_tag);
|
||||
monthDom.find("i.loading").removeClass("hide");
|
||||
fetchInterval = setTimeout(fetchEvents,300);
|
||||
fetchInterval = setTimeout(fetchEvents,0);
|
||||
dom.find('div').eq(0).after(eventHTML)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,9 +18,17 @@
|
|||
last_inserted_date = 1,
|
||||
monthDom = $("<div data-year='"+year+"' data-month='"+month+"'></div>"),
|
||||
eventHTML = dom.find('div.calendar-events')[0],
|
||||
event_template = dom.find('div.calendar-events .event').prop('outerHTML'),
|
||||
prevMonthFunc,
|
||||
nextMonthFunc,
|
||||
toggle_data;
|
||||
toggle_data,
|
||||
hover_step=10,
|
||||
hover_step_max=10,
|
||||
hover_max_height=19.2,
|
||||
toggling=false,
|
||||
switching=false,
|
||||
tp1,
|
||||
tp2;
|
||||
monthDom.html(template);
|
||||
var format_time = function(date){
|
||||
var hours = date.getHours(),
|
||||
|
|
@ -40,6 +48,21 @@
|
|||
return "#000000";
|
||||
}
|
||||
}
|
||||
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 ''
|
||||
}
|
||||
}
|
||||
function lighten_color(my_hex,percent){
|
||||
if (my_hex[0] == '#'){
|
||||
my_hex = my_hex.slice(1)
|
||||
|
|
@ -78,92 +101,214 @@
|
|||
}
|
||||
$(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%'){
|
||||
$('.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')
|
||||
$(this).css('width','50%')
|
||||
$(this).parents('div[data-module="calendar"]').find('div').eq(0).css('width','50%')
|
||||
}
|
||||
}else{
|
||||
if ($(this).css('width')=='50%'){
|
||||
if (!$(this).hasClass('width-100')){
|
||||
$(this).addClass('width-100')
|
||||
$(this).removeClass('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)
|
||||
})
|
||||
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>')
|
||||
}else{
|
||||
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)
|
||||
}
|
||||
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.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')
|
||||
}
|
||||
if (events[date].length>1){
|
||||
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();
|
||||
})
|
||||
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)
|
||||
$(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%')
|
||||
event_div.addClass('width-50')
|
||||
event_div.removeClass('width-100')
|
||||
$(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','50%')
|
||||
}else{
|
||||
event_div.css('width','100%')
|
||||
event_div.addClass('width-100')
|
||||
event_div.removeClass('width-50')
|
||||
$(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')
|
||||
|
|
@ -172,7 +317,7 @@
|
|||
$(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()
|
||||
event_div.find('.event-container-one').remove()
|
||||
}
|
||||
var renderMonth = function(){
|
||||
var num_of_rows = getNumberOfRows(),
|
||||
|
|
@ -374,7 +519,7 @@
|
|||
})
|
||||
var clicked_color = dom.find('.w-calendar-event').css('background-color')
|
||||
if (clicked_color){
|
||||
clicked_color = lighten_color(rgb2hex(clicked_color),-35)
|
||||
clicked_color = lighten_color(rgb2hex(clicked_color),-45)
|
||||
if (clicked_color!='#000000'){
|
||||
dom.find('table').append($('<style>.widget-calendar-2 table.w-calendar-table .w-calendar-toggle{ background-color:'+clicked_color+';color: white;}</style>'))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,6 @@
|
|||
a.event-container{
|
||||
a.event-container-one{
|
||||
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;
|
||||
|
|
@ -33,38 +21,6 @@ a.event-container{
|
|||
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;
|
||||
|
|
@ -143,3 +99,124 @@ a.event-container{
|
|||
.widget-calendar-2 table td.w-calendar-other-month {
|
||||
color: #999797;
|
||||
}
|
||||
.widget-calendar-2 .event-header{
|
||||
display: flex;
|
||||
background: #dadada;
|
||||
cursor: default;
|
||||
}
|
||||
.widget-calendar-2 .event-header .date{
|
||||
width: 30%;
|
||||
}
|
||||
.widget-calendar-2 .event.active .event-header .day{
|
||||
color: #bf1f1f;
|
||||
}
|
||||
.widget-calendar-2 .event.active .event-header .date{
|
||||
color: #202427;
|
||||
}
|
||||
.widget-calendar-2 .event .event-header .day{
|
||||
font-size: 1.4em;
|
||||
}
|
||||
.widget-calendar-2 .event .event-header .month{
|
||||
font-size: 0.7em;
|
||||
}
|
||||
.widget-calendar-2 .event .event-header .date{
|
||||
color: #a08a70;
|
||||
}
|
||||
.widget-calendar-2 .event-title{
|
||||
width: 70%;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.widget-calendar-2 .event-title .duration{
|
||||
font-size: 0.7em;
|
||||
text-align: left;
|
||||
color: #a0a1a1;
|
||||
}
|
||||
.widget-calendar-2 .duration_temp,.widget-calendar-2 .title_temp{
|
||||
display: none;
|
||||
}
|
||||
.widget-calendar-2 .event-inner-title{
|
||||
line-height: 2em;
|
||||
text-align: left;
|
||||
}
|
||||
.widget-calendar-2 .event-containers{
|
||||
height: 0;
|
||||
min-height: unset;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 10%;
|
||||
}
|
||||
.widget-calendar-2 .event-container-one {
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
width: calc(100% - 0.7em);;
|
||||
height: calc(100% - 0.7em);
|
||||
flex-wrap: wrap;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 1em;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: rgba(50, 50, 50, 0.45);
|
||||
}
|
||||
.widget-calendar-2 .event-container-one:hover {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0.1em 0.7em 0em;
|
||||
}
|
||||
.widget-calendar-2 .event-container-one .event-content{
|
||||
color: #000000;
|
||||
}
|
||||
button.switch_button {
|
||||
margin: 10%;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
border-radius: 1.25em;
|
||||
border: 0;
|
||||
background: #96231a;
|
||||
color: white;
|
||||
outline: 0;
|
||||
}
|
||||
.widget-calendar-2 .switch_button:hover {
|
||||
background: #c07b76;
|
||||
}
|
||||
.widget-calendar-2 .switch_button_wraper{
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
margin-right: 2%;
|
||||
width: 3em;
|
||||
margin-bottom: 2%;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.widget-calendar-2 .event-wraper{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.widget-calendar-2 .event-container-one:not(.active) {
|
||||
right: -100%;
|
||||
}
|
||||
.widget-calendar-2 .event.active .event-containers{
|
||||
min-height: 19.2em;
|
||||
height: auto;
|
||||
}
|
||||
.widget-calendar-2 .calendar-events.width-100 .switch_button_wraper{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.widget-calendar-2 .calendar-events.width-100 .switch_button{
|
||||
margin: 2%;
|
||||
}
|
||||
.widget-calendar-2 .calendar-events.width-100 .event-containers{
|
||||
z-index: 3;
|
||||
}
|
||||
|
|
@ -34,10 +34,22 @@
|
|||
</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 class="event">
|
||||
<div class="event-header">
|
||||
<div class="date">
|
||||
<div class="day"></div>
|
||||
<div class="month"></div>
|
||||
</div>
|
||||
<div class="event-title">
|
||||
<div class="event-inner-title"></div>
|
||||
<div class="duration"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-wraper">
|
||||
<div class="event-containers">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue