2

Get recurring event from calendar list using Angular JS

Getting recurring event from calendar list using Angular JS is some bit tricky.
I am going to implement through CEWP(Content editor web part) in SharePoint.

1. Create HTML file for display events description(Angular View)


<html ng-app="myApp">
	<head lang="en">
		<script src="jquery.min.js"></script> 
		<script src="angular.min.js"></script>
		<script type="text/javascript" src="main.js"></script> 
	</head>
	<body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <div ng-repeat="result in results">   
                <div>{{result.Title}}</div>
                <div>{{result.Description}}</div>
                <div>{{result.StartTime}}</div>
                <div>{{result.Location}}</div>
            </div>
        </div>
	</body>
</html>

Give the reference of Jquery and Angular js from your SharePoint site.

If you want to display upcoming limited(suppose top 5) events then you can add condition which is inbuilt facility of Angular JS

Add condition(ng-if) in Angular repeat section

<div ng-repeat="result in results" ng-if="$index < 4">   

2. Now Create one JavaScript which will get all events from calendar event list and check event start date with current date and display only feature events only.


var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) 
{
    $scope.results = [];
	var currSiteUrl = _spPageContextInfo.siteAbsoluteUrl;
	var webUrl, calendarListName;
	webUrl= currSiteUrl;
	calendarListName='Events'; 	
	wsURL = webUrl + "/_vti_bin/Lists.asmx";	 
    $scope.request =
        "<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> <soap:Body>" +
        "<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>" +
        "<listName>" + calendarListName+ "</listName>" +
        "<query>" +
        "<Query>" +
        "<Where>" +
           "<DateRangesOverlap>" +
           "<FieldRef Name='EventDate' />" +
           "<FieldRef Name='EndDate' />" +
           "<FieldRef Name='RecurrenceID' />" +
           "<Value Type='DateTime'><Year/></Value>" +
           "</DateRangesOverlap>" +
        "</Where>" +
        "</Query>" +
        "</query>" +
        "<queryOptions>" +
        "<QueryOptions>" +
            "<ExpandRecurrence>TRUE</ExpandRecurrence>" +
        "</QueryOptions>" +
        "</queryOptions>" +
        "</GetListItems>" +
        "</soap:Body></soap:Envelope>";
 
	var results1 = [];
	$http({
        method: 'POST', 
        url: wsURL, 
        async: false,
        data: $scope.request, 
        headers: {
            'Content-Type': 'text/xml; charset=\"utf-8\; action="http://schemas.microsoft.com/sqlserver/reporting/2010/03/01/ReportServer"'
        }
    })
    .success(function(xData, status, headers, config){       
        if (status === 200)
        {
             var root = $(xData);
                    root.find("listitems").children().children().each(function () {
						$this = $(this);
						var ids = $this.attr("ows_UniqueId").split(";");
						var rec = $this.attr("ows_fRecurrence");
						results1.push({
							"StartTime": $this.attr("ows_EventDate"),
							"EndTime": $this.attr("ows_EndDate"),
							"Title": $this.attr("ows_Title"),
							"Recurrence": (rec === "1" ? true : false),
							"Description": $this.attr("ows_Description"),
							"Location":$this.attr("ows_Location"),
							"Guid": ids[1],
							"Id": ids[0],
						});
                });
        }
	    var filtered_item = [];
	    for (var i = 0; i < results1.length; i++) 
		{
			var current_Time = new Date().getTime()
			var Start_Time = new Date(results1[i].StartTime).getTime();
			if (Start_Time  >= current_Time) {
				filtered_item.push(results1[i]);
			}
		}
      $scope.results =  filtered_item;
    })
    .error(function(data, status, headers, config){
        console.log('In Error');
        console.log(data);
    }); 
});

To get the recurrence event we have added parameter “ExpandRecurrence” with value “True” by which we can identify that event is recurrence or not.

In output you will get Title, Description, Start time and location of event. You can customize as per your requirement and apply css also.

Advertisements