Jump to content


Photo

Responsive Calendar


1 reply to this topic

#1 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,404 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 19 October 2019 - 10:18 PM

Anyone interested , i have made the MFL Monthly Calendar , mobile friendly

 

Demo - https://www63.myfant...s?L=43570&O=123

Demo 2 - https://www60.myfant...s?L=37577&O=123

 

 

 

Be sure to have a copy of jQuery library and Font Awesome library in header message

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//use.fontawesome.com/6ccd97559b.js"></script>

 

 

Place following script in footer message 

// Monthly Calendar
jQuery('head').append('<style>.cal-event-desc li:before{content:\"\\f005\";font-family:FontAwesome;display:inline-block;width:16px}.cal-wrap{display:none}#calendar{width:100%;display:grid;grid-template-columns:repeat(7,1fr)}#calendar tr,#calendar tbody{grid-column:1 / -1;display:grid;grid-template-columns:repeat(7,1fr);width:100%}#calendar caption{grid-column:1 / -1;margin-bottom:60px}#calendar td,#calendar th{box-sizing:border-box}#calendar .weekdays th{text-align:center;text-transform:uppercase}#calendar td{display:flex;flex-direction:column}#calendar .day{position:relative}#calendar .month_header{position:relative;font-size:20pt}#calendar .month_header th{position:absolute;left:0;right:0;font-size:24pt;top:-52px;line-height:40px}#calendar .month_header th a{position:absolute;text-decoration:none;font-size:0;color:transparent}#calendar .month_header th a[title="Previous Month"]{left:20px}#calendar .month_header th a[title="Next Month"]{right:20px}#calendar .month_header th a[title="Next Month"]:before,#calendar .month_header th a[title="Previous Month"]:before{font-family:FontAwesome;position:absolute;top:0;font-size:30px;cursor:pointer}#calendar .month_header th a[title="Next Month"]:before{content:\"\\f054\";right:-10px}#calendar .month_header th a[title="Previous Month"]:before{content:\"\\f053\";left:-10px}#calendar .date{text-align:center;margin-bottom:5px;width:30px;height:30px;line-height:30px;border-radius:50%;flex:0 0 auto;align-self:flex-end;font-weight:700}#calendar .date a{position:absolute;left:2px;top:2px}.cal-event{flex:0 0 auto;font-size:13px;border-radius:4px;padding:4px 0px;text-decoration:none;margin:2px 0}.cal-event-desc{padding:5px}#calendar td{border-style:solid;border-left-width:1px;border-bottom-width:1px;border-top:0;border-right-width:0}@media(max-width: 768px){.cal-wrap{display:block}.scoll-div{height:350px}#calendar .weekdays,#calendar .other-month{display:none}#calendar,#calendar tr,#calendar tbody{grid-template-columns:1fr}#calendar tr{grid-column:1 / 2}#calendar .date{align-self:flex-start}#calendar .date a{right:2px;left:auto}#calendar td.first-td{border-style:solid;border-top-width:1px}#calendar td{border-right-width:1px}}</style>');
jQuery('#monthly_calendar').attr('id','calendar');
jQuery('#calendar').parent('div').addClass('scoll-div');
jQuery('#calendar .day_of_week_header').attr('class', 'weekdays');
jQuery('#calendar .weekdays th').attr('scope','col');
jQuery('#calendar tr.oddtablerow,#calendar tr.eventablerow').removeClass('eventablerow').addClass('dayrows oddtablerow');
if ( $('#calendar .dayrows td').hasClass('today') ) { 
    $('#calendar .dayrows td').addClass('other-month'); 
}else{
    $('#calendar .dayrows td').attr('class', 'other-month');
}
jQuery('#calendar .dayrows td.other-month:has("div.calendarday")').removeClass('other-month').addClass('day');
jQuery('#calendar td.day:first').addClass('first-td');
jQuery('#calendar td.day').removeAttr('valign');
jQuery('#calendar div.calendarday').addClass('date');
jQuery('#calendar .day ul li').wrap('<div class="cal-event"><div class="cal-event-desc"></div></div>');
jQuery('#calendar .day .cal-event').unwrap();
jQuery('#calendar .day .cal-event-desc li').css('list-style', 'none');

jQuery('#calendar .date').html(function (i, html) {
    return html.replace(/&nbsp;/g, '');
});
jQuery('#calendar .month_header th:last-of-type').remove();
jQuery('#calendar .month_header th').html(function(i, currHtml) {
  return currHtml
    .replace('Jan', 'JANUARY')
    .replace('Feb', 'FEBRUARY')
    .replace('Mar', 'MARCH')
    .replace('Apr', 'APRIL')
    .replace('May', 'MAY')
    .replace('Jun', 'JUNE')
    .replace('Jul', 'JULY')
    .replace('Aug', 'AUGUST')
    .replace('Sep', 'SEPTEMBER')
    .replace('Oct', 'OCTOBER')
    .replace('Nov', 'NOVEMBER')
    .replace('Dec', 'DECEMBER');
});
jQuery('#calendar .day:not(:has(div.cal-event))').each(function(index) {
        $(this).append('<div class="cal-event"><div class="cal-event-desc" style="font-style:italic"><li style="list-style:none">No Events Today</li></div></div>');
});
jQuery('.calendarday.date a').html('<i class="fa fa-plus-square" aria-hidden="true"></i>');
jQuery('#body_options_123 h3').remove();
// Monthly Calendar Todays Event Table Calendar
jQuery.get(baseURLDynamic + "/" + year + "/options?L=" + league_id + "&O=123", function (data) {
		jQuery('#monthly_events ul li').wrap('<div class="cal-event"><div class="cal-event-desc"></div></div>');
		jQuery('<div class="mobile-wrap cal-wrap"><table class="report" id="monthly_events" align="center" cellspacing="1"><caption><span>Todays Calendar Events</span></caption><tbody><tr class="oddtablerow"><td class="cal_append"></td></tr></tbody></table></div>').insertBefore(jQuery('#calendar').closest('div.mobile-wrap') );
		jQuery(data).find('#monthly_calendar td.today ul').appendTo('#monthly_events td.cal_append');
		jQuery('#monthly_events ul li').wrap('<div class="cal-event"><div class="cal-event-desc"></div></div>');
		jQuery('#monthly_events .cal-event').unwrap();
		jQuery('#monthly_events .cal-event-desc li').css('list-style', 'none');
		jQuery("#monthly_events .cal_append:empty").append('<div class="cal-event"><div class="cal-event-desc" ><li style="list-style:none">No Events Today</li></div></div>');
		jQuery('#calendar,#monthly_calendar').css('visibility', 'visible');
		jQuery('.cal-event li a[title|="Delete This Calendar Event"]').parent('li').addClass('remove_char');
		jQuery('.remove_char').each(function (index, value){
			var char_rep = $(this),
			result= char_rep.html().replace(/\(|\)/g, '');
			char_rep.html(result);
		});
	jQuery('.cal-event-desc .remove_char a').html('<i style="color:#da3636" class="fa fa-times-circle" aria-hidden="true"></i>');
});

 

 

Here is css needed to style it - ADD THIS TO YOUR UPLOADED CSS SHEET

/*******************************************/
/*        CUSTOM MONTHLY CALENDAR          */
/*******************************************/
#calendar,#monthly_calendar{visibility:hidden}
#calendar .today,#calendar .today:last-of-type{border:3px dotted #da3636} /* Border to todays date - color it accent color of site */
#calendar th{border:1px solid #111;border-right:0}
#calendar th:last-of-type{border-right:1px solid #111}
#calendar td{border-color:#111}
#calendar td:last-of-type{border-right:1px solid #111}
#calendar .date{background:#000}
/* Previous and Next month arrows */
#calendar .month_header th a[title="Next Month"]:before,#calendar .month_header th a[title="Previous Month"]:before{text-shadow: 0 0 5px rgba(0,0,0,.5);color: #333}
#calendar .month_header th a[title="Previous Month"]:hover:before,#calendar .month_header th a[title="Next Month"]:hover:before{color:#ccc}
.cal-event{background:rgba(0,0,0,.2);border:1px solid #111}
/* Mobile */
@media(max-width: 768px) {
#calendar td.first-td{border-top-color:#111}
}

FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#2 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,404 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 23 October 2019 - 04:45 PM

i have done 15-20 updates on the script / css since originally posting , so anyone you is using , just recopy the script and css , for all latest adds/fixes


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/




Reply to this topic



  


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users