1

enter image description here

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.
0

DateImage 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>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.