fullyearIn SharePoint, one limitation of the Gantt view is that there is no option to adjust the scale. Only a couple weeks are visible on your screen.

How can we change this to view 6 months or one year? Last month, I showed how to shrink a month calendar. Today’s the turn of the Gantt view.

The method

Just like the calendar, the Gantt view has a bone structure: images invisible to the naked eye with a width of 16 pixels. So once again we’ll apply our Jivaro-like technique and reduce their size using CSS.

As usual, use a CEWP to drop the code on your page.

An example of code

Here is an example of CSS for Internet Explorer:

<style type="text/css">
.ms-ganttInnerTable IMG {width:2px;}
.ms-ganttDetailTimeUnitRow * {display:none;}
.ms-ganttInnerTable .ms-ganttMajorTimeUnitHeaderCell {writing-mode: tb-rl;filter: flipv fliph;border:0;}
</style>

What this code does:
- change the images width from 16 to 2 pixels.
- remove the display of weekdays
- rotate the dates to display them vertically

Note that with the new scale, the rounded edges are not visible anymore, and milestones shrink too. Also, this won’t work in other browsers like Firefox as they won’t rotate the text.

For a wider scale, just change the images width, for example:
.ms-ganttInnerTable IMG {width:4px;}

Update – I have set up a live demo:
http://8002.freesharepoint2007.com/Lists/Gantt/GanttDefault.aspx
Use the slider to modify the Gantt’s width.

To take this further

My example is very simple and CSS only. You can create better effects and improve cross-browser compatibility with a pinch of JavaScript. For example, we could imagine to include a slider to make the scale dynamic.
And of course the same technique applies if on the contrary you want to expand the scale!

If you are looking for other features, like color coding or task grouping, check out this other method.

Update: the script to add a slider to the Gantt view is available here!

Possibly related posts: (automatically generated)