diff --git a/app/assets/javascripts/users/index.js b/app/assets/javascripts/users/index.js
index ecd8e09161e..c9d5da5c5f9 100644
--- a/app/assets/javascripts/users/index.js
+++ b/app/assets/javascripts/users/index.js
@@ -1,7 +1,5 @@
-import ActivityCalendar from './activity_calendar';
 import User from './user';
 
 // use legacy exports until embedded javascript is refactored
-window.Calendar = ActivityCalendar;
 window.gl = window.gl || {};
 window.gl.User = User;
diff --git a/app/assets/javascripts/users/user_tabs.js b/app/assets/javascripts/users/user_tabs.js
index f8e23c8624d..c499c403e28 100644
--- a/app/assets/javascripts/users/user_tabs.js
+++ b/app/assets/javascripts/users/user_tabs.js
@@ -1,5 +1,7 @@
 /* eslint-disable max-len, space-before-function-paren, no-underscore-dangle, consistent-return, comma-dangle, no-unused-vars, dot-notation, no-new, no-return-assign, camelcase, no-param-reassign, class-methods-use-this */
 
+import ActivityCalendar from './activity_calendar';
+
 /*
 UserTabs
 
@@ -60,6 +62,15 @@ content on the Users#show page.
    </div>
 */
 
+const CALENDAR_TEMPLATE = `
+  <div class="clearfix calendar">
+    <div class="js-contrib-calendar"></div>
+    <div class="calendar-hint">
+      Summary of issues, merge requests, push events, and comments
+    </div>
+  </div>
+`;
+
 export default class UserTabs {
   constructor ({ defaultAction, action, parentEl }) {
     this.loaded = {};
@@ -147,9 +158,21 @@ export default class UserTabs {
       return;
     }
     const $calendarWrap = this.$parentEl.find('.user-calendar');
-    $calendarWrap.load($calendarWrap.data('href'));
+    const calendarPath = $calendarWrap.data('calendarPath');
+    const calendarActivitiesPath = $calendarWrap.data('calendarActivitiesPath');
+
+    $.ajax({
+      dataType: 'json',
+      type: 'GET',
+      url: calendarPath,
+      success: (activityData) => {
+        $calendarWrap.html(CALENDAR_TEMPLATE);
+        new ActivityCalendar(activityData, calendarActivitiesPath);
+      }
+    });
+
     new gl.Activities();
-    return this.loaded['activity'] = true;
+    this.loaded['activity'] = true;
   }
 
   toggleLoading(status) {
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index 8131eba6a2f..4ee855806ab 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -73,10 +73,7 @@ class UsersController < ApplicationController
   end
 
   def calendar
-    calendar = contributions_calendar
-    @activity_dates = calendar.activity_dates
-
-    render 'calendar', layout: false
+    render json: contributions_calendar.activity_dates
   end
 
   def calendar_activities
diff --git a/app/views/users/calendar.html.haml b/app/views/users/calendar.html.haml
deleted file mode 100644
index 57b8845c55d..00000000000
--- a/app/views/users/calendar.html.haml
+++ /dev/null
@@ -1,9 +0,0 @@
-.clearfix.calendar
-  .js-contrib-calendar
-  .calendar-hint
-    Summary of issues, merge requests, push events, and comments
-:javascript
-  new Calendar(
-    #{@activity_dates.to_json},
-    '#{user_calendar_activities_path}'
-  );
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index f246bd7a586..863fec842f5 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -105,7 +105,7 @@
     .tab-content
       #activity.tab-pane
         .row-content-block.calender-block.white.second-block.hidden-xs
-          .user-calendar{ data: { href: user_calendar_path } }
+          .user-calendar{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path } }
             %h4.center.light
               %i.fa.fa-spinner.fa-spin
           .user-calendar-activities