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.

No comments:

Post a Comment