Mini Calendar webpart in SharePoint online

If you need to display a mini calendar on your page, there’s no need to create a new webpart, simply add custom styles to the normal calendar view. It looks great and even functions exactly like the normal calendar:

SharePoint online mini calendar

SharePoint online mini calendar

Simply add this script anywhere on the page:

<script type="text/javascript">

	function loadScript(url, callback)
	{
	    // add the script tag to the header
	   var head = document.getElementsByTagName('head')[0];
	   var script = document.createElement('script');
	   script.type = 'text/javascript';
	   script.src = url;
	   script.onreadystatechange = callback;
	   script.onload = callback;
	
	   // load the script
	   head.appendChild(script);
	}
	
	loadScript("/SiteAssets/Scripts/jquery-1.8.1.min.js", function ()
	{
		if (window.jQuery)
		{
			var elem = $('th.ms-acal-month-top span');
			$('th.ms-acal-month-top span').each(function(){
				$(this).html($(this).html().substr(0,1));
			});
			$('.ms-acal-summary-itemrow td div').height('0');
			$('.ms-acal-summary-dayrow').css('font-size','10px'); 
			$('.ms-acal-mdiv a').css('font-size','9px'); 
			$('.ms-acal-title a').css('font-size','9px');
			
	    }
	});
</script>

This assumesĀ there’sĀ /SiteAssets/Scripts/jquery-1.8.1.min.js file.