Collapse calendar view buttons on narrower screens (<= 1200px)

frontend/src/Calendar/Header/CalendarHeader.js

@@ -83,6 +83,7 @@ class CalendarHeader extends Component {
       end,
       longDateFormat,
       isSmallScreen,
+      collapseViewButtons,
       onTodayPress,
       onPreviousPress,
       onNextPress
@@ -145,7 +146,7 @@ class CalendarHeader extends Component {
             }
 
             {
-              isSmallScreen ?
+              collapseViewButtons ?
                 <Menu
                   className={styles.viewMenu}
                   alignMenu={align.RIGHT}
@@ -158,6 +159,18 @@ class CalendarHeader extends Component {
                   </MenuButton>
 
                   <MenuContent>
+                    {
+                      isSmallScreen ?
+                        null :
+                        <ViewMenuItem
+                          name={calendarViews.MONTH}
+                          selectedView={view}
+                          onPress={this.onViewChange}
+                        >
+                          Month
+                        </ViewMenuItem>
+                    }
+
                     <ViewMenuItem
                       name={calendarViews.WEEK}
                       selectedView={view}
@@ -243,6 +256,7 @@ CalendarHeader.propTypes = {
   end: PropTypes.string.isRequired,
   view: PropTypes.oneOf(calendarViews.all).isRequired,
   isSmallScreen: PropTypes.bool.isRequired,
+  collapseViewButtons: PropTypes.bool.isRequired,
   longDateFormat: PropTypes.string.isRequired,
   onViewChange: PropTypes.func.isRequired,
   onTodayPress: PropTypes.func.isRequired,

frontend/src/Calendar/Header/CalendarHeaderConnector.js

@@ -23,6 +23,7 @@ function createMapStateToProps() {
       ]);
 
       result.isSmallScreen = dimensions.isSmallScreen;
+      result.collapseViewButtons = dimensions.isLargeScreen;
       result.longDateFormat = uiSettings.longDateFormat;
 
       return result;