Show SharePoint Calender using jQuery UI DatePicker.

SharePointTinyCalender.js

$(document).ready(function () {

    $(".divDatePicker").datepicker({
        onChangeMonthYear: function (year, month, inst) { //表示月変更 
            setTimeout(function () { syncCalendar(year, month, selectDate.getDate()); }, 100);
        },
        onSelect: function (dateText, inst) { //選択日変更
            dispDayEvent(dateText);
        }
    });

    var dispDayEvent = function (dateText) {
        dayURL = L_Menu_BaseUrl + "/Lists/Calendar/calendar.aspx?CalendarDate=" + dateText + "&CalendarPeriod=day";
        location.href = dayURL;
    };

    var syncCalendar = function (year, month, eventDate) {

        var calendarDate = year + "-" + month + "-" + eventDate;
        var dispDate = new Date(year, month - 1, eventDate); //カレンダーでの選択日付
        var today = new Date(); //今日の日付

        var camlFields = "<ViewFields><FieldRef Name='Title' /><FieldRef Name='EventDate' /><FieldRef Name='EndDate' /><FieldRef Name='Location' /><FieldRef Name='Description' /><FieldRef Name='fRecurrence' /><FieldRef Name='RecurrenceData' /><FieldRef Name='RecurrenceID' /><FieldRef Name='fAllDayEvent' /></ViewFields>";

        var camlQuery = "<Query><CalendarDate>" + calendarDate + "</CalendarDate><Where><DateRangesOverlap><FieldRef Name='EventDate' /><FieldRef Name='EndDate' /><FieldRef Name='RecurrenceID' /><Value Type='DateTime'>Month</Value></DateRangesOverlap></Where><OrderBy><FieldRef Name='EventDate' /></OrderBy></Query>";

        var camlOptions = "<QueryOptions><CalendarDate>" + calendarDate + "</CalendarDate><RecurrencePatternXMLVersion>v3</RecurrencePatternXMLVersion><ExpandRecurrence>TRUE</ExpandRecurrence><DateInUtc>FALSE</DateInUtc></QueryOptions>";

        $().SPServices({ //イベントリスト取得
            operation: "GetListItems",
            async: false,
            listName: "Calendar",
            CAMLViewFields: camlFields,
            CAMLQuery: camlQuery,
            CAMLQueryOptions: camlOptions,
            completefunc: createEventList
        });

        function createEventList(xData, status) { //当月イベントの表示

            $(".divCalendarList").empty();

            var liHtml;
            var date;
            var endDate;
            var itemURL;
            var eventDuration;
            var current = null;
            var currentDate = null;
            var flag;

            $(xData.responseXML).SPFilterNode("z:row").each(function () {
                date = new Date(
                $(this).attr("ows_EventDate").substring(0, 4),
                $(this).attr("ows_EventDate").substring(5, 7) - 1,
                $(this).attr("ows_EventDate").substring(8, 10),
                $(this).attr("ows_EventDate").substring(11, 13),
                $(this).attr("ows_EventDate").substring(14, 16),
                $(this).attr("ows_EventDate").substring(17, 19));

                endDate = new Date(
                $(this).attr("ows_EndDate").substring(0, 4),
                $(this).attr("ows_EndDate").substring(5, 7) - 1,
                $(this).attr("ows_EndDate").substring(8, 10),
                $(this).attr("ows_EndDate").substring(11, 13),
                $(this).attr("ows_EndDate").substring(14, 16),
                $(this).attr("ows_EndDate").substring(17, 19));

                if(date.getFullYear() == year){
                    if (date.getMonth() + 1 <= month && endDate.getMonth() + 1 >= month) { // 

                        itemURL = L_Menu_BaseUrl + "/Lists/Calendar/DispForm.aspx?ID=" + $(this).attr("ows_ID");

                        if (currentDate != date.getDate() && current != itemURL) {
                            if (date.getDate() == endDate.getDate()) {
                                $(".divCalendarList").append("<li class = 'navHead'>" + date.toDateString() + "</li>");
                            } else {
                                $(".divCalendarList").append("<li class = 'navHead'>" + date.toDateString() + " - " + endDate.toDateString() + "</li>");
                            }
                            $(".navHead:last").append("<ul class = 'eventsListUL'>");
                            currentDate = date.getDate();
                        }

                        if (current != itemURL) {
                            if ($(this).attr("ows_fAllDayEvent") == '1') {
                                eventDuration = "(All day event)";
                            } else {
                                eventDuration = '(' + getFormattedTime($(this).attr("ows_EventDate")) + ' - ' + getFormattedTime($(this).attr("ows_EndDate")) + ')';
                            }

                            liHtml = '<li class="CalendarLI"><a href="' + itemURL + '">' + $(this).attr("ows_Title") + '</a> ' + eventDuration + '</li>';
                            $(".eventsListUL:last").append(liHtml);
                            current = itemURL;
                        }
                    }
                }

                var curDate = new XDate(date);
                var eDate = new XDate(endDate);
                do {
                    $('.ui-datepicker-calendar a').filter(function () { //イベントのある日付
                    return (($(this).text() == curDate.getDate() && $(this).parent('td').attr("data-month") == curDate.getMonth()) &&
                           $(this).parent('td').attr("data-year") == curDate.getFullYear());
                    }).css({ border: "1px solid #16a085", background: "#16a085", color: "#fff" });
                    curDate = curDate.addDays(1);
                } while(curDate < eDate);

                $('.ui-datepicker-calendar a').filter(function () {  //今日の日付
                    return ($(this).text() == today.getDate()) &&
                           $(this).parent('td').attr("data-year") == today.getFullYear() &&
                           $(this).parent('td').attr("data-month") == today.getMonth();
                }).css({ border: "1px solid #5794BB", background: "#5794BB", color: "#fff" });

            }); // end each function

        } // end processResult

    }; //end FillCalendar

    var selectDate = $(".divDatePicker").datepicker("getDate");
    syncCalendar(selectDate.getFullYear(), selectDate.getMonth() + 1, selectDate.getDate());

    function getFormattedTime(eventDate) {
        var currentTime = new Date(
        eventDate.substring(0, 4),
        eventDate.substring(5, 7) - 1,
        eventDate.substring(8, 10),
        eventDate.substring(11, 13),
        eventDate.substring(14, 16),
        eventDate.substring(17, 19));

        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();

        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        if (hours > 11) {
            if (hours > 12) {
                return (hours - 12) + ":" + minutes + " " + "PM";
            } else {
                return hours + ":" + minutes + " " + "PM";
            }
        } else {
            return hours + ":" + minutes + " " + "AM";
        }
    } //end getFormattedTime

}); // end document.ready