ManukMinasyan / vue-functional-calendar

Vue.js Functional Calendar | Component/Package
https://vue-functional-calendar.now.sh/
MIT License
468 stars 84 forks source link

How to select dates on mounted when the calendar is multiple date picker? #68

Closed timoteiNicsoft closed 4 years ago

timoteiNicsoft commented 4 years ago

I tried this option, but I didn't succeed

<functional-calendar
ref="CalendarFrequency"
v-model="dates"
class="calendar-tbf"
:is-multiple-date-picker="true"
:is-multiple="true"
:calendars-count="calendarCounts"
:is-separately="false"
:hidden-elements="['leftAndRightDays']"
:limits="limitsRange"
:newCurrentDate="newStartDay"
></functional-calendar>
mounted() {
    var start_date_moment = this.moment(this.startDate)
    var end_date_moment = this.moment(this.endDate)
    this.limitsRange.min = start_date_moment.format("D/M/YYYY")
    this.limitsRange.max = end_date_moment.format("D/M/YYYY")
    var monthsDiff = (end_date_moment.month() - start_date_moment.month()) + 1
    this.calendarCounts =  monthsDiff >= 3 ? 3 : monthsDiff
    this.newStartDay = new Date(this.startDate)
--------------------------- 
        this.dates.selectedDates = this.selectedDatesObjective
},

this.selectedDatesObjective is the selectedDates array saved later

ManukMinasyan commented 4 years ago

Hey @timoteiNicsoft. Now you can do it with the v-model

<functional-calendar v-model="calendarData"/>
data(){
calendarData: {
selectedDates: [{date: '15/5/2020'}]
}
}

Thanks

timoteiNicsoft commented 4 years ago

Hi,

And for selection in data range what would be the structure?

On 2 May 2020, at 23:35, Manuk notifications@github.com wrote:

Closed #68 https://github.com/ManukMinasyan/vue-functional-calendar/issues/68.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ManukMinasyan/vue-functional-calendar/issues/68#event-3296791793, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGBAS5PS6RHY7FUTS3W7IHDRPR7YHANCNFSM4MTVCLKQ.

ManukMinasyan commented 4 years ago
calendarData: {
dateRange: {
                    start: {
                        date: '19/5/2020',
                    },
                    end: {
                        date: '25/5/2020',
                    }
                }
}