Monthly View Webpart with recurring events in SharePoint Calendar List

Development Steps 

Required JS

<!-- Reference jQuery on the Google CDN -->

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- Reference SPServices on cdnjs (Cloudflare) -->

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>

<script type="text/javascript">

CAML Query

CAML query for Get current month events from Calendar List

CAMLQuery: "<Query>" +

            "<Where>" +

                "<DateRangesOverlap>" +

                    "<FieldRef Name='EventDate' />" +

                    "<FieldRef Name='EndDate' />" +

                    "<FieldRef Name='RecurrenceID' />" +

                    "<Value Type='DateTime'>" +

                        "<Month />" +

                    "</Value>" +

                "</DateRangesOverlap>" +

            "</Where>" +

            "<OrderBy>" +

                "<FieldRef Name='EventDate' />" +

            "</OrderBy>" +

        "</Query>",

    CAMLQueryOptions: "<QueryOptions>" +

            "<CalendarDate>" + startDate + "</CalendarDate>" +

            "<RecurrencePatternXMLVersion>v3</RecurrencePatternXMLVersion>" +

            "<ExpandRecurrence>TRUE</ExpandRecurrence>" +

        "</QueryOptions>",

Call SPServices

·         Using SPServices we can get items form Calendar list

·         We have to apply the above CAML query while get items from list

·         Based on list we will generate the table which has event info

·         Add the hyperlink for view full calendar view

<a

href="JavaScript:var options=SP.UI.$create_DialogOptions();

options.url='https://collaboration/sites/ENF/MicroCap/Lists/Calendar/calendar.aspx';

options.title = 'Monthly Calendar';

options.height = 500;

void(SP.UI.ModalDialog.showModalDialog(options))">Monthly View</a>

Implementation

Create CurrentMonthlyView.html which has the above info SPSevices call and place this into style libray

Create content editor webpart into home page and add the reference of CurrentMonthlyView.html file into it.

Verification Steps

·         Check display meeting events are associated to current month or not