I just redid some of the plugin to just hack it a little. Added my own template to utilize the calendar. I didn’t want to create a whole new widget but none the less it works.
In custom template_page.php:
<div class="layout-cell sidebar1">
<div class="block-body">
<div class="blockheader">
<h3 class="t" style="font-size:22px">Custom Event Schedule</h3>
<h3 class="t custom-date"><?php echo date("M") . " " .date("Y"); ?></h3>
</div>
<br />
<br />
<div class="blockcontent">
<div class="blockcontent-body">
<?php echo do_shortcode("[calendar]"); ?>
</div>
</div>
</div>
</div>
in custom_plugin.php:
if(!is_page("calendar")){
add_action("wp_footer", "add_custom_tcn_javascript");
function add_custom_tcn_javascript(){
?>
<script type="text/javascript">
(function($) {
$("#aec-filter").hide();
$("#aec-calendar").next().hide();
$("#aec-menu").hide();
$("#aec-calendar > .fc-header").hide();
var monthName=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
if($(".custom-date").length > 0){
$(".fc-button-prev").live("click", function(){
var oldDate = $(".custom-date").html();
oldDate = oldDate.split(/ /);
var x = 0;
for(x in monthName)
{
if(oldDate[0] == monthName[x])
{
var newMonth = parseInt(x) - 1;
var newYear = parseInt(oldDate[1]);
if(oldDate[0] == "Jan")
{
var newMonth = parseInt(x) + 11;
var newYear = parseInt(oldDate[1]) - 1;
}
}
}
$(".custom-date").html(monthName[newMonth] + " " + newYear);
});
$(".fc-button-next").live("click", function(){
var oldDate = $(".custom-date").html();
oldDate = oldDate.split(/ /);
var newMonth = 0;
for(x in monthName)
{
if(oldDate[0] == monthName[x])
{
var newMonth = parseInt(x) + 1;
var newYear = parseInt(oldDate[1]);
if(oldDate[0] == "Dec")
{
var newMonth = parseInt(x) - 11;
var newYear = parseInt(oldDate[1]) + 1;
}
}
}
$(".custom-date").html(monthName[newMonth] + " " + newYear);
});
$(".fc-button-today").live("click", function(){
var newDate = new Date();
$(".custom-date").html(monthName[newDate.getMonth()] + " " + newDate.getFullYear());
});
}
})(jQuery);
</script>
<?php
}
}// END if statement
css:
.content-layout .sidebar1 {
border-right: 1px solid #6CACE6;
max-width: 200px;
width: 200px;
}
.blockcontent {
margin: 0 auto;
min-height: 1px;
min-width: 1px;
position: relative;
}
.blockcontent-body {
color: #666666;
font-family: "Century Gothic";
font-size: 12px;
padding: 7px;
position: relative;
}
Not really the best scenario but a fun implementation to say the least. I def could have done it better and not my best work but it was fun doing it.
Let me know if you have any questions or would like an explanation or whatever.
This is what mine looked like after it was done:
here