Merge pull request #1917 from nextcloud/fix/1014/datepicker-weeknumber

Fix datepicker overflow when week numbers are shown
nextcloud-libraries · May 4, 2021 · b8e063c · b8e063c
2 parents d67507b + d62a940
commit b8e063c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/src/components/DatetimePicker/DatetimePicker.vue b/src/components/DatetimePicker/DatetimePicker.vue
@@ -82,6 +82,8 @@ export default {
 		:type="type"
 		:value="value"
 		:append-to-body="appendToBody"
+		:show-week-number="showWeekNumber"
+		:popup-class="{ 'show-week-number': showWeekNumber }"
 		v-bind="$attrs"
 		v-on="$listeners"
 		@select-year="handleSelectYear"
@@ -158,6 +160,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		showWeekNumber: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	methods: {

diff --git a/src/components/DatetimePicker/index.scss b/src/components/DatetimePicker/index.scss
@@ -53,6 +53,10 @@ $cell_height: 32px;
 			border-left: 1px solid var(--color-border);
 		}
 	}
+
+	&.show-week-number .mx-calendar {
+		width: $cell_height * 8  + 2 * 5px; // week number + 7 days + padding
+	}
 
 	.mx-datepicker-header {
 		border-bottom: 1px solid var(--color-border);