ShowWorkDays

Show Work Days only in SharePoint Calendar.

by Joe Cisneros

HTML

<DIV id=AsynchronousViewDefault_CalendarView><DIV class=ms-acal-header width="100%">
<TABLE cellSpacing=0 border=0 cellPadding=0 width="100%">
<TBODY>
<TR>
<TD style="WIDTH: 24px"><A id=WPQ3_nav_prev_a title="Previous Month" href="javascript:MoveToDate('9\u002f25\u002f2013','WPQ3');"></A></TD>
<TD style="WIDTH: 24px"><A id=WPQ3_nav_next_a title="Next Month" href="javascript:MoveToDate('11\u002f25\u002f2013','WPQ3');"></A></TD>
<TD><SPAN id=WPQ3_nav_header class=ms-acal-display>October, 2013 </SPAN></TD>
<TD id=WPQ3_entitySpan class=ms-acal-headerentity align=right></TD></TR></TBODY></TABLE></DIV>
<DIV style="DISPLAY: none" id=WPQ3_err class=ms-acal-error></DIV>
<DIV id=ctl00_m_g_055e265b_8f25_40b6_8dd0_22f09d1bf291_ctl01_ctl00_ctl00 class=ms-acal-rootdiv ctxid="WPQ3">
<TABLE class=ms-acal-month cellSpacing=0 summary="Monthly graphical Calendar View" cellPadding=1 border=1 width="100%">
<TBODY>
<TR>
<TH></TH>
<TH class=ms-acal-month-top><NOBR><SPAN style="DISPLAY: none">Sunday</SPAN><SPAN style="DISPLAY: inline">S</SPAN></NOBR></TH>
<TH class=ms-acal-month-top><NOBR><SPAN style="DISPLAY: none">Monday</SPAN><SPAN style="DISPLAY: inline">M</SPAN></NOBR></TH>
<TH class=ms-acal-month-top><NOBR><SPAN style="DISPLAY: none">Tuesday</SPAN><SPAN style="DISPLAY: inline">T</SPAN></NOBR></TH>
<TH class=ms-acal-month-top><NOBR><SPAN style="DISPLAY: none">Wednesday</SPAN><SPAN style="DISPLAY: inline">W</SPAN></NOBR></TH>
<TH class=ms-acal-month-top><NOBR><SPAN style="DISPLAY: none">Thursday</SPAN><SPAN style="DISPLAY: inline">T</SPAN></NOBR></TH>
<TH class=ms-acal-month-top><NOBR><SPAN style="DISPLAY: none">Friday</SPAN><SPAN style="DISPLAY: inline">F</SPAN></NOBR></TH>
<TH class=ms-acal-month-top><NOBR><SPAN style="DISPLAY: none">Saturday</SPAN><SPAN style="DISPLAY: inline">S</SPAN></NOBR></TH></TR>
<TR class=ms-acal-summary-dayrow>
<TH title="September 29 - October 05" rowSpan=2 date="9/29/2013" evtid="week">
<DIV class=ms-acal-month-weeksel></DIV></TH>
<TD date="9/29/2013"...

CSS

.hide
{
    display:none;
}

JavaScript

// This won't work with if UserProfile region settings are configured differently in MySite.  The solution would be to find out which TH header columns have "Saturday" and "Sunday" text in them (.ms-acal-month-top).  Plan to rewrite this in JQuery
var matchClass ='ms-acal-month';
var tblCal = null;
var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ')
                > -1) {
             if(elems[i].rows != null)          
             { tblCal = elems[i]; break;}
        }
    }

if(tblCal != null)
{
    var intRowCount = 0;
    if(tblCal.rows.length != null)
    {
        intRowCount = tblCal.rows.length;
    }
    for(var intIndex = 0; intIndex < intRowCount;intIndex++) 
    {
        if(tblCal.rows[intIndex].cells.length>1)
        {
           tblCal.rows[intIndex].cells[1].classList.add('hide');
        }
        if(tblCal.rows[intIndex].cells.length>5)
        {         tblCal.rows[intIndex].cells[tblCal.rows[intIndex].cells.length-1].classList.add('hide');
        }       
    }
}