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> 

Nintex Repeating Section Date/Time - Using in an email or a string builder

Problem

Date and Time often challenge in any development works, recently I experienced some challenges in Nintex repeating section.

Scenario:

I built a Nintex form with repeating sections which have a date and time field. The repeating section store the data in XML format.  A running workflow read the repeating section data to construct an email body.

 I queried the XML and try to store the values to workflow variables. Then I use a string builder to write the contents of my email. Everything went very well except the date. J

When I had a deeper look, I found-out Nintex write dates in MM/DD/YYYY format and my SharePoint environment in DD/MM/YYYY. Nintex has a detail explanation for that. You can find here. https://support.nintex.com/SharePoint/Forms/2016/Date_Format_in_XML_of_Repeating_Section_is_Always_MM%2F%2FDD%2F%2FYYYY_With_Query_XML_Workflow_Action

Solution

Query and store the date field value into text variable. Make sure return result as “Text”

Then, use “convert value” to another variable which is date time type variable.

You need to convert as follows.

Input-- > date-time variable – text type

Store in date time Variable – date time type

In advance – use the US culture. So that it will read the text field correctly. However, it will store as per your SharePoint regional settings.

Now, we can use the stored date time field in the string builder or in emails.

locked for exclusive use- SharePoint file

In SharePoint Documents, sometimes we may experience the filed locked by error. In this post, I like to share my resolution for that.We might receive a message stating that file is locked for editing by another user, However, the locked by the user has no intention to lock the file. To release the document by scripting, I wrote the below script.

Please investigate the issue and then if it is appropriate, you shall use the script.

Script:

Release-FileLock