How to show 2 calendar’s Data through Client object Model
In some cases we need to show combined data from 2 or many calendars row by row manner
Like below, so there is no way
Use below code to get the data and show like above, in below code “Calendar name1 “ Is first calendar and Calendar name 2 is the second calendar GetDevCalendarItems() gets data for first calendar , we have applied pagesize to get 10 items only if you want you can use DateOverlap and month to get the months data. GetProcessCalendarItems() gets data for 2nd calendar. After getting both calendar data we are combines it and sorting it ascending or descending. And finally we are creating HTML like above.
$(document).ready(function() { ExecuteOrDelayUntilScriptLoaded(GetDevCalendarItems, "sp.js"); });
var Calendarcontext,
web,
CalendaspItems,
position,
nextPagingInfo,
previousPagingInfo,
CalendarlistName = 'Calendar name1,
pageIndex = 1,
pageSize = 10,
Calendarlist,
CalendarcamlQuery,
sortColumn = 'Title';
var Calendarcontext;
var CalendarcamlQuery;
var Developmetsitems = [];
var Processitems = [];
var Allitems = [];
var Developmetcontent;
var Processcontent;
function GetDevCalendarItems() {
Calendarcontext = new SP.ClientContext.get_current();
CalendarcamlQuery = new SP.CamlQuery();
Calendarlist = Calendarcontext.get_web().get_lists().getByTitle(CalendarlistName);
CalendarcamlQuery = new SP.CamlQuery();
CalendarcamlQuery.set_listItemCollectionPosition(position);
CalendarcamlQuery.set_viewXml("<view>" +
"<viewfields>" +
"<fieldref name="EventDate">" +
"<fieldref name="Title">" +
"</fieldref></fieldref></viewfields>" +
"<query> <where> <geq> <fieldref name="EventDate"> "+
"<value includetimevalue="TRUE" type="DateTime"><today></today></value> </fieldref></geq> </where>"+
" <orderby> <fieldref ascending="True" name="EventDate"> </fieldref></orderby></query> "+
"<rowlimit>" + pageSize + "</rowlimit></view>");
CalendaspItems = Calendarlist.getItems(CalendarcamlQuery);
Calendarcontext.load(CalendaspItems);
Calendarcontext.executeQueryAsync(Function.createDelegate(this, onSDevuccess), Function.createDelegate(this, onFail));
}
function GetProcessCalendarItems()
{
Calendarcontext = new SP.ClientContext.get_current();
Calendarlist = Calendarcontext.get_web().get_lists().getByTitle(Calendar name 2);
CalendarcamlQuery = new SP.CamlQuery();
CalendarcamlQuery.set_listItemCollectionPosition(position)
CalendarcamlQuery.set_viewXml("<view>" +
"<viewfields>" +
"<fieldref name="EventDate">" +
"<fieldref name="Title">" +
"</fieldref></fieldref></viewfields>" +
"<query> <where> <geq> <fieldref name="EventDate"> "+
"<value includetimevalue="TRUE" type="DateTime"><today></today></value> </fieldref></geq> </where>"+
" <orderby> <fieldref ascending="True" name="EventDate"> </fieldref></orderby></query> "+
"<rowlimit>" + pageSize + "</rowlimit></view>");
CalendaspItems = Calendarlist.getItems(CalendarcamlQuery);
Calendarcontext.load(CalendaspItems); Calendarcontext.executeQueryAsync(Function.createDelegate(this, onProcessSuccess),Function.createDelegate(this, onFail));
}
function onSDevuccess() {
var CalendarlistEnumerator = CalendaspItems.getEnumerator();
var item;
while (CalendarlistEnumerator.moveNext()) {
item = CalendarlistEnumerator.get_current();
//Developmetsitems.push("
<br />
" + item.get_item('Title') + "<br />
" + item.get_item('EventDate').format("MM/dd/yyyy") + "<br />
Development Oppertunities<br />
");
Allitems.push({date: item.get_item('EventDate').format("MM/dd/yyyy"), title: "-" + item.get_item('Title'),Category:'DevelopmentOppertunities'});
}
Developmetcontent = Developmetsitems.join();
GetProcessCalendarItems();
}
function onProcessSuccess() {
var CalendarlistEnumerator = CalendaspItems.getEnumerator();
var item;
while (CalendarlistEnumerator.moveNext()) {
item = CalendarlistEnumerator.get_current();
Allitems.push({date: item.get_item('EventDate').format("MM/dd/yyyy"), title: "-" + item.get_item('Title'),Category:'Process'});
}
Allitems.sort(function(Newsa,Newsb) {
return new Date(Newsa.date) - new Date(Newsb.date);
});
var Keydates;
var keydatesitemcount =keydatesitemcount = Allitems.length;
for ( var newcount = 0; newcount < keydatesitemcount; newcount ++ ) {
var News = Allitems[newcount];
Keydates = Keydates + "" + News.date + "<br />
" + News.title + "<br />
"+ News.Category +"<br />
";
}
Keydates = Keydates .replace('undefined','');
var finalContent= "<br />
" + Keydates +"<table class="KeyDates"></table>
";
$('#CalendarContent').html(finalContent);
}
Use below code to get the data and show like above, in below code “Calendar name1 “ Is first calendar and Calendar name 2 is the second calendar GetDevCalendarItems() gets data for first calendar , we have applied pagesize to get 10 items only if you want you can use DateOverlap and month to get the months data. GetProcessCalendarItems() gets data for 2nd calendar. After getting both calendar data we are combines it and sorting it ascending or descending. And finally we are creating HTML like above.
$(document).ready(function() { ExecuteOrDelayUntilScriptLoaded(GetDevCalendarItems, "sp.js"); });
var Calendarcontext,
web,
CalendaspItems,
position,
nextPagingInfo,
previousPagingInfo,
CalendarlistName = 'Calendar name1,
pageIndex = 1,
pageSize = 10,
Calendarlist,
CalendarcamlQuery,
sortColumn = 'Title';
var Calendarcontext;
var CalendarcamlQuery;
var Developmetsitems = [];
var Processitems = [];
var Allitems = [];
var Developmetcontent;
var Processcontent;
function GetDevCalendarItems() {
Calendarcontext = new SP.ClientContext.get_current();
CalendarcamlQuery = new SP.CamlQuery();
Calendarlist = Calendarcontext.get_web().get_lists().getByTitle(CalendarlistName);
CalendarcamlQuery = new SP.CamlQuery();
CalendarcamlQuery.set_listItemCollectionPosition(position);
CalendarcamlQuery.set_viewXml("<view>" +
"<viewfields>" +
"<fieldref name="EventDate">" +
"<fieldref name="Title">" +
"</fieldref></fieldref></viewfields>" +
"<query> <where> <geq> <fieldref name="EventDate"> "+
"<value includetimevalue="TRUE" type="DateTime"><today></today></value> </fieldref></geq> </where>"+
" <orderby> <fieldref ascending="True" name="EventDate"> </fieldref></orderby></query> "+
"<rowlimit>" + pageSize + "</rowlimit></view>");
CalendaspItems = Calendarlist.getItems(CalendarcamlQuery);
Calendarcontext.load(CalendaspItems);
Calendarcontext.executeQueryAsync(Function.createDelegate(this, onSDevuccess), Function.createDelegate(this, onFail));
}
function GetProcessCalendarItems()
{
Calendarcontext = new SP.ClientContext.get_current();
Calendarlist = Calendarcontext.get_web().get_lists().getByTitle(Calendar name 2);
CalendarcamlQuery = new SP.CamlQuery();
CalendarcamlQuery.set_listItemCollectionPosition(position)
CalendarcamlQuery.set_viewXml("<view>" +
"<viewfields>" +
"<fieldref name="EventDate">" +
"<fieldref name="Title">" +
"</fieldref></fieldref></viewfields>" +
"<query> <where> <geq> <fieldref name="EventDate"> "+
"<value includetimevalue="TRUE" type="DateTime"><today></today></value> </fieldref></geq> </where>"+
" <orderby> <fieldref ascending="True" name="EventDate"> </fieldref></orderby></query> "+
"<rowlimit>" + pageSize + "</rowlimit></view>");
CalendaspItems = Calendarlist.getItems(CalendarcamlQuery);
Calendarcontext.load(CalendaspItems); Calendarcontext.executeQueryAsync(Function.createDelegate(this, onProcessSuccess),Function.createDelegate(this, onFail));
}
function onSDevuccess() {
var CalendarlistEnumerator = CalendaspItems.getEnumerator();
var item;
while (CalendarlistEnumerator.moveNext()) {
item = CalendarlistEnumerator.get_current();
//Developmetsitems.push("
<br />
" + item.get_item('Title') + "<br />
" + item.get_item('EventDate').format("MM/dd/yyyy") + "<br />
Development Oppertunities<br />
");
Allitems.push({date: item.get_item('EventDate').format("MM/dd/yyyy"), title: "-" + item.get_item('Title'),Category:'DevelopmentOppertunities'});
}
Developmetcontent = Developmetsitems.join();
GetProcessCalendarItems();
}
function onProcessSuccess() {
var CalendarlistEnumerator = CalendaspItems.getEnumerator();
var item;
while (CalendarlistEnumerator.moveNext()) {
item = CalendarlistEnumerator.get_current();
Allitems.push({date: item.get_item('EventDate').format("MM/dd/yyyy"), title: "-" + item.get_item('Title'),Category:'Process'});
}
Allitems.sort(function(Newsa,Newsb) {
return new Date(Newsa.date) - new Date(Newsb.date);
});
var Keydates;
var keydatesitemcount =keydatesitemcount = Allitems.length;
for ( var newcount = 0; newcount < keydatesitemcount; newcount ++ ) {
var News = Allitems[newcount];
Keydates = Keydates + "" + News.date + "<br />
" + News.title + "<br />
"+ News.Category +"<br />
";
}
Keydates = Keydates .replace('undefined','');
var finalContent= "<br />
" + Keydates +"<table class="KeyDates"></table>
";
$('#CalendarContent').html(finalContent);
}

No comments:
Post a Comment