Events Summary listing for homepage- JavaScript-based

We often display key events in the Home page of SharePoint site. The source calendar may not from the same site and we may need to pull data from the different site. I wrote a simple JavaScript-based events summary listing below. It is a quick and easy solution.

OutPut

Script

<!--Author : Sutha Thavaratnarajah 01/09/2017
* You may need to refer jQuery reference if it is not exisit in your site.
 -->
<script  src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
 

<style>
.st-event-Day{
border: 1px solid black;
float:left;
margin:5px;
}

.st-event-month{
font-size:14px;
padding:5px 10px 2px 10px;
}
.st-event-singleDay{
font-size:16px;
font-weight: bold;
padding:2px 10px 2px 10px;
}
.st-event-details{
margin:5px;
}
.st-event-card-title{

}
.st-event-dard-datetime{

}
</style>
<script type="text/javascript">

var siteUrl = 'https://infoleadsolution.sharepoint.com/sites/demo2';

varItemViewURL = 'https://infoleadsolution.sharepoint.com/sites/demo2/Lists/MyCalander/DispForm.aspx?ID=';

var month_name = function(dt){
mlist = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
  return mlist[dt.getMonth()];
};

$(document).ready(function() {

ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
  
 } );
    
    
function retrieveListItems() {

    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('MyCalander');
        
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><OrderBy><FieldRef Name="Created" Ascending="false" /></OrderBy></Query><RowLimit>5</RowLimit></View>'); // change what ever filter you neeed.
    this.collListItem = oList.getItems(camlQuery);
        
     clientContext.load(collListItem, 'Include(ID,Title,EventDate)');
        
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));        
        
}
function onQuerySucceeded(sender, args) {

    var listItemEnumerator = collListItem.getEnumerator();
         var Title = "";
   var eventDate = new Date();
   var eventID = 0;
   var itemURL ="";
   var content ="";
   eventMonth = "";
   eventDay = "";
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
  
        eventID = oListItem.get_item('ID') ;
  Title = oListItem.get_item('Title') ;
  itemURL =varItemViewURL + eventID ;
  eventDate = (oListItem.get_item('EventDate')).toDateString('dd/MM/yyyy hh:mm'); //dateformating 
  //eventMonth=(oListItem.get_item('EventDate')).toDateString('MMM');
  eventMonth = month_name(new Date(oListItem.get_item('EventDate')));
  eventDay=oListItem.get_item('EventDate').getDate();
  //content += "<tr><td><b><a href='"+ itemURL + "'>" +  Title + "'</a></b><br>" +   eventDate + "<br><br></td></tr>";
  
  content +=  "<div style ='overflow: hidden;'>";
  content += "<div class='st-event-Day'>";
  content += "<div class='st-event-month'>"+ eventMonth +"</div>";
  content += "<div class='st-event-singleDay'>" + eventDay +"</div>";
  content += "</div>";
  content +=  "<div class='st-event-details'>";
  content += "<div  class='st-event-card-title'><a href='"+ itemURL + "'>" +  Title + "'</a></div>";
  content += "<div class='st-event-dard-datetime'>" +   eventDate + "</div>";
  content += "</div>";
  content += "</div>";
    
    }
     $(content).appendTo("#here_table");
}
function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
                       
</script>

<div>   
<div id="here_table"></div>
</div>