这是我第一次尝试实现日历的功能。我正在尝试做的是从列表中获取日期（以及其他信息，如事件标题，事件描述，事件主机等），并将其与用户的默认日历或首选日历同步，如谷歌/ outlook日历。我试图通过javascript实现这一目标。
我目前设想的是使用SP Services获取数据，我已经这样做了。我正在使用它来使用DataTables构建一个事件的“列表视图”，我也已经开始工作了。
现在，我想在每个“添加到日历”的事件上添加一个按钮，点击后，它会将事件添加到默认日历（对桌面日历有用吗？）或允许用户选择日历添加到（谷歌/展望等）之间。最重要的是，我希望有一个按钮，可以选择一批事件添加到他们的日历中。
我知道这远远超出我目前所知或的JavaScript，但会对任何方向表示感谢。我已经开始阅读谷歌日历API，但它仍然需要很多。此外，另一个注意事项，SharePoint上的用户是具有默认Outlook电子邮件的员工。我认为这将是添加事件的最简单方法，但我不知道如何A）只需通过他们的登录帐户访问他们的日历，以及B）如何授权添加日历。
如果这一切都有益，这是我目前使用SP服务和数据表的代码
$(document).ready(function() {
var method = "GetListItems";
var webURL = $().SPServices.SPGetCurrentSite();
var list = "Events List";
var fieldsToRead = "<ViewFields>" + "<FieldRef Name='Name' />" + "</ViewFields>";
var query = "<Query><OrderBy><FieldRef Name='ID' Ascending='True' /></OrderBy></Query>";
var pre = [];
var dataSet = [];
var i = 0;
$().SPServices({
operation: method,
async: false,
webURL: webURL,
listName: list,
CAMLViewFields: "<ViewFields Properties='True' />",
CAMLQuery: query,
completefunc: function(xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var pre = [];
var title = $(this).attr("ows_Title");
var host = $(this).attr("ows_EventHost");
var bdate = $(this).attr("ows_StartDate");
bdate = dateFromSharepoint(bdate);
var edate = $(this).attr("ows_EndDate");
if (edate === null | edate === '') {
edate = bdate
} else {
edate = dateFromSharepoint(edate);
}
var bdatein = moment(bdate).format('MMMM Do YYYY, h:mm a');
var edatein = moment(edate).format('MMMM Do YYYY, h:mm a');
var category = $(this).attr("ows_Category");
var body = $(this).attr("ows_Body");
var loc = $(this).attr("ows_Location");
var auth = $(this).attr("ows_Author");
var created = $(this).attr("ows_Created");
var modified = $(this).attr("ows_Modified").split(" ")[0];
var ID = $(this).attr("ows_ID");
var sumcomms = Number($(this).attr("ows_sumcomms"));
var dateSearchable = moment(bdate).format('MM/DD/YYYY')
body = $(body).text();
auth = auth.substring(auth.indexOf("#") + 1);
host = host.substring(host.indexOf("#") + 1);
category = category.substring(category.indexOf("#") + 1);
if (category.replace(/\s/g, '') === 'WorkinProgress') {
category = 'WIP'
}
if (title == null) {
title = ''
}
if (loc == null) {
loc = "Unspecified"
}
pre.push(category, title, host, bdatein, loc, sumcomms, auth, edatein, ID, body, created, modified, bdate, edate, dateSearchable, '');
dataSet[i] = pre;
i++;
});
}
});
maketables(dataSet, 'FTable');
});
function maketables(dataset, table) {
table = $('#' + table).DataTable({
data: dataset,
sDom: '<"top"lf>rt<"bottom"p>',
iDisplayLength: 50,
bsearching: false,
bInfo: false,
bPaginate: true,
bProcessing: true,
order: [
[12, 'desc']
],
createdRow: function(row, data, dataIndex) {
switch (data[0]) {
case 'WIP':
$(row).find('td:first').addClass('btn btn-success btn-outline').css('min-width','100px').append(' <span class="caret"></span>');
break;
case 'Chalk Talk':
$(row).find('td:first').addClass('btn btn-warning btn-outline').css('min-width','100px').append(' <span class="caret"></span>');
break;
case 'Social':
$(row).find('td:first').addClass('btn btn-primary btn-outline ').css('min-width','100px').append(' <span class="caret"></span>');
break;
default:
$(row).find('td:first').addClass('btn btn-danger btn-outline ').css('min-width','100px').append(' <span class="caret"></span>');
break;
}
},
columns: [{
title: "Category",
name: "category",
className: "details-control",
orderable: true,
DefaultContent: 'Other'
},
{
title: "Title",
name: "title",
orderable: false,
defaultContent: ''
},
{
title: "Host",
name: "host"
},
{
title: "Begins",
name: "bdatein"
},
{
title: "Location",
name: "loc",
visible: false,
defaultContent: 'Not Specified'
},
{
title: "Comments",
name: "totalcomms",
orderable: false,
visible: false,
defaultContent: ''
},
{
title: "Posted By",
name: "author",
orderable: false,
visible: false
},
{
title: "Ends",
name: "edatein",
visible: false,
defaultContent: ''
},
{
title: "ID",
name: "id",
orderable: false,
searchable: false,
visible: false
},
{
title: "Details (full)",
name: "body",
orderable: false,
searchable: false,
visible: false,
defaultContent: ''
},
{
title: "Created Date",
name: "created",
orderable: false,
searchable: false,
visible: false
},
{
title: "Last Modified",
name: "modified",
orderable: false,
searchable: false,
visible: false
},
{
title: "Begins (Full)",
name: "bdate",
orderable: false,
searchable: false,
visible: false
},
{
title: "Ends (Full)",
name: "edate",
orderable: false,
searchable: false,
visible: false,
defaultContent: ''
},
{
title: "Searchable Date",
name: "sDate",
orderable: false,
searchable: true,
visible: false,
defaultContent: ''
},
{
title: "Edit",
DefaultContent: ''
}
],
columnDefs: [{
targets: 15,
render: function(data, type, row) {
if (userName !== null && userName === row[2]) {
return '<a href="javascript:editModal(' + row[8] + ')">Edit</a>';
} else if (userName !== null && userName === row[6]) {
return '<a href="javascript:editModal(' + row[8] + ')">Edit</a>';
} else {
return '';
}
}
}],
"fnDrawCallback": function(oSettings) {
$(oSettings.nTHead).hide();
}
});
$('#FTable tbody').on('click', 'td.details-control', function() {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(dateParts(row.data())).show();
tr.addClass('shown');
}
});
$('#filter-WIP').on('click', function() {
$(this).siblings('.btn').removeClass(function(index, className) {
return (className.match(/(^|\s)full-\S+/g) || []).join(' ');
});
$(this).addClass('full-wip');
table.search('').columns().search('').draw();
table.columns(0).search('WIP').draw();
}
);
$('#filter-Other').on('click', function() {
$(this).siblings('.btn').removeClass(function(index, className) {
return (className.match(/(^|\s)full-\S+/g) || []).join(' ');
});
$(this).addClass('full-oth');
table.search('').columns().search('').draw();
table.columns(0).search('Other').draw();
}
);
$('#filter-Social').on('click', function() {
$(this).siblings('.btn').removeClass(function(index, className) {
return (className.match(/(^|\s)full-\S+/g) || []).join(' ');
});
$(this).addClass('full-soc');
table.search('').columns().search('').draw();
table.columns(0).search('Social').draw();
}
);
$('#filter-CT').on('click', function() {
$(this).siblings('.btn').removeClass(function(index, className) {
return (className.match(/(^|\s)full-\S+/g) || []).join(' ');
});
$(this).addClass('full-ct');
table.search('').columns().search('').draw();
table.columns(0).search('Chalk Talk').draw();
}
);
$('#filter-All').on('click', function() {
$(this).siblings('.btn').removeClass(function(index, className) {
return (className.match(/(^|\s)full-\S+/g) || []).join(' ');
});
$(this).addClass('full-all');
table.search('').columns().search('').draw();
table.columns(0).search('').draw();
}
);
}
答案 0 :(得分：0)
仅使用OAuth的单独功能进行google / outlook日历，并且从未为一组事件实施解决方案