diff --git a/locales/default.pot b/locales/default.pot
index a90838d04..9199b4de5 100644
--- a/locales/default.pot
+++ b/locales/default.pot
@@ -1886,6 +1886,30 @@ msgstr ""
 msgid "Create new for"
 msgstr ""
 
+msgid "Add multiple date ranges"
+msgstr ""
+
+msgid "Day"
+msgstr ""
+
+msgid "Month"
+msgstr ""
+
+msgid "Repeat times"
+msgstr ""
+
+msgid "Repeat type"
+msgstr ""
+
+msgid "Required"
+msgstr ""
+
+msgid "Year"
+msgstr ""
+
+msgid "Add multiple"
+msgstr ""
+
 msgid "Insert date(s)"
 msgstr ""
 
diff --git a/locales/en_US/default.po b/locales/en_US/default.po
index 00dadeb67..4fea704f5 100644
--- a/locales/en_US/default.po
+++ b/locales/en_US/default.po
@@ -1889,6 +1889,30 @@ msgstr ""
 msgid "Create new for"
 msgstr ""
 
+msgid "Add multiple date ranges"
+msgstr ""
+
+msgid "Day"
+msgstr ""
+
+msgid "Month"
+msgstr ""
+
+msgid "Repeat times"
+msgstr ""
+
+msgid "Repeat type"
+msgstr ""
+
+msgid "Required"
+msgstr ""
+
+msgid "Year"
+msgstr ""
+
+msgid "Add multiple"
+msgstr ""
+
 msgid "Insert date(s)"
 msgstr ""
 
diff --git a/locales/it_IT/default.po b/locales/it_IT/default.po
index 01df7a0ef..9ab7d401b 100644
--- a/locales/it_IT/default.po
+++ b/locales/it_IT/default.po
@@ -1914,6 +1914,30 @@ msgstr "Selezionare un tipo"
 msgid "Create new for"
 msgstr "Crea nuovo per"
 
+msgid "Add multiple date ranges"
+msgstr "Aggiungi intervalli multipli di date"
+
+msgid "Day"
+msgstr "Giorno"
+
+msgid "Month"
+msgstr "Mese"
+
+msgid "Repeat times"
+msgstr "Numero di ripetizioni"
+
+msgid "Repeat type"
+msgstr "Tipo di ripetizione"
+
+msgid "Required"
+msgstr "Obbligatorio"
+
+msgid "Year"
+msgstr "Anno"
+
+msgid "Add multiple"
+msgstr "Aggiungi multiplo"
+
 msgid "Insert date(s)"
 msgstr "Inserire data(e)"
 
diff --git a/resources/js/app/components/date-input.js b/resources/js/app/components/date-input.js
index da5635d1f..32280b05e 100644
--- a/resources/js/app/components/date-input.js
+++ b/resources/js/app/components/date-input.js
@@ -45,7 +45,7 @@ export default {
     },
     watch: {
         attrs: function(val) {
-            if (val.time != this.instance.config.enableTime) {
+            if (val?.['data-min-date'] || val.time != this.instance.config.enableTime) {
                 // flatpickr doesn't allow dynamic config change. we must destroy and re-create it.
                 /// see https://github.com/flatpickr/flatpickr/issues/1546
                 const date = this.instance.latestSelectedDateObj;
diff --git a/resources/js/app/components/date-range/date-range.vue b/resources/js/app/components/date-range/date-range.vue
index c61fff9d8..d950dddcb 100644
--- a/resources/js/app/components/date-range/date-range.vue
+++ b/resources/js/app/components/date-range/date-range.vue
@@ -21,23 +21,24 @@
         <div :class="dateRangeClass()">
             <span>{{ msgTo }}</span>
             <div>
-                <template v-if="start_date">
+                <template v-if="start_date && ready">
                     <input
                         type="text"
                         date="true"
                         :time="!all_day"
+                        :data-min-date="end_date ? false : start_date"
                         daterange="true"
                         v-model="end_date"
                         v-datepicker="true"
                         @change="onDateChanged(false, $event)"
-                        v-if="ready"
                     >
                 </template>
-                <input
-                    type="text"
-                    disabled="disabled"
-                    v-else
-                >
+                <template v-else>
+                    <input
+                        type="text"
+                        disabled="disabled"
+                    >
+                </template>
             </div>
         </div>
         <div v-show="!optionIsSet('all_day')">
@@ -142,7 +143,7 @@
         </div>
         <div
             class="icon-error"
-            v-show="!compact && validate() === false"
+            v-show="!compact && start_date && validate() === false"
         >
             {{ msgInvalidDateRange }}
         </div>
diff --git a/resources/js/app/components/date-ranges-view/date-range-panel.vue b/resources/js/app/components/date-ranges-view/date-range-panel.vue
new file mode 100644
index 000000000..befd7f926
--- /dev/null
+++ b/resources/js/app/components/date-ranges-view/date-range-panel.vue
@@ -0,0 +1,212 @@
+<template>
+    <div class="date-range-panel">
+        <template v-if="showPanel">
+            <div
+                class="backdrop"
+                style="display: block; z-index: 9998;"
+                @click="closePanel()"
+            />
+            <aside
+                class="main-panel-container on"
+                custom-footer="true"
+                custom-header="true"
+            >
+                <div class="main-panel fieldset">
+                    <header class="mx-1 mt-1 tab tab-static unselectable">
+                        <h2>{{ msgAddMultipleDateRanges }}</h2>
+                        <button
+                            class="button button-outlined close"
+                            v-title="msgClose"
+                            @click.prevent.stop="closePanel()"
+                        >
+                            <app-icon icon="carbon:close" />
+                        </button>
+                    </header>
+                    <div class="pcontainer">
+                        <div class="form-field">
+                            <div class="fields">
+                                <label><span>{{ msgDate }}</span> <span class="required">*</span></label>
+                                <label><span>{{ msgFrom }}</span> <span class="required">*</span></label>
+                                <label><span>{{ msgTo }}</span> <span class="required">*</span></label>
+                                <label>{{ msgRepeatType }} <span class="required">*</span></label>
+                                <label>{{ msgRepeatTimes }} <span class="required">*</span></label>
+                                <input
+                                    type="date"
+                                    v-model="start"
+                                >
+                                <input
+                                    type="time"
+                                    v-model="from"
+                                >
+                                <input
+                                    type="time"
+                                    v-model="to"
+                                >
+                                <select
+                                    required
+                                    v-model="rangeType"
+                                >
+                                    <option value="daily">{{ msgDay }}</option>
+                                    <option value="weekly">{{ msgWeek }}</option>
+                                    <option value="monthly">{{ msgMonth }}</option>
+                                    <option value="yearly">{{ msgYear }}</option>
+                                </select>
+                                <input
+                                    type="number"
+                                    min="1"
+                                    max="100"
+                                    class="input input-text input-range-number"
+                                    required
+                                    v-model="numberOfRanges"
+                                >
+                            </div>
+                        </div>
+                        <div class="buttons">
+                            <button
+                                class="button button-primary"
+                                :disabled="addDisabled"
+                                @click="add"
+                            >
+                                <app-icon icon="carbon:save" />
+                                <span class="ml-05">
+                                    {{ msgAdd }}
+                                </span>
+                            </button>
+                            <button
+                                class="button button-primary"
+                                @click.prevent.stop="closePanel()"
+                            >
+                                <app-icon icon="carbon:close" />
+                                <span class="ml-05">
+                                    {{ msgClose }}
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </aside>
+        </template>
+    </div>
+</template>
+<script>
+import { t } from 'ttag';
+export default {
+    name: 'DateRangePanel',
+    props: {
+        showPanel: {
+            type: Boolean,
+            default: false
+        },
+    },
+    data() {
+        return {
+            from: '',
+            to: '',
+            msgAdd: t`Add`,
+            msgAddMultipleDateRanges: t`Add multiple date ranges`,
+            msgClose: t`Close`,
+            msgDate: t`Date`,
+            msgDay: t`Day`,
+            msgFrom: t`From`,
+            msgMonth: t`Month`,
+            msgTo: t`To`,
+            msgRepeatTimes: t`Repeat times`,
+            msgRepeatType: t`Repeat type`,
+            msgRequired: t`Required`,
+            msgWeek: t`Week`,
+            msgYear: t`Year`,
+            numberOfRanges: 1,
+            rangeType: 'daily', // default to daily
+            start: '', // Start date for the range
+        }
+    },
+    computed: {
+        addDisabled() {
+            return !this.start || !this.from || !this.to || !this.rangeType || this.numberOfRanges < 1 || this.numberOfRanges > 100;
+        },
+    },
+    methods: {
+        add() {
+            for (let i = 0; i < this.numberOfRanges; i++) {
+                const startDate = new Date(this.start + 'T' + this.from);
+                const endDate = new Date(this.start + 'T' + this.to);
+                switch (this.rangeType) {
+                    case 'daily':
+                        startDate.setDate(startDate.getDate() + i);
+                        endDate.setDate(endDate.getDate() + i);
+                        break;
+                    case 'weekly':
+                        startDate.setDate(startDate.getDate() + (i * 7));
+                        endDate.setDate(endDate.getDate() + (i * 7));
+                        break;
+                    case 'monthly':
+                        startDate.setMonth(startDate.getMonth() + i);
+                        endDate.setMonth(endDate.getMonth() + i);
+                        break;
+                    case 'yearly':
+                        startDate.setFullYear(startDate.getFullYear() + i);
+                        endDate.setFullYear(endDate.getFullYear() + i);
+                        break;
+                }
+                this.$emit('add-range', { start: startDate, end: endDate });
+            }
+            this.closePanel();
+        },
+        closePanel() {
+            this.$emit('update:showPanel', false);
+        },
+    },
+}
+</script>
+<style scoped>
+div.date-range-panel aside.main-panel-container {
+    z-index: 9999;
+}
+div.date-range-panel aside.main-panel {
+    margin: 1rem;
+    padding: 1rem;
+}
+div.date-range-panel button.close {
+    border: solid transparent 0px;
+    min-width: 36px;
+    max-width: 36px;
+}
+div.date-range-panel .pcontainer {
+    padding: 1rem;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+div.date-range-panel .pcontainer > div {
+    display: flex;
+    flex-direction: column;
+}
+div.date-range-panel div.buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+}
+div.date-range-panel span.required {
+    color: red;
+}
+div.date-range-panel div.root > label {
+    display:flex;
+    align-items:center;
+    direction:column;
+    cursor: pointer;
+}
+div.date-range-panel div.root > label > span {
+    display: flex;
+    align-self: center;
+    cursor: pointer;
+}
+div.date-range-panel input.input-range-number {
+    max-width: 120px;
+}
+div.date-range-panel .fields {
+    display: grid;
+    grid-template-columns: 150px 100px 100px 200px 200px;
+    column-gap: 0.5rem;
+}
+</style>
diff --git a/resources/js/app/components/date-ranges-view/date-ranges-view.vue b/resources/js/app/components/date-ranges-view/date-ranges-view.vue
index a3493c1fc..3bdd61b74 100644
--- a/resources/js/app/components/date-ranges-view/date-ranges-view.vue
+++ b/resources/js/app/components/date-ranges-view/date-ranges-view.vue
@@ -3,7 +3,7 @@
         <div class="date-ranges-list">
             <DateRange
                 v-for="(dateRange, index) in dateRanges"
-                :key="index"
+                :key="dateRange.uuid"
                 :compact="compact"
                 :options="options"
                 :readonly="readonly"
@@ -13,19 +13,34 @@
                 @update="update"
             />
         </div>
-        <button
-            class="button button-primary"
-            @click.prevent="add"
-            v-if="!readonly"
-        >
-            <app-icon icon="carbon:add" />
-            <span class="ml-05">{{ msgAdd }}</span>
-        </button>
+        <template v-if="!readonly">
+            <button
+                class="button button-primary"
+                @click.prevent="add"
+            >
+                <app-icon icon="carbon:add" />
+                <span class="ml-05">{{ msgAdd }}</span>
+            </button>
+            <button
+                class="button button-primary"
+                @click.prevent="addMulti"
+            >
+                <app-icon icon="carbon:add" />
+                <span class="ml-05">{{ msgAddMulti }}</span>
+            </button>
+        </template>
         <input
             type="hidden"
             name="date_ranges"
             v-model="dateRangesJson"
         >
+        <template v-if="addMultiple">
+            <date-range-panel
+                :show-panel="addMultiple"
+                @add-range="addRange"
+                @update:showPanel="addMultiple = $event"
+            />
+        </template>
     </div>
 </template>
 <script>
@@ -36,6 +51,7 @@ export default {
 
     components: {
         DateRange: () => import(/* webpackChunkName: "date-range" */ '../date-range/date-range.vue'),
+        DateRangePanel: () => import('./date-range-panel.vue'),
     },
 
     props: {
@@ -59,9 +75,11 @@ export default {
 
     data() {
         return {
+            addMultiple: false,
             dateRanges: [],
             dateRangesJson: '',
             msgAdd: t`Add`,
+            msgAddMulti: t`Add multiple`,
         }
     },
 
@@ -112,6 +130,29 @@ export default {
             this.dateRanges.push(newRange);
             this.dateRangesJson = JSON.stringify(this.dateRanges);
         },
+        addMulti() {
+            this.addMultiple = true;
+        },
+        addRange(range) {
+            if (!range) {
+                return;
+            }
+            if (this.dateRanges.length === 1 && !this.dateRanges[0].start_date) {
+                this.dateRanges = [];
+            }
+            const newRange = {
+                uuid: this.uuid(),
+                start_date: range.start,
+                end_date: range.end,
+                params: {
+                    all_day: range?.all_day || false,
+                    every_day: range?.every_day || true,
+                    weekdays: this.formatWeekdays(range?.weekdays),
+                },
+            };
+            this.dateRanges.push(newRange);
+            this.dateRangesJson = JSON.stringify(this.dateRanges);
+        },
         formatWeekdays(wdays) {
             if (!wdays) {
                 return {
diff --git a/resources/js/app/directives/datepicker.js b/resources/js/app/directives/datepicker.js
index 75fcb69d6..7220c19f8 100644
--- a/resources/js/app/directives/datepicker.js
+++ b/resources/js/app/directives/datepicker.js
@@ -30,6 +30,10 @@ export default {
                 if (!el.vm) {
                     return;
                 }
+                if (JSON.stringify(el.vm.attrs) === JSON.stringify(vnode.data.attrs)) {
+                    // no change in attributes, nothing to do
+                    return;
+                }
                 el.vm.attrs = vnode.data.attrs;
                 if (vnode.data && vnode.data.attrs && vnode.data.attrs.value) {
                     el.vm.setDate(new Date(vnode.data.attrs.value));
diff --git a/templates/Element/Form/calendar.scss b/templates/Element/Form/calendar.scss
index c73e5ad66..799199fac 100644
--- a/templates/Element/Form/calendar.scss
+++ b/templates/Element/Form/calendar.scss
@@ -5,7 +5,7 @@
 
     .date-ranges-item {
         display: grid;
-        grid-template-columns: 200px 200px 1fr 1fr 1fr;
+        grid-template-columns: 250px 250px 1fr 1fr 1fr;
         gap: $gutter;
         margin-bottom: $gutter * .5;
         align-items: flex-end;