Home > SharePoint Advancements > How to freeze the left column on the SharePoint Gantt Calendar

How to freeze the left column on the SharePoint Gantt Calendar

To freeze the left column on the SharePoint Gantt Calendar follow these steps.  You need atleast designer rights on the page to do this.

1.  On your SharePoint Gantt Calendar page, edit your page and add the Content Editor Web Part to your page.
2.  Edit the Content Editor Web Part and click the “Source Editor…” button
3.  Inside the source editor copy and paste the following CSS style code below.

empty-cells: show;
.ms-ganttMajorTimeUnitHeaderCell {
writing-mode: rl-tb;
vertical-align: top;
top: expression(this.offsetParent.scrollTop);
position: relative;
z-index: 15;
column-span: 1;
background-color: white;
width: 16px;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
z-index: 20;
background-color: white;
top: expression(this.offsetParent.scrollTop);
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
background-color: white;
z-index: 30;
.ms-ganttDetailTimeUnitRow {
position: relative;
top: expression(this.offsetParent.scrollTop);
background-color: white;

4.   Apply and save your changes.
5.  Now when you scroll to the right to view all the events on the SharePoint Gantt Calendar the left side column will be froze and inplace.


  1. CK
    March 3, 2011 at 4:01 pm

    Thanks SO much. So easy.

  2. Kari
    June 24, 2011 at 5:31 pm

    Works perfect in a gannt view!!! Awesome job! What about the code for the same idea for a datasheet view? As in, being able to freeze the first column in the datasheet view…

    • June 27, 2011 at 3:16 pm

      Hi Kari. There is no way “out of the box” or with the use of JQuery (that I know of) to freeze the columns for the datasheet view. The only way I know how is to create a custom datasheet view via SharePoint designer and use custom CSS and a little javascript to mimic the freeze of excel columns.

  3. Grim Repair
    April 13, 2012 at 3:04 pm

    ROFLMAO! You should be able to right click and ‘freeze column’ or something. I guess asking “how could Microsoft miss such obvious functionality” is a silly question.

  4. July 2, 2013 at 6:53 pm

    This didn’t work for me at all in 2010. I entered as explained into the Source Editor, clicked “OK” (there was no “Apply”), refreshed the page – and it still ALL scrolled over. I did get an indicator that the “HTML was modified” after clicking “OK”.

    • July 8, 2013 at 11:02 am

      Hi Patrick, I have yet to apply this on SP2010. This was for MOSS 2007. I will look into this and see if I get the same results as you. I will report back my testing.

  5. sidha
    November 6, 2013 at 1:07 am

    Thanks a lot!!
    similarly is there a way to show the bar chart beside left column to start from current day with containing all the events of the list though some events start few days before current day(showing a part of that event bar starting from current day), to view 90 days from current day. I tried filtering but it will do show only the events that will be starting from equal to or greater than current day, but I don’t that way. Please suggest me its possibilities through out of the box, designer and try to give me some possible ways.

  6. Chumile Nuli
    November 28, 2013 at 9:02 am

    Great post and works like magic!!! Thank you, my client is very happy and you have made me look good.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: