diff --git a/ui/app/adapters/clients/monthly.js b/ui/app/adapters/clients/monthly.js
index fa299a0b5..a960e91aa 100644
--- a/ui/app/adapters/clients/monthly.js
+++ b/ui/app/adapters/clients/monthly.js
@@ -6,7 +6,6 @@ export default class MonthlyAdapter extends ApplicationAdapter {
     // Query has startTime defined. The API will return the endTime if none is provided.
     return this.ajax(url, 'GET').then((resp) => {
       let response = resp || {};
-      // if the response is a 204 it has no request id (ARG TODO test that it returns a 204)
       response.id = response.request_id || 'no-data';
       return response;
     });
diff --git a/ui/app/components/calendar-widget.js b/ui/app/components/calendar-widget.js
index 414da959e..eb43ae801 100644
--- a/ui/app/components/calendar-widget.js
+++ b/ui/app/components/calendar-widget.js
@@ -13,7 +13,7 @@ import { tracked } from '@glimmer/tracking';
  * <CalendarWidget
  * @param {array} arrayOfMonths - An array of all the months that the calendar widget iterates through.
  * @param {string} endTimeDisplay - The formatted display value of the endTime. Ex: January 2022.
- * @param {string} endTimeFromResponse - The value returned on the counters/activity endpoint, which shows the true endTime not the selected one, which can be different.
+ * @param {array} endTimeFromResponse - The value returned on the counters/activity endpoint, which shows the true endTime not the selected one, which can be different. Ex: ['2022', 0]
  * @param {function} handleClientActivityQuery - a function passed from parent. This component sends the month and year to the parent via this method which then calculates the new data.
  * @param {function} handleCurrentBillingPeriod - a function passed from parent. This component makes the parent aware that the user selected Current billing period and it handles resetting the data.
  * @param {string} startTimeDisplay - The formatted display value of the endTime. Ex: January 2022. This component is only responsible for modifying the endTime which is sends to the parent to make the network request.
diff --git a/ui/app/styles/components/calendar-widget.scss b/ui/app/styles/components/calendar-widget.scss
index 68b0711d8..55eb728af 100644
--- a/ui/app/styles/components/calendar-widget.scss
+++ b/ui/app/styles/components/calendar-widget.scss
@@ -2,7 +2,11 @@ $dark-gray: #535f73;
 
 .calendar-content {
   display: flex;
-  width: 500px;
+  width: 234px;
+
+  &.calendar-open {
+    width: 500px;
+  }
 
   > .menu {
     margin-bottom: 0px;
diff --git a/ui/app/templates/components/calendar-widget.hbs b/ui/app/templates/components/calendar-widget.hbs
index 5c44e1cd8..d8c12b0f7 100644
--- a/ui/app/templates/components/calendar-widget.hbs
+++ b/ui/app/templates/components/calendar-widget.hbs
@@ -9,12 +9,13 @@
     {{@endTimeDisplay}}
     <Chevron @direction="down" @isButton={{true}} />
   </D.Trigger>
-  <D.Content @defaultClass="popup-menu-content calendar-content">
+  <D.Content @defaultClass={{concat "popup-menu-content calendar-content" (if this.showCalendar " calendar-open")}}>
     <nav class="box menu">
       <div class="calendar-title is-subtitle-gray">DATE OPTIONS</div>
       <ul class="menu-list">
         <li class="action">
           <button
+            data-test-current-billing-period
             class="link link-plain has-text-weight-semibold is-ghost"
             type="button"
             {{on "click" (fn this.selectCurrentBillingPeriod D)}}
@@ -24,6 +25,7 @@
         </li>
         <li class="action">
           <button
+            data-test-show-calendar
             class={{concat "link link-plain has-text-weight-semibold is-ghost" (if this.showCalendar " is-active")}}
             type="button"
             {{on "click" this.toggleShowCalendar}}
@@ -37,9 +39,10 @@
       </ul>
     </nav>
     {{#if this.showCalendar}}
-      <div class="calendar-widget-container">
+      <div class="calendar-widget-container" data-test-calendar-widget-container>
         <div class="select-year">
           <button
+            data-test-previous-year
             id="previous-year"
             type="button"
             class="button is-transparent"
@@ -54,8 +57,9 @@
               {{on "mouseleave" this.removeTooltip}}
             />
           </button>
-          <p>{{this.displayYear}}</p>
+          <p data-test-display-year>{{this.displayYear}}</p>
           <button
+            data-test-future-year
             type="button"
             class={{concat "button is-transparent " (if (or this.tooltipTarget) "negative-margin" "padding-right")}}
             disabled={{this.disableFutureYear}}
@@ -83,6 +87,7 @@
         <div {{did-insert this.disableMonths}} class="calendar-widget-grid calendar-widget">
           {{#each @arrayOfMonths as |month index|}}
             <button
+              data-test-calendar-month={{month}}
               type="button"
               {{on "click" (fn this.selectEndMonth index this.displayYear D)}}
               class="is-month-list"
diff --git a/ui/tests/integration/components/calendar-widget-test.js b/ui/tests/integration/components/calendar-widget-test.js
new file mode 100644
index 000000000..575125ecf
--- /dev/null
+++ b/ui/tests/integration/components/calendar-widget-test.js
@@ -0,0 +1,125 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, click } from '@ember/test-helpers';
+import sinon from 'sinon';
+import hbs from 'htmlbars-inline-precompile';
+import calendarDropdown from 'vault/tests/pages/components/calendar-widget';
+
+module('Integration | Component | calendar-widget', function (hooks) {
+  setupRenderingTest(hooks);
+
+  const ARRAY_OF_MONTHS = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+
+  hooks.beforeEach(function () {
+    this.set('handleClientActivityQuery', sinon.spy());
+    this.set('handleCurrentBillingPeriod', sinon.spy());
+    this.set('arrayOfMonths', ARRAY_OF_MONTHS);
+    this.set('endTimeFromResponse', ['2022', 0]);
+  });
+
+  test('it renders and can open the calendar view', async function (assert) {
+    await render(hbs`
+      <CalendarWidget
+        @arrayOfMonths={{arrayOfMonths}}
+        @endTimeDisplay={{"January 2022"}}
+        @endTimeFromResponse={{endTimeFromResponse}}
+        @handleClientActivityQuery={{handleClientActivityQuery}}
+        @handleCurrentBillingPeriod={{handleCurrentBillingPeriod}}
+        @startTimeDisplay={{"February 2021"}}
+      />
+    `);
+
+    await calendarDropdown.openCalendar();
+    assert.ok(calendarDropdown.showsCalendar, 'renders the calendar component');
+  });
+
+  test('it does not allow a user to click to a future year but does allow a user to click to previous year', async function (assert) {
+    await render(hbs`
+      <CalendarWidget
+        @arrayOfMonths={{arrayOfMonths}}
+        @endTimeDisplay={{"March 2022"}}
+        @endTimeFromResponse={{endTimeFromResponse}}
+        @handleClientActivityQuery={{handleClientActivityQuery}}
+        @handleCurrentBillingPeriod={{handleCurrentBillingPeriod}}
+        @startTimeDisplay={{"February 2021"}}
+      />
+    `);
+
+    await calendarDropdown.openCalendar();
+    assert.dom('[data-test-future-year]').isDisabled('Future year is disabled');
+
+    await calendarDropdown.clickPreviousYear();
+    assert.dom('[data-test-display-year]').hasText('2021', 'shows the previous year');
+    assert
+      .dom('[data-test-calendar-month="January"]')
+      .hasClass('is-readOnly', 'January 2021 is disabled because it comes before February 2021');
+  });
+
+  test('it enables the current month but disables future months', async function (assert) {
+    await render(hbs`
+      <CalendarWidget
+        @arrayOfMonths={{arrayOfMonths}}
+        @endTimeDisplay={{"January 2022"}}
+        @endTimeFromResponse={{endTimeFromResponse}}
+        @handleClientActivityQuery={{handleClientActivityQuery}}
+        @handleCurrentBillingPeriod={{handleCurrentBillingPeriod}}
+        @startTimeDisplay={{"February 2021"}}
+      />
+    `);
+    await calendarDropdown.openCalendar();
+    assert
+      .dom('[data-test-calendar-month="January"]')
+      .doesNotHaveClass('is-readOnly', 'January 2022 is enabled');
+    assert.dom('[data-test-calendar-month="February"]').hasClass('is-readOnly', 'February 2022 is enabled');
+  });
+
+  test('it allows you to reset the billing period', async function (assert) {
+    await render(hbs`
+    <CalendarWidget
+      @arrayOfMonths={{arrayOfMonths}}
+      @endTimeDisplay={{"January 2022"}}
+      @endTimeFromResponse={{endTimeFromResponse}}
+      @handleClientActivityQuery={{handleClientActivityQuery}}
+      @handleCurrentBillingPeriod={{handleCurrentBillingPeriod}}
+      @startTimeDisplay={{"February 2021"}}
+    />
+  `);
+    await calendarDropdown.menuToggle();
+    await calendarDropdown.clickCurrentBillingPeriod();
+    assert.ok(this.handleCurrentBillingPeriod.calledOnce, 'it calls the parents handleCurrentBillingPeriod');
+  });
+
+  test('it passes the appropriate data to the handleCurrentBillingPeriod when a date is selected', async function (assert) {
+    await render(hbs`
+    <CalendarWidget
+      @arrayOfMonths={{arrayOfMonths}}
+      @endTimeDisplay={{"January 2022"}}
+      @endTimeFromResponse={{endTimeFromResponse}}
+      @handleClientActivityQuery={{handleClientActivityQuery}}
+      @handleCurrentBillingPeriod={{handleCurrentBillingPeriod}}
+      @startTimeDisplay={{"February 2021"}}
+    />
+  `);
+    await calendarDropdown.openCalendar();
+    await calendarDropdown.clickPreviousYear();
+    await click('[data-test-calendar-month="October"]'); // select endTime of October 2021
+    assert.ok(this.handleClientActivityQuery.calledOnce, 'it calls the parents handleClientActivityQuery');
+    assert.ok(
+      this.handleClientActivityQuery.calledWith(9, 2021, 'endTime'),
+      'Passes the month as an index, year and date type to the parent'
+    );
+  });
+});
diff --git a/ui/tests/pages/components/calendar-widget.js b/ui/tests/pages/components/calendar-widget.js
new file mode 100644
index 000000000..09bc71c64
--- /dev/null
+++ b/ui/tests/pages/components/calendar-widget.js
@@ -0,0 +1,15 @@
+import { clickable, create, isPresent } from 'ember-cli-page-object';
+
+export default create({
+  clickPreviousYear: clickable('[data-test-previous-year]'),
+  clickCurrentBillingPeriod: clickable('[data-test-current-billing-period]'),
+  customEndMonthBtn: clickable('[data-test-show-calendar]'),
+  menuToggle: clickable('[data-test-popup-menu-trigger="true"]'),
+  showsCalendar: isPresent('[data-test-calendar-widget-container]'),
+
+  async openCalendar() {
+    await this.menuToggle();
+    await this.customEndMonthBtn();
+    return;
+  },
+});