diff --git a/Gemfile b/Gemfile
index 05da21d5b..06c920dcd 100644
--- a/Gemfile
+++ b/Gemfile
@@ -67,7 +67,7 @@ gem 'down', '~> 5.0'
gem 'faker' # Generate fake data
gem 'fastimage' # Light gem to get image resolution
gem 'httparty', '~> 0.13.1'
-gem 'i18n-js', '~> 3.0' # Localization in javascript files
+gem 'i18n-js', '~> 3.6' # Localization in javascript files
gem 'jbuilder' # JSON structures via a Builder-style DSL
gem 'logging', '~> 2.0.0'
gem 'nested_form_fields'
diff --git a/Gemfile.lock b/Gemfile.lock
index 5bfa0b3bc..6e6b9b1e0 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -281,7 +281,7 @@ GEM
multi_xml (>= 0.5.2)
i18n (1.6.0)
concurrent-ruby (~> 1.0)
- i18n-js (3.3.0)
+ i18n-js (3.6.0)
i18n (>= 0.6.6)
image_processing (1.9.3)
mini_magick (>= 4.9.5, < 5)
@@ -631,7 +631,7 @@ DEPENDENCIES
figaro
hammerjs-rails
httparty (~> 0.13.1)
- i18n-js (~> 3.0)
+ i18n-js (~> 3.6)
image_processing (~> 1.2)
jbuilder
jquery-rails
diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb
index 05b8453c8..28dbbffbf 100644
--- a/app/assets/javascripts/application.js.erb
+++ b/app/assets/javascripts/application.js.erb
@@ -31,6 +31,7 @@
//= require bootstrap-select
//= require_directory ./repository_columns/columns_initializers
//= require datatables
+//= require clndr/clndr.min
//= require ajax-bootstrap-select.min
//= require underscore
//= require i18n.js
diff --git a/app/assets/javascripts/dashboard/calendar.js b/app/assets/javascripts/dashboard/calendar.js
new file mode 100644
index 000000000..d8c4f6796
--- /dev/null
+++ b/app/assets/javascripts/dashboard/calendar.js
@@ -0,0 +1,56 @@
+/* global I18n */
+
+var DasboardCalendarWidget = (function() {
+ function calendarTemplate() {
+ return ``;
+ }
+
+ function initCalendar() {
+ var dayOfWeek = [
+ I18n.t('dashboard.calendar.dow.su'),
+ I18n.t('dashboard.calendar.dow.mo'),
+ I18n.t('dashboard.calendar.dow.tu'),
+ I18n.t('dashboard.calendar.dow.we'),
+ I18n.t('dashboard.calendar.dow.th'),
+ I18n.t('dashboard.calendar.dow.fr'),
+ I18n.t('dashboard.calendar.dow.sa')
+ ];
+ $('.dashboard-calendar').clndr({
+ template: $(calendarTemplate()).html(),
+ adjacentDaysChangeMonth: true,
+ daysOfTheWeek: dayOfWeek,
+ forceSixRows: true
+ });
+ }
+
+
+ return {
+ init: () => {
+ if ($('.current-tasks-widget').length) {
+ initCalendar();
+ }
+ }
+ };
+}());
+
+$(document).on('turbolinks:load', function() {
+ DasboardCalendarWidget.init();
+});
diff --git a/app/assets/stylesheets/dashboard/calendar.scss b/app/assets/stylesheets/dashboard/calendar.scss
index 99bc774ed..604b10660 100644
--- a/app/assets/stylesheets/dashboard/calendar.scss
+++ b/app/assets/stylesheets/dashboard/calendar.scss
@@ -1,6 +1,78 @@
+// scss-lint:disable SelectorDepth
+// scss-lint:disable NestingDepth
+
.dashboard-container .calendar-widget {
grid-column: 10 / span 3;
grid-row: 1 / span 6;
+
+ .dashboard-calendar {
+ height: 100%;
+ width: 100%;
+ }
+
+ .clndr {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ .controls {
+ border-bottom: $border-default;
+ display: flex;
+ flex-basis: 42px;
+ padding: 3px;
+
+ .clndr-title {
+ @include font-h3;
+ align-items: center;
+ display: flex;
+ flex-grow: 1;
+ justify-content: center;
+ }
+ }
+
+ .days-container {
+ align-items: center;
+ display: grid;
+ flex-grow: 1;
+ grid-column-gap: 6px;
+ grid-row-gap: 6px;
+ grid-template-columns: repeat(7, 1fr);
+ grid-template-rows: repeat(7, 1fr);
+ justify-items: center;
+ padding: 6px;
+
+ .day-header {
+ @include font-button;
+ color: $color-silver-chalice;
+ font-weight: bold;
+ }
+
+ .day {
+ @include font-button;
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ user-select: none;
+ width: 32px;
+
+ &.adjacent-month {
+ color: $color-alto;
+ }
+
+ &.today {
+ border: $border-primary;
+ border-radius: 50%;
+ }
+ }
+ }
+ }
+}
+
+@media (max-width: 1250px) {
+ .dashboard-container .calendar-widget {
+ grid-column: 9 / span 4;
+ }
}
@media (max-width: 1000px) {
diff --git a/app/assets/stylesheets/dashboard/current_tasks.scss b/app/assets/stylesheets/dashboard/current_tasks.scss
index bb1c8ce6f..a4e07e144 100644
--- a/app/assets/stylesheets/dashboard/current_tasks.scss
+++ b/app/assets/stylesheets/dashboard/current_tasks.scss
@@ -57,6 +57,12 @@
}
}
+@media (max-width: 1250px) {
+ .dashboard-container .current-tasks-widget {
+ grid-column: 1 / span 8;
+ }
+}
+
@media (max-width: 1000px) {
.dashboard-container .current-tasks-widget {
grid-column: 1 / span 12;
diff --git a/app/assets/stylesheets/shared_styles/constants/borders.scss b/app/assets/stylesheets/shared_styles/constants/borders.scss
index 4de7169af..e8fddc944 100644
--- a/app/assets/stylesheets/shared_styles/constants/borders.scss
+++ b/app/assets/stylesheets/shared_styles/constants/borders.scss
@@ -8,6 +8,7 @@ $border-default: 1px solid $color-alto;
$border-secondary: 1px solid $color-silver-chalice;
$border-tertiary: 1px solid $color-concrete;
+$border-primary: 1px solid $brand-primary;
$border-focus: 1px solid $brand-focus;
$border-danger: 1px solid $brand-danger;
$border-transparent: 1px solid transparent;
diff --git a/app/views/dashboards/_calendar.html.erb b/app/views/dashboards/_calendar.html.erb
index 5c13117a0..24b4c514b 100644
--- a/app/views/dashboards/_calendar.html.erb
+++ b/app/views/dashboards/_calendar.html.erb
@@ -1,2 +1,3 @@
-
+
+
\ No newline at end of file
diff --git a/config/locales/dashboard/en.yml b/config/locales/dashboard/en.yml
index f1b3e3f27..a52f465fc 100644
--- a/config/locales/dashboard/en.yml
+++ b/config/locales/dashboard/en.yml
@@ -17,3 +17,12 @@ en:
experiment: "Experiment"
select_experiment: "Select Experiment"
apply: "Apply"
+ calendar:
+ dow:
+ su: 'Su'
+ mo: 'Mo'
+ tu: 'Tu'
+ we: 'We'
+ th: 'Th'
+ fr: 'Fr'
+ sa: 'Sa'
diff --git a/package.json b/package.json
index db1d1a7d7..7abcf4e46 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
"babel-loader": "^8.0.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"bootstrap-sass": "^3.3.7",
+ "clndr": "^1.5.1",
"coffee-loader": "^0.8.0",
"coffeescript": "^1.12.6",
"compression-webpack-plugin": "^1.1.11",
diff --git a/yarn.lock b/yarn.lock
index b922a1f2d..81237a8f4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2162,6 +2162,14 @@ cliui@^5.0.0:
strip-ansi "^5.2.0"
wrap-ansi "^5.1.0"
+clndr@^1.5.1:
+ version "1.5.1"
+ resolved "https://registry.yarnpkg.com/clndr/-/clndr-1.5.1.tgz#713ecaa8a72dcf2fcf17c3c8e05f65dae673b91f"
+ integrity sha512-sPHvln2fCRiVmctixOW7K4mnNx1sVuogJDvtw/9rpYX9h2QZ4o38/v18KjpvDVUiD/+BWIeNgCWw9qYYq1RhOg==
+ dependencies:
+ jquery ">=1.9"
+ moment ">=2.8.3"
+
clone-deep@^2.0.1:
version "2.0.2"
resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-2.0.2.tgz#00db3a1e173656730d1188c3d6aced6d7ea97713"
@@ -5255,6 +5263,11 @@ jest-docblock@^21.0.0:
resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.2.0.tgz#51529c3b30d5fd159da60c27ceedc195faf8d414"
integrity sha512-5IZ7sY9dBAYSV+YjQ0Ovb540Ku7AO9Z5o2Cg789xj167iQuZ2cG+z0f3Uct6WeYLbU6aQiM2pCs7sZ+4dotydw==
+jquery@>=1.9:
+ version "3.4.1"
+ resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
+ integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
+
js-base64@^2.1.8, js-base64@^2.1.9:
version "2.5.1"
resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"
@@ -6064,7 +6077,7 @@ moment-timezone@^0.5.21:
dependencies:
moment ">= 2.9.0"
-"moment@>= 2.9.0", moment@^2.22.2:
+"moment@>= 2.9.0", moment@>=2.8.3, moment@^2.22.2:
version "2.24.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==