fix(b-calendar, b-form-datepicker): minor adjustments to styling and …

…example updates (#5211)

* fix(b-calendar, b-form-datepicker): minor adjustments to styling

* Update form-datepicker.js

* Update README.md

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

src/components/calendar/_calendar.scss

@@ -37,6 +37,11 @@
     // Easy rounded corners on contained elements,
     // specifically the footer of the calendar grid
     overflow: hidden;
+
+    .row {
+      // Prevent grid rows from wrapping
+      flex-wrap: nowrap;
+    }
   }
 
   .b-calendar-grid-caption {

src/components/form-datepicker/README.md

@@ -481,6 +481,39 @@ You can use the `isRTL` scoped property to "flip" the prev vs next button conten
 left-to-right to right-to-left orientation change — i.e. the previous year button will be on
 the right when `isRTL` is `true`, instead of the left.
 
+### Full width calendar dropdown
+
+To create a full width calendar dropdown (where the width matches the input width), simply set the
+`menu-class` prop to `'w-100'` and set the `calendar-width` prop to `'100%'`:
+
+```html
+<template>
+  <div>
+    <label for="datepicker-full-width">Choose a date</label>
+    <b-form-datepicker
+      id="datepicker-full-width"
+      v-model="value"
+      menu-class="w-100"
+      calendar-width="100%"
+      class="mb-2"
+    ></b-form-datepicker>
+    <p>Value: '{{ value }}'</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: ''
+      }
+    }
+  }
+</script>
+
+<!-- b-form-datepicker-full-width.vue -->
+```
+
 ## Internationalization
 
 Internationalization of the date picker's calendar is provided via

src/components/form-datepicker/form-datepicker.js

@@ -530,7 +530,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
       {
         key: 'calendar',
         ref: 'calendar',
-        staticClass: 'b-form-date-calendar',
+        staticClass: 'b-form-date-calendar w-100',
         props: this.calendarProps,
         on: {
           selected: this.onSelected,