Adding a Toggle Daily/Weekly Tasks button to the Project Tasks list view web part

SharePoint is a perfect tool for lightweight project management. The Project Tasks list and its associated list view web part is a popular choice as it can display a Gantt chart of the tasks. However it is not very flexible in its display capabilities unlike its counterpart, MS Project.

One request I’ve had was the allow a weekly view of project tasks rather than the default daily view.  This can be achieved though writing CSS script such as Path To SharePoint explains, however the users want a button to toggle between a daily view and a weekly view depending on which project they are looking at. This can be achieved by inserting some Javascript into the page.

With the example below I’ve done this by utilising the jQuery javascript library:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js” type=”text/javascript”></script>
<script>
$(function() {
var bt1=”<input id=’tlv0′ class=’ms-ButtonHeightWidth’ type=’button’ target=’_self’ value=’Toggle Daily/Weekly’ name=’togglelv’ style=’WIDTH: 140px’ />”;
$(“td.ms-toolbar[width='99%']“).append(bt1);
    $(“#tlv0″).toggle(
      function () {
        $(“table[class='ms-ganttInnerTable'] IMG”).css({“width”:”2px”});
        $(“.ms-ganttDetailTimeUnitRow”).css({“display”:”none”});
        $(“.ms-ganttMajorTimeUnitHeaderCell”).css({“writing-mode”:”tb-rl”,”filter”:”flipv fliph”,”border”:”0″});
      },
      function () {
        $(“table[class='ms-ganttInnerTable'] IMG”).css({“width”:”16px”});
        $(“.ms-ganttDetailTimeUnitRow”).css({“display”:”inline”});
        $(“.ms-ganttMajorTimeUnitHeaderCell”).css({“writing-mode”:”lr-tb”,”filter”:”none”,”border”:”0″});
      }
    );
  });
</script>