Calendar – Weekdays only

Posted on by

weekdays2A frequent request from SharePoint users is to remove weekends from the calendar view.

Back in October, a reader, “Delpfine“, posted the question on my blog. And last week, another reader, Chris Howell, pointed to a script on Vince Rothwell’s blog.

Unfortunately, the proposed solution has several issues (see comments), so I decided to write my own.

Calendar settings

My first step was to modify the calendar settings:
Site Actions | Site Settings | Site Administration | Regional Settings

I changed the “First day of week” to Monday. This way, Saturday and Sunday are pushed to the last two columns.

The script

Add a CEWP to your page, under the calendar, and link it to the following script:

<script type="text/javascript">
//
// Calendar - Weekdays only
// Questions and comments: Christophe@PathToSharePoint.com
//
// Regional settings: week starts on Monday.
// Change the CalendarWidth value to adjust the width of the calendar.
// 742 pixels is the default SharePoint value.
// Set the value to zero for automatic layout.
// 

var CalendarWidth = 742;

var theCalTable = document.getElementById("CalViewTable1");
if (theCalTable != null)
{
theCalTable.rows[0].cells[0].getElementsByTagName("IMG")[0].width = CalendarWidth;

// Number of columns to remove
var ColCount = 0;
switch (theCalTable.parentNode.id)
{
case "MontlyViewDefault_CalendarView":
  ColCount = 2;
break;
case "WeeklyViewDefault_CalendarView":
  ColCount = 6;
break;
}

var theCalendar = theCalTable.rows[2].cells[0].firstChild ;
if (theCalendar.nodeType!=1) {theCalendar = GetFirstChildElement(theCalTable.rows[2].cells[0]);} // for Firefox

for (var i=0; i
<theCalendar.rows.length; i++)
{
var imax=0;
do {
var lastchild = theCalendar.rows&#91;i&#93;.lastChild ;
if (lastchild.nodeType!=1) {theCalendar.rows&#91;i&#93;.removeChild(lastchild); continue;} // for Firefox
if ((lastchild.className == "ms-cal-week") || (lastchild.className == "ms-cal-weekB")) {break;}
imax = imax + lastchild.colSpan;
if (imax <= ColCount) {
theCalendar.rows&#91;i&#93;.removeChild(lastchild);
}
} while (imax < ColCount)
}
}
</script>
<style type="text/css">
.ms-cal-weekname {width:20%;}
</style>

The script scrolls through the calendar and removes the columns for Saturday and Sunday. It works for both the month view and week view. I tested it in Internet Explorer 7 and Firefox.

Remember to adjust the value of the width (“CalendarWidth”). Set it to zero for automatic layout, for example if you combine the script with the “tiny calendar” style.

The script won’t work in week view if you include weekend events (for example a team picnic on Sunday from 11 am to 4 pm). It’ll work for multiple day events that include a weekend (for example vacations from December 22nd to January 2nd).

The live demo:
http://8002.freesharepoint2007.com/default.aspx

Our toolbox

We now have a nice toolset to tweak the look of SharePoint calendars:
– remove weekends (this post)
– reduce the size
– add color coding
– add HTML, like hover effects
– include an expand/collapse button

Now, wouldn’t it be nice if we could display a same calendar across multiple sites? Well, let’s keep some for next year!

95 thoughts on “Calendar – Weekdays only”

  4. Great code, thanks a lot.
    I am using my sharepoint site as a Booking system for my College’s IT Suites and there is one calendar for each room. I am displaying both calendars on the default.aspx page, but the code only works on the First calendar.

    After looking at the HTML, WSS calls both calendars the same thing, using the same DIV IDs. After moving the scripts about a bit, it would only still work on the first calendar. Any suggestions?

    Thanks for the help & Great Code
    DimDom

  5. I also am having an issue with Multiple calendars on the same page. It does only apply to the first calendar on the page, and not to the second one. How do we fix this?

    Thanks

  6. I have 2 calendars on a SP page. The “weekday only” seems to only work on the calendar on top. I tried putting a second “weekday only” webpart below the second calendar and it doesn’t seem to work.
    Any ideas?

    • Seems that there are a few folks have the same issue on the Week Day only working on one calendar and not 2. I did try the suggestion by replacing CalViewTable1 with CalViewTable2 and it didn’t work. 😦

      • I did a quick test with 3 calendars, and actually SharePoint gave them the following ids: CalViewTable1, CalViewTable13 and CalViewTable15. I have no idea why it picks these values, but let me know if they work for you.

      • Hi Christophe.

        Replacing CalViewTable1 with CalViewTable12 did not work (mine was 12, not 13 or 15).

        Is it possible to make it generic, eg like CalViewTable* when searching on the file system?

        Thanks!

      • Actually, I forgot to mention – it did not work for me when my calendars were in Tabs. I wonder if it has something to do with a conflict between the tabs code and the weekday only calendar code?

  8. Hi
    How we can skip weekend between start date and end date.

    i.e if have start date which is Friday and I add four days in start date, now end date should skip Saturday and Sunday and end date shuold be Thursday instead of Tuesday.

    Please let me know how I can achieve that.

    Thanks
    Mas

  10. I’m using it, and I thought everything was working fine, but then someone created a 2 week event so that put data for the Saturday and Sundays.

    In my month view now, the columns for Sat/Sun are appearing again but empty.

    My week view actually looks good.

    Any suggestions?

  11. From your directions: Add a CEWP to your page, under the calendar, and link it to the following script:

    Where do I go to link the CEWP to the calendar to? I have it created but I don’t see anything in the calendar to create a link to a CEWP.

    Thanks.

    • Hi Bob.

      The CEWP gets linked to the Script (ie the HTML) not the calendar. The Script affects the way the calendar appears when the page loads.

  12. I didn’t see an answer to my question about the weekends, in the month view, if someone creates a 2 week event that spans across the weekends.

    Is the Month view calendar suppose to display the weekends but no data?

    Does it do that for everyone else?

  13. sorry, I mean to say the columns for the weekend appear again, but the headers for the weekends remain blank.

  16. For some reason, mine shows Sun-Thurs when I implement the script. I set Monday as the beginning of the week. Is there something else I need to make sure to do?

    • The script actually knows nothing about the days, it “simply” removes the last two columns. I’d recommend that you double check your site settings.

    • I had the same problems. Check your personal Regional Settings, they may be overriding the site’s Regional Settings. My site was set to start the work week on Monday, but I too kept seeing Sunday at the start. When I went into my personal Regional Settings, sure enough, it was still set to Sunday.

  17. Hi Christophe,
    Thanks for your continuos efforts, these scripting for CEWP are great, however I’m looking for a few things:
    I need a calendar view to display 3 month (quarterly) in the same view and to display only the weekends.
    1- Is there a way to display only the weekends?
    2- How can I make a quaterly / year view?
    If you can provide me some guidance it will be great I will figure out the rest.
    Thanks in advance for you help.
    Kind regards,

  19. Christophe,
    Your blog and tips are awesome, thanks for the hard work.

    Is there a way to display quarterly or yearly months?

    Also, in the slider Gnatt Chart, can we display up to 20 years using the CEWP?

    Thanks

    Kevin

  21. I notice that you have a Button on your Demo page that removes the weekends. Is there a way to have the weekends hidden unless you click a similar button that returns them till you refresh the page?

    • With my current code, the weekends are completely removed. Another approach would be to simply hide them, in which case you could use a button to toggle the weekends.

  23. @ Anonymous — the code must be pasted into the “HTML” content option when you Modify Shared Webpart for the CEWP (Content Editor Web Part). This appears as a button on the right side bar.

    @Christophe — I am having an issue where sharepoint isn’t recognizing the changes I make to the regional settings. After I change them, they appear changed (if i go back to change them again, my changes are saved), but on the actual website it still uses the default start and end times of day, and begins the week with Sunday! Do you know what might be causing this? Thanks!

  24. Hello,

    Does this script to remove weekends work in web pages in SharePoint 2010? I have tried adding the above javascript into a CEWP in a SharePoint 2010 site page but the weekend columns still render in the calendar.

    Thanks

  25. I’m receiving some graphic issues with this script. It’s occuring on the right side of the calendar and only if the item is a multiple day “All Day Event Item” which includes a Saturday &/or Sunday.

    Has anyone else experienced this? How do I fix it?

  26. Is there a way to group the weekends together on the right hand side. I know you can set the “start of the work week” but I do not have access to the server. Plus I only want ir to affect one calendar. Thanks

  27. Hi, is it possible using this type of code to remove the time grid from the week view? I only have all day events in my calendar and would like to remove the unused space, that is the list in 1 hour slots…

    Many thanks.

    • Chris, I haven’t tried, but I’d say yes. You could also start from a month view and only keep the current week.
      Using css may work as well, and will be more efficient than a script (see my posts on tiny calendars for example).

      • I have this up and it works great. However, I also need to start from the month view and only keep the current week. Did anyone figure that out yet?

  29. I think I just a bit of a flaw in this. It’s great if everyone is in the same office and their “My Regional Settings” are set to follow the site’s Regional Settings, but if you have people in different offices in different time zones, it becomes to be a bit of a problem. Each and every user would manually need to have their work week set to start on Monday, which by default they are not.

  30. Works great! Had to change the regional setting so weekday starts on Monday, but otherwise superb. Thank you.

  31. Thanks so much for this.

    I have a question: A fellow worker said that this doesn’t work with Sharepoint 2003, this is correct?

    Cheers,

  32. Jquery version :

    $(document).ready(function(){
    var calendar = $(‘table#CalViewTable1’);
    var pCalendarId = calendar.parent().attr(‘id’);

    var ColCount = 0;
    if(pCalendarId != null){
    switch (pCalendarId)
    {
    case “MontlyViewDefault_CalendarView”:
    ColCount = 2;
    break;
    case “WeeklyViewDefault_CalendarView”:
    ColCount = 6;
    break;
    }
    }

    calendar.find(‘tbody > tr > td > table > tbody:nth(1) > tr’).each(
    function(index, elem){
    var cols = $(elem).find(‘td,th’);

    var i = 0;
    do{
    var lastChild = cols[cols.length-1];
    if ((lastChild.className == “ms-cal-week”) || (lastChild.className == “ms-cal-weekB”)) {break;}
    i += lastChild.colSpan;
    if( i <= ColCount){
    $(lastChild).remove();
    cols.length = cols.length-1;
    }
    }while( i < ColCount );
    }
    )

  34. Kris’s comment about multi-time zone team members is a problem for me. I likewise have members in all four US time zones, so this solution would not work unless they all manually set their personal regional settings to start the week on Monday (which for the large number of members would be a pain not worth attempting).
    Is there no other way to do this given that setting restriction?

    • For instance, instead of removing the last two columns which are made to be Sat & Sun, is there a way of removing the first and last column?

  35. I have a solution for getting this to work with weekend events. I simply created a calculated column that determines if an event is on the weekend. I then created a view using this column to filter out the weekend only events. It does not remove events that cross the weekend. I then use your code to remove the 2 weekend days and it works well enough in both week and month view. Here is the formula for what I used:

    =IF(AND((IF(WEEKDAY([Start Time])=1,”Yes”,IF(WEEKDAY([Start Time])=7,”Yes”,”No”))
    )=”Yes”,(IF(WEEKDAY([End Time])=1,”Yes”,IF(WEEKDAY([End Time])=7,”Yes”,”No”)))=”Yes”),”Yes”,IF(AND((IF(WEEKDAY([End
    Time])=1,”Yes”,IF(WEEKDAY([End Time])=7,”Yes”,”No”)))=”Yes”,(DATEDIF([Start Time],[End Time],”d”))<=2),"Yes","No"))

  36. Hello. Spevilgenius, is this for SP 2010?

    Christophe, I’m completely new to SP so can you explain what OOTB is? Is that the default calendar in SP? Also, this free full calendar you are talking about, is that just any calendar or a microsoft calendar or… ? Sorry for the dumb question!

  37. Right now my calendar is showing a Sunday thru Thursday week… I don’t have the admin rights to change the site settings to Monday first day of week. Is there another way to attack this so that I have a Monday thru Friday week?

  38. I have a client that wants to show weekends only, is there a way to change the code to only show weekends instead of week days?

  39. Has anyone discovered or developed a way to achieve hidden weekends in SP2010? I’m showing a week-view calendar in a web part on a site’s home page, if that makes a difference.

    • What some people have done is use a third party calendar view built with JavaScript, instead of the default SharePoint one. This gives you full control on the rendering.

  42. Hi Christophe

    Thanks for providing such a nice article. I have little different requirement. I wanted to hide the time from the calendar view and wanted to show only the title for each item. Would appreciate any help.

    • I too have a similar question, but I’m not that experienced in code 😦

      Christophe, I found a solution that uses another CEWP but it doesn’t work when the tiny calendar CEWP is on the same page. Could you provide the code that I can add to your tiny calendar CEWP that would get rid of the time?

      This is the code I used:

      td.ms-cal-monthitem A NOBR {display:none;}

        • Thanks for your response. I just tried adding those lines of code to a separate webpart but it doesn’t work. I’m thinking now the problem lies in the text file that is housed on the site that the color coding function uses (TextToHTML-v2.1.1.htm). When I’m using that it seems to override the other CEWP. Not sure if it’s relevant but I don’t have the option of checking all day event since this is a calendar view within a task list.

          Any more ideas on how remove the time on single day events?

  43. Hi Christophe

    Currently i am using sharepoint 2007.
    I want to add background colors to weekends(saturday,sunday). Is it possible to do?
    Is there any sample code u have?

  44. Hi. the weekends come back after clicking the previous/next arrows… It’s also occurring in the demo site. 🙂 how do you hide the weekends after clicking the next/previous arrow buttons? thanks! 🙂

  45. Hi,
    I still see the weekend. I’m assuming that if the calendar is in IE, the Firefox code won’t kick in. I found a typo (montly) but I don’t think that is a problem(I corrected it).
    I’ve reset the day of the week in Regional Settings and the only things i changed was: var CalendarWidth = 0; and got rid of .ms-cal-weekname {width:20%;} . What am I doing wrong?

  46. I’m using Sharepoint 2010 and I still cannot get the script to work to only show week days by following your instructions. Is this because I have another script that is linked to the page for color coding? Any help would be greatly appreciated!

        • I don’t have a solution for SP 2010. Hiding weekends on the calendar itself should not be too difficult, but the issue will be with the events, in particular multi-day events.
          I reported in another post a bug with the SP 2010 calendar, which explains why I didn’t want to invest much time on it. We’ll see how it goes with SP 2013…

  47. So I implemented this for a vacation request process for my company, and it was working great. But our HR person just told me (and I’m almost embarrassed to even say this) that the employees are having problems, and requesting off the wrong dates, because the “date picker” calendars on the request form ALSO start with Monday instead of Sunday when you switch the site settings to list weekends at the end of the week. Is there any way to either control these picker calendars to remove weekends or override regilnal settings, or to implement your weekend removal method w/o having the week start on Monday? Thanks1

    • That’s an unexpected side effect! I don’t know how to tweak the date pickers. As for the weekend removal method, it is certainly possible but would require a rewrite of the current code.

      • I gave modifying the code a shot and it looked like it was working out, but I had introduced an odd side-effect where it would show Monday as the first day, but display Monday’s contents on Tuesday. The rest of the week was fine, just for some reason Tuesday’s content disappeared.

        I’m wondering if it would be easier to just modify the way the days are displayed for that specific calendar? Do you happen to know if the first day of the week can be controlled on a per-calendar basis in script?

  48. Can this be done with an existing calendar. I changed my Regional Settings and it worked just fine on a NEW calendar; however, I tried it on an existing calendar on another site and it took off Friday and Saturday.

Comments are closed.