How to retrieve and display Sharepoint calendar events using JSOM ?
1 Answer
Below is the combined code using Client Object Model and jQuery calendar events carousel. You will get the idea from below code that how you can retrieve and display Sharepoint calendar events using Javascript.
<html>
<head>
<style>
.myUL
{ list-style: none; padding: 0; margin: 0 auto; width: 42em; height: 24em; }
.myIL
{ height: 20em; width: 30em; background-color:#b9d764; text-align: center; cursor: pointer; }
li.roundabout-in-focus
{ cursor: default; background-color:#abe2f9; }
.myIL span
{ display: block; padding-top: 6em; }
.TimeLabel
{ font-family:Calibri; font-size:14px; padding-top:20px; }
.eventTitle
{ font-family:Calibri; font-size:17px; padding-top:20px; color:navy; }
</style>
<!-- reference to latest jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<!-- reference to roundabout jQuery -->
<script type="text/javascript" src="http://fredhq.com/lib/js/projects/roundabout/jquery.roundabout2.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
ExecuteOrDelayUntilScriptLoaded(getWebData, "sp.js");
var context = null;
var web = null;
var currentUser = null;
//Atach roundabout jQuery function to html UL element
$('.myUL').roundabout();
});
function getWebData()
{
//CAML query to get last 5 items created in list
var myQueryString = '<View><Query><OrderBy><FieldRef Name="Created" Ascending="false" /></OrderBy></Query><RowLimit>5</RowLimit></View>';
context = new SP.ClientContext.get_current();
web = context.get_web();
//Replace Calendar list name to your own in the following row
var list = web.get_lists().getByTitle('MyCalendarName');
var myquery = new SP.CamlQuery();
myquery.set_viewXml(myQueryString);
myItems = list.getItems(myquery);
//specify the columns you want to get from the list in this next line -
context.load(myItems, 'Include(ID,Title,EventDate)');
context.executeQueryAsync(Function.createDelegate(this, this.success),Function.createDelegate(this, this.failed));
}
function success()
{
var myID = 0;
var Stime= new Date();
var Title = "";
var ListEnumerator = this.myItems.getEnumerator();
var i = 1;
while(ListEnumerator.moveNext())
{
var currentItem = ListEnumerator.get_current();
myID = currentItem.get_item('ID') ;
Title = currentItem.get_item('Title') ;
Stime = currentItem.get_item('EventDate') ;
Stime.toString('yyyy-MM-dd');
//Buildig Event div including the data we got from our list
itemsString="
<div class='TimeLabel'>"+Stime+"</div>
<div class='eventTitle'><a href='javascript:NewItem2(event,\"/sites/MAEU/MATeam/Lists/MACalendar/DispForm.aspx?ID="+myID+"?isdlg=2)\")'>"+Title+"</a></div>
";
//Switch appending our HTML to each LI element
switch (i)
{
case 1:
$(itemsString).appendTo("#myIL1");
break;
case 2:
$(itemsString).appendTo("#myIL2");
break;
case 3:
$(itemsString).appendTo("#myIL3");
break;
case 4:
$(itemsString).appendTo("#myIL4");
break;
case 5:
$(itemsString).appendTo("#myIL5");
break;
}
i++;
}
}
function failed(sender, args)
{
alert("failed. Message:" + args.get_message());
}
</script>
</head>
<body>
<!-- The html we append our coded html to: -->
<div>
<ul class="myUL">
<li id="myIL1" class="myIL"></li>
<li id="myIL2" class="myIL"></li>
<li id="myIL3" class="myIL"></li>
<li id="myIL4" class="myIL"></li>
<li id="myIL5" class="myIL"></li>
</ul>
</div> </body> </html>
-
-
I've tried this but can't get it to work– user52826Jun 13, 2016 at 17:27
-
I have tried it & it worked on my end... Can you tell me where are you getting any error?– HardikJun 13, 2016 at 17:29
-
Do you know the internal name for calendar category? I've tried ows_Category , but it comes back as undefined.– user52826Jun 15, 2016 at 18:28