From d8488e9dee83f636b7919f85e8068a0578a929be Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 8 Sep 2020 14:26:26 +0300
Subject: [PATCH] Fixed #461 - Calendar misplaced layout if more than one month
 is shown

---
 public/themes/arya-blue/theme.css             |   2 +-
 public/themes/arya-green/theme.css            |   2 +-
 public/themes/arya-orange/theme.css           |   2 +-
 public/themes/arya-purple/theme.css           |   2 +-
 public/themes/bootstrap4-dark-blue/theme.css  |   2 +-
 .../themes/bootstrap4-dark-purple/theme.css   |   2 +-
 public/themes/bootstrap4-light-blue/theme.css |   2 +-
 .../themes/bootstrap4-light-purple/theme.css  |   2 +-
 public/themes/luna-amber/theme.css            |   2 +-
 public/themes/luna-blue/theme.css             |   2 +-
 public/themes/luna-green/theme.css            |   2 +-
 public/themes/luna-pink/theme.css             |   2 +-
 public/themes/md-dark-deeppurple/theme.css    |   2 +-
 public/themes/md-dark-indigo/theme.css        |   2 +-
 public/themes/md-light-deeppurple/theme.css   |   2 +-
 public/themes/md-light-indigo/theme.css       |   2 +-
 public/themes/mdc-dark-deeppurple/theme.css   |   2 +-
 public/themes/mdc-dark-indigo/theme.css       |   2 +-
 public/themes/mdc-light-deeppurple/theme.css  |   2 +-
 public/themes/mdc-light-indigo/theme.css      |   2 +-
 public/themes/nova-accent/theme.css           |   2 +-
 public/themes/nova-alt/theme.css              |   2 +-
 public/themes/nova-vue/theme.css              |   2 +-
 public/themes/nova/theme.css                  |   2 +-
 public/themes/rhea/theme.css                  |   2 +-
 public/themes/saga-blue/theme.css             |   2 +-
 public/themes/saga-green/theme.css            |   2 +-
 public/themes/saga-orange/theme.css           |   2 +-
 public/themes/saga-purple/theme.css           |   2 +-
 public/themes/vela-blue/theme.css             |   2 +-
 public/themes/vela-green/theme.css            |   2 +-
 public/themes/vela-orange/theme.css           |   2 +-
 public/themes/vela-purple/theme.css           |   2 +-
 src/components/calendar/Calendar.vue          | 102 +++++++++---------
 34 files changed, 85 insertions(+), 83 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index d7a1c8ec3..eae67a1b4 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 1px #93cbf9;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index d49792d68..40b561667 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 1px #a7d8a9;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 6997ae513..8a2fc5a3a 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 1px #ffe284;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index fc5cf5782..ad17a2f14 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 1px #cf95d9;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 34ac942cd..eef3c6b07 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index b0e9e292a..0de3748fc 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index c6bb50ff8..54e8762f0 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index f36ce31b7..4fc246c40 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index ca4ae1376..e226d74bb 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 8c43e5d4c..fdfb22720 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index ed1d767df..2c3cee7b0 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 80cfccd20..a235d627b 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index d04dfc9bb..35afed1cd 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -201,7 +201,7 @@
   box-shadow: none;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2.5rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 462d1a0bd..b9ea9b393 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -201,7 +201,7 @@
   box-shadow: none;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2.5rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 14b16d986..064465643 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -201,7 +201,7 @@
   box-shadow: none;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2.5rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index c3cb8a96b..0b7a2a207 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -201,7 +201,7 @@
   box-shadow: none;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2.5rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 4feee1009..cd858e3d5 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -201,7 +201,7 @@
   box-shadow: none;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index c27b6936a..9712ece04 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -201,7 +201,7 @@
   box-shadow: none;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 8229ccd15..68c698b25 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -201,7 +201,7 @@
   box-shadow: none;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 0036b81ce..1683afe57 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -201,7 +201,7 @@
   box-shadow: none;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 3e2c01f18..dc01a60d6 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 0f0b9ac3f..94377e976 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 6c8697da9..3e6213c5a 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 0.2rem #c2e9d8;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 3a69ce9af..8604db11e 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 154e984ab..fcf6d066a 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 0.2rem #e4e9ec;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 595e24fef..048405d32 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 0.2rem #a6d5fa;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 2f33fbfbd..0c6a9a248 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 0.2rem #b7e0b8;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 4ccec1506..f0fcafb5c 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 0.2rem #ffe69c;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 587bf4c33..237f3eb63 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 0.2rem #df9eea;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index f648cf66b..bc26109b0 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 1px #93cbf9;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 140a5bba5..bc421daef 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 1px #a7d8a9;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 6506c601d..b0cb99ca3 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 1px #ffe284;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index d67d27f4a..bae29911d 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -177,7 +177,7 @@
   box-shadow: 0 0 0 1px #cf95d9;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 1;
+  line-height: 2rem;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title select {
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 7c8375771..52ffe7a64 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -5,56 +5,58 @@
         <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayEnterComplete" @leave="onOverlayLeave">
             <div ref="overlay" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'" :aria-labelledby="ariaLabelledBy">
                 <template v-if="!timeOnly">
-                    <div class="p-datepicker-group" v-for="(month,groupIndex) of months" :key="month.month + month.year">
-                        <div class="p-datepicker-header">
-                            <slot name="header"></slot>
-                            <button class="p-datepicker-prev p-link" v-if="groupIndex === 0" @click="onPrevButtonClick" type="button" @keydown="onContainerButtonKeydown" v-ripple :disabled="$attrs.disabled">
-                                <span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
-                            </button>
-                            <div class="p-datepicker-title">
-                                <span class="p-datepicker-month" v-if="!monthNavigator && (view !== 'month')">{{locale.monthNames[month.month]}}</span>
-                                <select class="p-datepicker-month" v-if="monthNavigator && (view !== 'month') && numberOfMonths === 1" @change="onMonthDropdownChange($event.target.value)">
-                                    <option :value="index" v-for="(monthName, index) of locale.monthNames" :key="monthName" :selected="index === month.month">{{monthName}}</option>
-                                </select>
-                                <span class="p-datepicker-year" v-if="!yearNavigator">{{view === 'month' ? currentYear : month.year}}</span>
-                                <select class="p-datepicker-year" v-if="yearNavigator && numberOfMonths === 1" @change="onYearDropdownChange($event.target.value)">
-                                    <option :value="year" v-for="year of yearOptions" :key="year" :selected="year === currentYear">{{year}}</option>
-                                </select>
+                    <div class="p-datepicker-group-container">
+                        <div class="p-datepicker-group" v-for="(month,groupIndex) of months" :key="month.month + month.year">
+                            <div class="p-datepicker-header">
+                                <slot name="header"></slot>
+                                <button class="p-datepicker-prev p-link" v-if="groupIndex === 0" @click="onPrevButtonClick" type="button" @keydown="onContainerButtonKeydown" v-ripple :disabled="$attrs.disabled">
+                                    <span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
+                                </button>
+                                <div class="p-datepicker-title">
+                                    <span class="p-datepicker-month" v-if="!monthNavigator && (view !== 'month')">{{locale.monthNames[month.month]}}</span>
+                                    <select class="p-datepicker-month" v-if="monthNavigator && (view !== 'month') && numberOfMonths === 1" @change="onMonthDropdownChange($event.target.value)">
+                                        <option :value="index" v-for="(monthName, index) of locale.monthNames" :key="monthName" :selected="index === month.month">{{monthName}}</option>
+                                    </select>
+                                    <span class="p-datepicker-year" v-if="!yearNavigator">{{view === 'month' ? currentYear : month.year}}</span>
+                                    <select class="p-datepicker-year" v-if="yearNavigator && numberOfMonths === 1" @change="onYearDropdownChange($event.target.value)">
+                                        <option :value="year" v-for="year of yearOptions" :key="year" :selected="year === currentYear">{{year}}</option>
+                                    </select>
+                                </div>
+                                <button class="p-datepicker-next p-link" v-if="numberOfMonths === 1 ? true : (groupIndex === numberOfMonths - 1)"
+                                    @click="onNextButtonClick" type="button" @keydown="onContainerButtonKeydown" v-ripple :disabled="$attrs.disabled">
+                                    <span class="p-datepicker-next-icon pi pi-chevron-right"></span>
+                                </button>
+                            </div>
+                            <div class="p-datepicker-calendar-container" v-if="view ==='date'">
+                                <table class="p-datepicker-calendar">
+                                    <thead>
+                                        <tr>
+                                            <th scope="col" v-if="showWeek" class="p-datepicker-weekheader p-disabled">
+                                                <span>{{locale['weekHeader']}}</span>
+                                            </th>
+                                            <th scope="col" v-for="weekDay of weekDays" :key="weekDay">
+                                                <span>{{weekDay}}</span>
+                                            </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr v-for="(week,i) of month.dates" :key="week[0].day + '' + week[0].month">
+                                            <td v-if="showWeek" class="p-datepicker-weeknumber">
+                                                <span class="p-disabled">
+                                                    <span style="visibility:hidden" v-if="month.weekNumbers[i] < 10">0</span>
+                                                    {{month.weekNumbers[i]}}
+                                                </span>
+                                            </td>
+                                            <td v-for="date of week" :key="date.day + '' + date.month" :class="{'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today}">
+                                                <span :class="{'p-highlight': isSelected(date), 'p-disabled': !date.selectable}" @click="onDateSelect($event, date)"
+                                                    draggable="false" @keydown="onDateCellKeydown($event,date,groupIndex)" v-ripple>
+                                                    <slot name="date" :date="date">{{date.day}}</slot>
+                                                </span>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
                             </div>
-                            <button class="p-datepicker-next p-link" v-if="numberOfMonths === 1 ? true : (groupIndex === numberOfMonths - 1)"
-                                @click="onNextButtonClick" type="button" @keydown="onContainerButtonKeydown" v-ripple :disabled="$attrs.disabled">
-                                <span class="p-datepicker-next-icon pi pi-chevron-right"></span>
-                            </button>
-                        </div>
-                        <div class="p-datepicker-calendar-container" v-if="view ==='date'">
-                            <table class="p-datepicker-calendar">
-                                <thead>
-                                    <tr>
-                                        <th scope="col" v-if="showWeek" class="p-datepicker-weekheader p-disabled">
-                                            <span>{{locale['weekHeader']}}</span>
-                                        </th>
-                                        <th scope="col" v-for="weekDay of weekDays" :key="weekDay">
-                                            <span>{{weekDay}}</span>
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr v-for="(week,i) of month.dates" :key="week[0].day + '' + week[0].month">
-                                        <td v-if="showWeek" class="p-datepicker-weeknumber">
-                                            <span class="p-disabled">
-                                                <span style="visibility:hidden" v-if="month.weekNumbers[i] < 10">0</span>
-                                                {{month.weekNumbers[i]}}
-                                            </span>
-                                        </td>
-                                        <td v-for="date of week" :key="date.day + '' + date.month" :class="{'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today}">
-                                            <span :class="{'p-highlight': isSelected(date), 'p-disabled': !date.selectable}" @click="onDateSelect($event, date)"
-                                                draggable="false" @keydown="onDateCellKeydown($event,date,groupIndex)" v-ripple>
-                                                <slot name="date" :date="date">{{date.day}}</slot>
-                                            </span>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
                         </div>
                     </div>
                     <div class="p-monthpicker" v-if="view === 'month'">
@@ -2229,7 +2231,7 @@ export default {
 }
 
 /* Multiple Month DatePicker */
-.p-datepicker-multiple-month {
+.p-datepicker-multiple-month .p-datepicker-group-container {
     display: flex;
 }