Customizing calender in a web part

Question

I have a calendar in my SharePoint 2013 site. I want to use it in a web part. The way I want the items to display is the following:

• The Title of the calendar.
• The Location of the event.
• Start Time - End Time.
• The Month and Date has to be shown like in the image above.

Here are my thoughts on this:
I am thinking of using jQuery to get the month and date from the calendar item and adding to the black image on the appropriate places.

My questions are:

• Am I on the right track?
• Are there other ways of doing this?
• And if someone has come up with a similar issue, can they kindly explain how it was done.

Answer 1

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>