Please save the image to a location on your sharepoint site. The image name is DayImage.png
<style type="text/css">
.images{
background-image:url('../DayImage.png');
height: 55px;
width: 48px;
}
.images, .events{
margin-bottom:10px;
}
.events{
padding-left:10px;
width:100%;
height:100%;
}
.months{
color:white;
font-size:11px;
margin-left:0px;
margin-top:0px;
text-align:center;
font-weight:bold;
}
.dates{
margin-left:0px;
margin-top:-5px;
font-size:29px;
font-weight:bold;
text-align:center;
}
.title, .location, .time{
Font-size: 12px;
}
.udFullCalendar A:link, .udFullCalendar A:hover, .udFullCalendar A:visited
{
font-weight:bold;
text-decoration:none;
white-space:no-wrap;
}
.events A:link, .events A:hover, .events A:visited
{
text-decoration:none;
}
</style>
$(document).ready(function() {
getCalendarListItems();
});
function getCalendarListItems() {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
clientCalContext = new SP.ClientContext();
var camlQ= new SP.CamlQuery();
camlQ.set_viewXml('100');
var oweb = clientCalContext.get_web();
var olists = oweb.get_lists();
var olist = olists.getByTitle(<name of your calendar>);
colListItem = olist.getItems(camlQ);
clientCalContext.load(colListItem, 'Include(ID, EventDate, EndDate, Location, Title)');
clientCalContext.executeQueryAsync(Function.createDelegate(this, OnSuccess),
Function.createDelegate(this, OnFail));
});
}
function OnSuccess() {
var array_month = ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"];
var listiteminfo='';
listiteminfo += '';
var liEnum = colListItem.getEnumerator();
while(liEnum.moveNext())
{
var oLiCal=liEnum.get_current();
var eventDate = oLiCal.get_item('EventDate');
var eventDateString = String(eventDate.getDate());
var eventMonth = eventDate.getMonth();
var eventHour = am_pm(eventDate.getHours());
var endHour = am_pm((oLiCal.get_item('EndDate')).getHours());
if(eventDateString.length < 2)
{
eventDateString = "0" + eventDateString;
}
var LocationHTML="";
var LinkHTML = '<a href="../Lists/UpcomingDates/DispForm.aspx?ID=' + oLiCal.get_item('ID') + '">';
if(oLiCal.get_item('Location'))
{
LocationHTML='<div class="location">' +oLiCal.get_item('Location') + '</div>';
}
listiteminfo += '<tr>';
listiteminfo += '<td>';
listiteminfo += '<div class="images">';
listiteminfo += '<div class="months">' + array_month[eventMonth] + '</div>';
listiteminfo += '<div class="dates">' + eventDateString + '</div>';
listiteminfo += '</div>';
listiteminfo += '</td>';
listiteminfo += '<td class="calEvents">';
listiteminfo += '<div class="events">' + LinkHTML;
listiteminfo += '<div class="title">' + oLiCal.get_item('Title') + '</div>';
listiteminfo += LocationHTML;
listiteminfo += '<div class="time">' +eventHour + ' - ' + endHour + '</div>';
listiteminfo += '</a></div>';
listiteminfo += '</td>';
listiteminfo += '</tr>';
}
listiteminfo += 'Full Calendar';
$("#calendarGoesHere").html(listiteminfo);
}
function OnFail() {
}
function am_pm(time)
{
var _time = Number(time);
_time += 1;
if((_time - 12) >= 0)
{
if(_time > 12)
{_time = _time - 12;}
_time = String(_time);
_time += " pm";
}
else{
_time = String(_time);
_time += " am";
}
return _time;
}
<div id="calendarGoesHere"></div>