Friday, December 22, 2017

Identify overlapping events in sharepoint calendar

Identify overlapping events in sharepoint calendar.
Step 1: Create a calendar called 'Calendar1'.
Step 2: Add some events.
Step 3: Write javascript code to Identify overlapping events in sharepoint calendar and save it as "Calendar/CalendarOverlapEventsFoundJS.js"
The below Code for 'SharePoint online'
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
var j = jQuery.noConflict();
var originalSaveButtonClickHandler = function () { };
j(document).ready(function () {
    var saveButton = j("[name$='diidIOSaveItem']"); //gets form save button and ribbon save button
    if (saveButton.length > 0) {
        originalSaveButtonClickHandler = saveButton[0].onclick;  //save original function
    }
    j(saveButton).attr('onclick', 'checkForOverlapEvents()'); //change onclick to execute our custom validation function
});
function checkForOverlapEvents() {
    var startTime = j("nobr:contains('Start Time')").closest('td').next('td').find('input').val() + " " + j(j("nobr:contains('Start Time')").closest('td').next('td').find('select')[0]).val().split(' ')[0] + ":" + j(j("nobr:contains('Start Time')").closest('td').next('td').find('select')[1]).val() + " " + j(j("nobr:contains('Start Time')").closest('td').next('td').find('select')[0]).val().split(' ')[1];
    var endTime = j("nobr:contains('End Time')").closest('td').next('td').find('input').val() + " " + j(j("nobr:contains('End Time')").closest('td').next('td').find('select')[0]).val().split(' ')[0] + ":" + j(j("nobr:contains('End Time')").closest('td').next('td').find('select')[1]).val() + " " + j(j("nobr:contains('End Time')").closest('td').next('td').find('select')[0]).val().split(' ')[1];
    var length = 0;
    var objHeaders = {
        type: "GET",
        headers: {
            "accept": "application/json;odata=verbose"
        },
        mode: 'cors',
        cache: 'default',
        credentials: 'include'
    }
    fetch(_spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Calendar1')/items?$filter=(((EventDate ge '" + startTime + "') and (EventDate le '" + endTime + "')) or ((EndDate ge '" + startTime + "') and (EndDate le '" + endTime + "')) or ((EventDate ge '" + startTime + "') and (EndDate le '" + endTime + "')))&$select=ID,Title,EventDate,EndDate&$orderby=ID", objHeaders)
    .then(function (response) {
        return response.json()
    }).then(function (json) {
        var results = json.d.results;
        length = results.length;
        if (results.length > 0) {
            var overlapEventsList = "";
            if (j("#tbloverlapEventsList").length > 0) {
                j("nobr:contains('Title')").closest('table').prev('#tbloverlapEventsList').html("")
            }
            overlapEventsList += "<table id='tbloverlapEventsList'>";
            overlapEventsList += "<tr><td colspan='8'><span class='ms-formvalidation'><span role='alert'>Calendar overlap events found.</span><br></span></td></tr>";
            results.map(function (item, key) {
                overlapEventsList += "<tr><td> ID: </td><td>" + item.ID + "</td><td> Title: </td><td>" + item.Title + "</td><td> EventDate: </td><td>" + convertDateandTime(item.EventDate) + "</td><td> EndDate: </td><td>" + convertDateandTime(item.EndDate) + "</td></tr>";
            })
            overlapEventsList += "</table>";
            j("nobr:contains('Title')").closest('table').before(overlapEventsList);
        }
        else {
            originalSaveButtonClickHandler();  //make sure to call this on your final success callback
        }
    }).catch(function (ex) {
        //console.log('parsing failed', ex);
    })
}
function convertDateandTime(UTCDateAndTime) {
    var date = new Date(UTCDateAndTime);
    //12/20/2017 3:05 AM //IST Formate
    return (date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' ' + date.getHours() + ':' + date.getMinutes() + ' ' + ((date.getHours() >= 12) ? 'PM' : 'AM'));
}
</script>
The below Code for 'SharePoint on premises'
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.js"></script>
<script type="text/javascript">
var j = jQuery.noConflict();
var originalSaveButtonClickHandler = function () { };
j(document).ready(function () {
    var saveButton = j("[name$='diidIOSaveItem']"); //gets form save button and ribbon save button
    if (saveButton.length > 0) {
        originalSaveButtonClickHandler = saveButton[0].onclick;  //save original function
    }
    j(saveButton).attr('onclick', 'checkForOverlapEvents()'); //change onclick to execute our custom validation function
});
function checkForOverlapEvents() {
    var startTime = j("nobr:contains('Start Time')").closest('td').next('td').find('input').val() + " " + j(j("nobr:contains('Start Time')").closest('td').next('td').find('select')[0]).val().split(' ')[0] + ":" + j(j("nobr:contains('Start Time')").closest('td').next('td').find('select')[1]).val() + " " + j(j("nobr:contains('Start Time')").closest('td').next('td').find('select')[0]).val().split(' ')[1];
    var endTime = j("nobr:contains('End Time')").closest('td').next('td').find('input').val() + " " + j(j("nobr:contains('End Time')").closest('td').next('td').find('select')[0]).val().split(' ')[0] + ":" + j(j("nobr:contains('End Time')").closest('td').next('td').find('select')[1]).val() + " " + j(j("nobr:contains('End Time')").closest('td').next('td').find('select')[0]).val().split(' ')[1];

    startTime = new Date(startTime);
    startTime.setMinutes(startTime.getMinutes()+1);
    startTime = ((startTime.getMonth() + 1) + '/' + startTime.getDate() + '/' + startTime.getFullYear() + ' ' + startTime.getHours() + ':' + startTime.getMinutes()); 
    startTime = moment.utc(startTime).format();
    
    endTime = new Date(endTime);
    endTime.setMinutes(endTime.getMinutes()-1);
    endTime = ((endTime.getMonth() + 1) + '/' + endTime.getDate() + '/' + endTime.getFullYear() + ' ' + endTime.getHours() + ':' + endTime.getMinutes());
    endTime = moment.utc(endTime).format();   
  
    var listUrl = _spPageContextInfo.webAbsoluteUrl + "/_vti_bin/ListData.svc/Calendar1?$filter=(((StartTime ge datetime'" + startTime + "') and (StartTime le datetime'" + endTime + "')) or ((EndTime ge datetime'" + startTime + "') and (EndTime le datetime'" + endTime + "')) or ((StartTime ge datetime'" + startTime + "') and (EndTime le datetime'" + endTime + "')))"
    $.getJSON(listUrl, function(data) {         
        if(data.d.results.length > 0) {
            var overlapEventsList = "";
            if (j("#tbloverlapEventsList").length > 0) {
                j("nobr:contains('Title')").closest('table').prev('#tbloverlapEventsList').html("")
            }
            overlapEventsList += "<table id='tbloverlapEventsList'>";
            overlapEventsList += "<tr><td colspan='8'><span class='ms-formvalidation'><span role='alert'>Calendar overlap events found.</span><br></span></td></tr>";
            for (i=0; i<data.d.results.length; i++) {               
                overlapEventsList += "<tr><td> ID: </td><td>" + data.d.results[i].Id + "</td><td> Title: </td><td>" + data.d.results[i].Title + "</td><td> StartTime: </td><td>" + convertDateandTime(data.d.results[i].StartTime) + "</td><td>  EndTime: </td><td>" + convertDateandTime(data.d.results[i].EndTime) + "</td></tr>";            
            }
            overlapEventsList += "</table>";
            j("nobr:contains('Title')").closest('table').before(overlapEventsList);
        }
        else {
            originalSaveButtonClickHandler();  //make sure to call this on your final success callback
        }
    });
}
function convertDateandTime(UTCDateAndTime) {
    var UTCDateAndTime1= UTCDateAndTime.replace("/Date(", "");
    var UTCDateAndTime2 = UTCDateAndTime1.replace(")/", "");    
    var date = moment.utc(parseInt(UTCDateAndTime2)).format();  
    var year = date.substring(0, 4);
    var month = date.substring(5, 7);
    var day = date.substring(8, 10);
    var hour = date.substring(11, 13);
    var min = date.substring(14, 16);
    var ampm = (parseInt(hour>= 12) ? 'PM' : 'AM');    
    return day+"/"+month+"/"+year+" "+hour+":"+min+" "+ampm;
}
</script>
Step 4: upload that file into site assets library. copy the file url and save.
Step 5: In out Calendar list edit default new form as shown below.
Step 6: Add content editor webpart and add above script into content editor webpart.
Step 7: Test the application.

Featured Post

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management https://docs.microsoft.com/en-us/azure/api-management/api-...

Popular posts