Using gantt view with the Calendar List
Use the following script to a content editor webpart on the view page
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript">
// SPGanttControlPanel by Jesper G. Simonsen, http://jesper-simonsen.blogspot.dk/2013/11/using-gantt-view-with-sp-calendar.html
// It's recommended to download the jquery and refer to it locally, e.g. to a document library on your site
</script>
<script type="text/javascript">
// Modify these two links to get the New and Edit button to work
var Link2NewItem="Replace this text with the Add new events shortcut of your calendars Current Events view (rightclick + copy shortcut)"
var StrEditLink="Replace this text with your calendars Current Events view url (goto the view + F4 + CtrlC)"
var InitialZoomIn=1
var ZoomStep=1
// Only modify after this line if you know what you are doing:)
var SavedGridControl=null
ExecuteOrDelayUntilScriptLoaded(function(){
var oldGanttControl = SP.GanttControl
SP.GanttControl = function(){
oldGanttControl.call(this)
var oldInit = this.Init
this.Init = function(jsGridControl, jsRawGridData, params){
oldInit.call(this, jsGridControl, jsRawGridData, params)
SavedGridControl=jsGridControl
DoSetSplitterPosition(jsGridControl)
DoSetWidth(jsGridControl)
ZoomIn(jsGridControl, InitialZoomIn)
DoSetHeight(jsGridControl)
scrollToToday()
}
}
}, "SPGantt.js")
function DoSetSplitterPosition(grid){
grid.SetSplitterPosition(200)
}
function DoSetWidth(grid) {
var columns = grid.GetColumns();
try{$.each(columns, function(key, value){try{value.width=200}catch(err){}})}catch(err){alert(err.message)};
grid.UpdateColumns(grid.parentNode.jsgridtableviewparams.columns);
}
function DoSetHeight(grid) {
try {
var tableHeight = $("table [id$='_ListViewWebPartJSGrid_leftpane_mainTable']")[0].offsetHeight;
var LVWPGrid = $("div [id$='_ListViewWebPartJSGrid']")[0];
LVWPGrid.style.height = tableHeight;
var divs = LVWPGrid.getElementsByTagName("div");
divs[1].style.height = tableHeight;
} catch (ex) {
alert(ex.toString());
}
}
function DoZoomIn(){
ZoomIn(SavedGridControl, ZoomStep)
}
function DoZoomOut(){
ZoomOut(SavedGridControl, ZoomStep)
}
function ZoomIn(grid, zoomstp){
grid.SetGanttZoomLevel(grid.GetGanttZoomLevel()-zoomstp)
}
function ZoomOut(grid, zoomstp){
grid.SetGanttZoomLevel(grid.GetGanttZoomLevel()+zoomstp)
}
function scrollToToday() {
$("div [id$='_ListViewWebPartJSGrid']")[0].jsgrid.ScrollGanttToDate(new Date())
}
function scrollToTask() {
this.ScrollGanttToTask()
}
function openNewDialog() {
var options = SP.UI.$create_DialogOptions();
options.title = "New...";
options.width = 800;
options.height = 700;
options.url = Link2NewItem;
options.dialogReturnValueCallback = dialogCallback;
SP.UI.ModalDialog.showModalDialog(options);
}
function dialogCallback(dialogResult, returnValue) {
if(dialogResult == SP.UI.DialogResult.OK) {
location.reload();
}
}
function DoEditLink() {
window.location.assign(StrEditLink);
}
</script>
</head>
<body>
<table>
<tr>
<td>
<button type=button onclick="openNewDialog()">New...</button>
</td>
<td>
<button type=button onclick="DoEditLink()">Edit...</button>
</td>
<td>
<button type=button onclick="DoZoomIn()">Zoom in</button>
</td>
<td>
<button type=button onclick="DoZoomOut()">Zoom out</button>
</td>
<td>
<button type=button onclick="scrollToToday()">Today</button>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Comments
Post a Comment