I know not many people use the calendar, but for those that do hopefully you'll find this helpful!
Here is the outcome:
![.png]( "PNG Image")
calendar.png (Size: 19.12 KB / Downloads: 90)
First open Header Templates > header_menu_calendar and replace the contents with the following:
Next open Ungrouped Templates > headerinclude and add this to the bottom:
Finally open your global.css and add the following to the bottom:
And now you should have a mini calendar in your header.![Big Grin]( "Big Grin")
Here is the outcome:
calendar.png (Size: 19.12 KB / Downloads: 90)
First open Header Templates > header_menu_calendar and replace the contents with the following:
Code:
<li class="calendarWidgetWrapper"><a href="{$mybb->settings['bburl']}/calendar.php" class="calendar">{$lang->toplinks_calendar} ↴</a><div class="calendarWidget"></div></li>Next open Ungrouped Templates > headerinclude and add this to the bottom:
Code:
<script type="text/javascript">
$(document).ready(function() {
$.get('calendar.php', function (response) {
var source = $(response);
$('.calendarWidget').html(source.find('table').wrap('<p/>').parent().html()).find('td.tcat strong').each(function() {
var firstLetter = $(this).html().replace(/(\S)(\S*)/g, '$1');
$(this).html(firstLetter);
});
});
$('.calendarWidgetWrapper > a').on('click', function(e) {
e.preventDefault();
$('.calendarWidget').slideToggle();
});
});
</script>Finally open your global.css and add the following to the bottom:
Code:
.calendarWidgetWrapper {
position: relative;
}
.calendarWidget {
position: absolute;
width: 300px;
right: 0;
top: 100%;
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
display: none;
margin-top: 15px;
}
#header ul.menu li .calendarWidget a {
background: transparent;
padding: 0;
}
.calendarWidget td {
height: auto !important;
vertical-align: middle !important;
text-align: center;
}
.calendarWidget td .float_right {
float: none;
}
.calendarWidget td.trow1 {
opacity: .5;
}And now you should have a mini calendar in your header.
