I've been using the mxCalendar for the first time today and created a mini calendar for use in sidebars etc where just the event date is 'clickable' rather than the title. So thought i'd post the css and chunks for anyone that may like to use it as a starting point.
I've attached a screen shot below
Here's what to do...
1. Firstly duplicate the 'default' directory in assets/components/mxcalendars/themes and rename it 'mini'
2. Then replace the styles in the /themes/mxcalendar.css with the following css (not too many changes here actually but good practice to make a duplicate):
/* mxCalendar Styles */
/*
Colors:
lightgrey = #F1F1F1
grey = #E3E3E3
dark = #555555
*/
/* CALENDAR LAYOUT: Clean theme */
table {
border-collapse: collapse;
border-spacing: 0;
}
#calbody, #calbodylist, #mxccategories {
background-color: transparent;
color: #555555;
width: 100%;
display:block;
}
#calbody {position: relative;}
#calbody H6, #calbodylist H6 { margin:0; padding:0; font-size:110%; }
#calbodylist { width: 100%; margin:0; padding:0; }
#calbody .mxcCalMonth { line-height:18px;font-size:16px; margin:10px 0; }
#calbody table {
width:80%;
margin: 0 auto;
}
#calbody td {
padding: 0px;
border: 1px solid #F1F1F1;
text-align: center;
width:13%;
white-space: normal;
height: 2em;
}
#calbody td .datestamp {
font-weight:400;
border: none;
padding: 0;
color:#222222;
}
.mxCalTitle-mini{background-color: #006eb9; color: #fff;height: 40px; text-align: center;}/*--- Added new title to [[tplMonth-mini]] chunk*/
.mxCalTitle-mini h2 {font-size: 1.2em;margin: 0; padding: 0;line-height: 40px;}
.mxCalTitle-mini h2 span.label {font-size: 0.9em;}
#calbody td.mxcdow { color:#001d4e; border:none;background: #ECEBE9;}
#calbody td.hasEvents {background-color: #006eb9;}
#calbody td.hasEvents .event a {color: #fff;text-decoration: none;}
#calbody td.hasEvents .event a:hover {color:#001d4e;}
#calbody td.hasEvents .datestamp {display: none;}
#calbody td.ncm .datestamp { color:#aaaaaa;}
#calbody td.today { background-color:#EAEAEA; }
#calbody td.today .datestamp { font-weight:400; }
#calbody td .event {}
#calbody td .event > div {}
#calbody td .event .title { font-weight:normal; }
#calbody td .event .title a:hover { background-color:#efefef; }
#calbody td .event .description { display:block; font-weight:normal; margin:0 0 8px 0; }
#calbody td .event .durantion { font-size:.85em;}
#calbody .event .dayofmonth { font-size:140%; }
#calbody .mxcnav {width: 10px; height: 10px;font-size: 9px; font-weight: bold; line-height: 9px; padding: 2px;text-decoration: none;text-align: center;}
#calbody .mxcnav.sm { font-size:12px; padding:0 7px 0 7px; }
#calbody .mxcnav:hover { background-color:#E3E3E3; color:#555555; }
a#mxcnextlnk {position: absolute; top: 50px; right: 5px;background: #006eb9; color: #fff;border: none; }
a#mxcprevlnk {position: absolute; top: 50px; left: 5px;background: #006eb9; color: #fff;}
a#mxcnextlnk:hover, #mxcprevlnk:hover {background: #001d4e;}
#calbody td div span { clear:both; display:block; }
#calbody .nomargins .mxcnav { margin:0 1px; }
#calbodylist .monthheading { font-size: 160%; line-height:200%; background-color: #efefef; margin:15px 0 0; padding:0 5px;}
#calbodylist .monthheading.first { margin-top:5px; }
#calbodylist .event { padding: 5px; }
#calbodylist .event H4 { margin:0; padding:0; line-height: 21px; }
#calbody a, #calbodylist a {}
li.mxcactivecat a { font-weight:bold; text-decoration: none; list-style-image: none; }
Duplicating chunks is the safest method....
3. Duplicate the mxCalendar chunk 'tplEvent' and rename it 'tplEvent-mini' and paste the following:
<div id="[[+id]][[+rid]]" class="[[+eventClass]]" >
<a href="[[+detailURL]]" class="[[+mxcmodalClass]]" title="SEE EVENT LISTING"><span class="title [[+eventCategoryInlineCss]]">[[+dayOfMonth]]</span></a>
</div>
4. Duplicate the mxCalendar chunk 'tplMonth' and rename it 'tplMonth-mini' and paste the following:
<div id="calbody" style="">
<div class="mxCalTitle-mini">
<h2>CAL TITLE<span class="label"> - [[+headingLabel:date=`%B %Y`]]</span></h2>
</div>
<div class="mxCalControls-mini">
<a href="[[+prevLink]]" class="mxcnav" id="mxcprevlnk"><</a>
<a href="[[+nextLink]]" class="mxcnav" id="mxcnextlnk">></a>
</div>
<table id="[[+containerID]]" class="[[+containerClass]]">
[[+weeks]]
</table>
[[+categories]]
</div>
5. Finally add your snippet call where you want the calendar to display (i have added a surrounding div with a fixed width of 300px for demo purposes but the calendar will fit within the constraints of an existing container as it has a % based width):
<div style="width:300px;">[[!mxcalendar? &theme=`mini` &tplEvent=`tplEvent-mini` &tplMonth=`tplMonth-mini` &showCategories=`0`]]</div>
☆ A M B ☆
☆ A M B ☆