2

How to retrieve and display Sharepoint calendar events using JSOM ?

Improve this question
0

1 Answer 1

Reset to default
1

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>
Improve this answer
4
  • Have you tried above code? Did you get it working for you?
    – Hardik
    Jun 10, 2016 at 12:50
  • I've tried this but can't get it to work
    – user52826
    Jun 13, 2016 at 17:27
  • I have tried it & it worked on my end... Can you tell me where are you getting any error?
    – Hardik
    Jun 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.
    – user52826
    Jun 15, 2016 at 18:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.