--- a/calendar/base/content/calendar-views.js
+++ b/calendar/base/content/calendar-views.js
@@ -755,26 +755,16 @@ function selectAllEvents() {
     var end = currentView().endDay.clone();
     end.day += 1;
 
     composite.getItems(filter, 0, currentView().startDay, end, listener);
 }
 
 let cal = cal || {};
 cal.navigationBar = {
-    onLoad: function loadNavigationBar() {
-      let viewTabs = document.getElementById("view-tabs");
-      for (let i = 0; i < viewTabs.childNodes.length; i++) {
-          let node = viewTabs.childNodes[i];
-          if (node.localName == "tab") {
-              node.setAttribute("style", "min-width: " + node.label.length + "em;");
-          }
-      }
-    },
-
     setDateRange: function setDateRange(aStartDate, aEndDate, aToolTipTexts) {
         let docTitle = "";
         if (aStartDate) {
             let intervalLabel = document.getElementById("intervalDescription");
             let firstWeekNo = getWeekInfoService().getWeekTitle(aStartDate);
             let secondWeekNo = firstWeekNo;
             let weekLabel = document.getElementById("calendarWeek");
             if (aStartDate.nativeTime == aEndDate.nativeTime) {
@@ -798,13 +788,8 @@ cal.navigationBar = {
         if (document.getElementById("modeBroadcaster").getAttribute("mode") == "calendar") {
             document.title = (docTitle ? docTitle + " - " : "") +
                 calGetString("brand", "brandShortName", null, "branding");
         }
         let viewTabs = document.getElementById("view-tabs");
         viewTabs.selectedIndex = getViewDeck().selectedIndex;
     }
 };
-function loadNavigationBar() {
-    cal.navigationBar.onLoad();
-}
-
-window.addEventListener("load", loadNavigationBar, false);

--- a/calendar/base/content/widgets/calendar-widget-bindings.css
+++ b/calendar/base/content/widgets/calendar-widget-bindings.css
@@ -71,8 +71,12 @@ minimonth-header {
 
 minimonth-header[readonly="true"] {
   -moz-binding: url("chrome://calendar/content/widgets/minimonth.xml#minimonth-header");
 }
 
 dragndropContainer {
    -moz-binding: url(chrome://calendar/content/widgets/calendar-widgets.xml#dragndropContainer);
 }
+
+tab[calview] {
+   -moz-binding: url(chrome://calendar/content/widgets/calendar-widgets.xml#view-tab);
+}

--- a/calendar/base/content/widgets/calendar-widgets.xml
+++ b/calendar/base/content/widgets/calendar-widgets.xml
@@ -30,16 +30,18 @@
    - use your version of this file under the terms of the MPL, indicate your
    - decision by deleting the provisions above and replace them with the notice
    - and other provisions required by the GPL or the LGPL. If you do not delete
    - the provisions above, a recipient may use your version of this file under
    - the terms of any one of the MPL, the GPL or the LGPL.
    -
    - ***** END LICENSE BLOCK ***** -->
 
+<!DOCTYPE bindings SYSTEM "chrome://global/locale/global.dtd">
+
 <bindings id="calendar-widgets"
           xmlns="http://www.mozilla.org/xbl"
           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
           xmlns:xbl="http://www.mozilla.org/xbl">
   <binding id="doubleimage-toolbarbutton" extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton">
     <resources>
       <stylesheet src="chrome://calendar/skin/widgets/calendar-widgets.css"/>
     </resources>
@@ -418,9 +420,28 @@
          let item = session.sourceNode.sourceObject;
          let newItem = this.onDropItem(item).clone();
          let newStart = newItem.startDate || newItem.entryDate;
          let newEnd = newItem.endDate || newItem.dueDate;
          this.calendarView.controller.modifyOccurrence(item, newStart, newEnd);
       ]]></handler>
     </handlers>
   </binding>
+
+  <binding id="view-tab" extends="chrome://global/content/bindings/tabbox.xml#tab">
+    <resources>
+      <stylesheet src="chrome://calendar/skin/widgets/calendar-widgets.css"/>
+    </resources>
+    <content chromedir="&locale.dir;">
+      <xul:hbox class="tab-middle box-inherit" xbl:inherits="align,dir,pack,orient,selected" flex="1">
+        <xul:image class="tab-icon" xbl:inherits="validate,src=image"/>
+        <xul:stack>
+          <xul:label class="tab-text unselected-text"
+                     xbl:inherits="value=label,accesskey,crop,disabled,selected"
+                     flex="1"/>
+          <xul:label class="tab-text selected-text"
+                     xbl:inherits="value=label,accesskey,crop,disabled,selected"
+                     flex="1"/>
+        </xul:stack>
+      </xul:hbox>
+    </content>
+  </binding>
 </bindings>

--- a/calendar/base/themes/pinstripe/calendar-views.css
+++ b/calendar/base/themes/pinstripe/calendar-views.css
@@ -662,17 +662,16 @@ tab[calview] {
     -moz-border-right-colors: #D2D2D2 transparent;
     -moz-border-left-colors: transparent #D2D2D2;  
     margin-top: 0px;
     -moz-user-focus: normal;  
 }
 
 tab[calview][selected="true"],
 tab[calview][selected="true"]:hover {
-    font-weight: bold;
     background-color: #FFFFFF;
     margin-bottom: 0px;
     border-bottom: none;
 }
 
 tab[calview]:hover {
     background-color: #F6F6F6;    
 }

--- a/calendar/base/themes/pinstripe/widgets/calendar-widgets.css
+++ b/calendar/base/themes/pinstripe/widgets/calendar-widgets.css
@@ -112,9 +112,18 @@ treenode-checkbox > .checkbox-check {
 }
 
 .view-navigation-button > .toolbarbutton-icon {
   margin: 0px !important;
 }
 
 .view-navigation-button > .toolbarbutton-text  {
   display: none;
-}
\ No newline at end of file
+}
+
+.selected-text {
+    font-weight: bold;
+}
+
+.selected-text:not([selected="true"]),
+.unselected-text[selected="true"] {
+    visibility: hidden;
+}

--- a/calendar/base/themes/winstripe/calendar-views.css
+++ b/calendar/base/themes/winstripe/calendar-views.css
@@ -661,17 +661,16 @@ tab[calview] {
     -moz-border-left-colors: transparent #D2D2D2;  
     font-size: 14px;
     margin-top: 0px;
     -moz-user-focus: normal;  
 }
 
 tab[calview][selected="true"],
 tab[calview][selected="true"]:hover {
-    font-weight: bold;
     background-color: #FFFFFF;
     margin-bottom: 0px;
     border-bottom: none;
 }
 
 tab[calview]:hover {
     background-color: #F6F6F6;    
 }

--- a/calendar/base/themes/winstripe/widgets/calendar-widgets.css
+++ b/calendar/base/themes/winstripe/widgets/calendar-widgets.css
@@ -126,8 +126,17 @@ treenode-checkbox > .checkbox-check {
 
 .toolbarbutton-icon-begin {
   -moz-margin-end: 5px;
 }
 
 .toolbarbutton-icon-end {
   -moz-margin-start: 5px;
 }
+
+.selected-text {
+    font-weight: bold;
+}
+
+.selected-text:not([selected="true"]),
+.unselected-text[selected="true"] {
+    visibility: hidden;
+}