You can customize the way Mini-Calendar looks by changing the default CSS. To edit the style sheet, edit the web part setting, select Custom CSS in the Select Style Sheet section, and click Edit.
The default CSS classes for the Mini-Calendar Web Part are provided below for reference:
.bb-cal-today
{
background-color: #fcc252;
padding-top:7px !important;
}
.CalendarHeader-g_d0915a6b_6dde_4464_9903_e2214a603c36
{
background-color:#F2F8FF;
font-family: verdana;
font-size: .68em;
text-decoration: none;
color: #000000;
}
.currentDay- Calendar-g_d0915a6b_6dde_4464_9903_e2214a603c36
{
background-color:#FEFEFE;
border-right: 1px solid black;
font-weight:normal;
font-family: verdana;
text-decoration: none;
padding-top:0px !important;
}
.currentDayOfMonth- Calendar-g_d0915a6b_6dde_4464_9903_e2214a603c36
{
background-color: #FFCC00;
border-right: 1px solid black;
font-weight:normal;
font-family: verdana;
text-decoration: none;
padding-top:0px !important;
}
.currentDayOfOtherMonth- Calendar-g_d0915a6b_6dde_4464_9903_e2214a603c36
{
background-color:#D6DBE2;
border-right: 1px solid black;
font-weight:normal;
font-family: verdana;
text-decoration: none;
padding-top:0px !important;
}
.itemPopupCalendar-g_d0915a6b_6dde_4464_9903_e22 14a603c36{
border: 1px solid #868686;
border-bottom-width: 0;
font: normal 10px Verdana;
line-height: 18px;
background: lightyellow;
width: 200px;
}
.itemPopupCalendar-g_d0915a6b_6dde_4464_9903_e22 14a603c36 ul li a{
border-bottom: 1px solid #868686;
font-weight: normal;
}
.itemPopupCalendar-g_d0915a6b_6dde_4464_9903_e2214a603c36 a:hover{
background: #d4d0c8;
color: black;
}
.itemPopupCalendarShadow-g_d0915a6b_6dde_4464_9903_e2214a603c36{
/*CSS for shadow. Keep this as is */
background: black;
}
.eventClass-g_d0915a6b_6dde_4464_9903_e2214a603c36{
font-weight: bold;
}
.eventClass-g_d0915a6b_6dde_4464_9903_e2214a603c36 a:link {
}
.eventClass-g_d0915a6b_6dde_4464_9903_e2214a603c36 a:link {
}