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