.fc-calendar-container { position: relative; height: 400px; width: 400px; } .fc-calendar { border-top:1px solid #fff; width: 100%; height: 100%; } .fc-calendar .fc-head { height:28px; line-height:22px; background: #ccc; color: #fff; } .fc-calendar .fc-body { position: relative; width: 100%; height: 100%; height: -moz-calc(100% - 24px); height: -webkit-calc(100% - 24px); height: calc(100% - 24px); border: 1px solid #ececec; } .fc-calendar .fc-row { width: 100%; border-bottom: 1px solid #ececec; } .fc-four-rows .fc-row  { height: 25%; } .fc-five-rows .fc-row  { /*height: 20%;*/ height: 19.59%; } .fc-six-rows .fc-row { height: 16.66%; height: -moz-calc(100%/6); height: -webkit-calc(100%/6); height: calc(100%/6); } .fc-calendar .fc-row > div, .fc-calendar .fc-head > div { float: left; height: 100%; width:  14%; /* 100% / 7 */ width: -moz-calc(100%/7.2); width: -webkit-calc(100%/7.2); width: calc(100%/7.2); position: relative; } /* IE 9 is rounding up the calc it seems */ .ie9 .fc-calendar .fc-row > div, .ie9 .fc-calendar .fc-head > div { width:  14.2%; } .fc-calendar .fc-row > div { border-right: 1px solid #ececec; padding: 4px; overflow: hidden; position: relative; } .fc-calendar .fc-head > div { text-align: center; color:#a7322a; } .fc-calendar .fc-row > div > span.fc-date { position: absolute; width: 30px; height: 20px; font-size: 12px; line-height: 20px; font-weight: 700; color: #ddd; text-shadow: 0 -1px 0 rgba(255,255,255,0.8); bottom: 5px; right: 5px; text-align: right; } .fc-calendar .fc-row > div > span.fc-weekday { padding-left: 5px; display: none; } .fc-calendar .fc-row > div.fc-today { background: #fff4c3; } .fc-calendar .fc-row > div.fc-out { opacity: 0.6; } .fc-calendar .fc-row > div:last-child, .fc-calendar .fc-head > div:last-child { border-right: none; } .fc-calendar .fc-row:last-child { /*border-bottom: none;*/ } .hasevent, .fc-content { background: url("/Media/img/hasevents.png") no-repeat scroll right top rgba(0, 0, 0, 0) !important; }