Question

我想在不使用服务器代码或webpart的情况下使用rest api在页面上显示calendar.aspx视图。有没有办法做同样的事。

Answer 1

您可以使用Jquery和fullcalendar.io插件使用客户端脚本来显示日历视图。

不需要服务器端代码，您可以将所有数据存储在sharepoint的现有日历中。仅用于渲染我们将使用Jquery完整日历插件。以下函数retreive将从sharepoint日历列表中获取数据。

function Retreive() {
var listUrl = "../_vti_bin/ListData.svc/UpcomingEvents";
$.ajax({
    url: listUrl,
    type: "GET",
    data: {
        $select: "Title,Description,StartTime,EndTime,AllDayEvent,Recurrence,Id"
    },
    headers: {
        accept: "application/json;odata=verbose"
    },
    success: function(data) {
        $.each(data.d.results, function(i) {
            currObj = this;
            var fADE = currObj.AllDayEvent;
            if (fADE != null) {
                if (fADE == 0) {
                    thisADE = false
                } else thisADE = true;
            }
            var thisID = currObj.Id;
            var thisTitle = currObj.Title;
            var thisRecurrence = currObj.Recurrence;
            var thisDesc = currObj.Description;
            var x = new Date(parseInt(currObj.StartTime.substr(6)));
            var y = new Date(parseInt(currObj.EndTime.substr(6)));
            ele.push({
                title: currObj.Title,
                id: currObj.Id,
                start: x,
                description: currObj.Description,
                end: y,
                allDay: thisADE,
            });
        });
        BindCalendar();
    }
});}

函数bindcalendar将从数组加载数据＆＃39; ele＆＃39;进入日历插件

function BindCalendar() {
var calendarioDiv = $('#calendar');
var fullCalendar = calendarioDiv.fullCalendar({
    events: ele,
    error: function() {
        alert('Error');
    },
    editable: false,
    firstDay: 0,
    monthNames: ['JANUARY', 'FEBRUARY',
        'MARCH', 'APRIL', 'MAY',
        'JUNE', 'JULY', 'AUGUST', 'SEPTEMBER',
        'OCTOBER', 'NOVEMBER', 'DECEMBER'
    ],
    dayNames: ['Sunday', 'Monday', 'Tuesday',
        'Wednesday', 'Thursday', 'Friday', 'Saturday'
    ],
    dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    allDay: true
});}

参见参考文章 - http://kalashnikovtechnoblogs.blogspot.in/2015/08/display-calendar-using-jquery-full.html

使用rest api在页面上显示日历视图

1 个答案: