Suggestions: Let's make the calendar better :)

[ManukMinasyan]

Please write your suggestions here. Thanks.

[camilleb]

Could be nice if there was the possibility to select multiple non continuous dates 🙂

[ManukMinasyan]

@camilleb prop "marked-dates" you are lacking?

[camilleb]

@ManukMinasyan it works when you already know the dates, but user can't select multiple date by clicking on the calendar. It could also be solved by adding a "clickedDay" event.

[ManukMinasyan]

@camilleb thank you for your suggestion. Now everything is clear. I will do that)

[13thbit]

Optionally display Week Numbers would be great!

[ManukMinasyan]

Optionally display Week Numbers

Sure ) https://github.com/ManukMinasyan/vue-functional-calendar/projects/1#card-20648892

[RicLeP]

Being able to select time too. So hard to find good datetime pickers.

[ManukMinasyan]

Being able to select time too. So hard to find good datetime pickers.

Sure) Thank you for you suggestion. https://github.com/ManukMinasyan/vue-functional-calendar/projects/1#card-21892094

[stuta]

With multiple calendars and date range picker you should change only one side when changing month so that you can see the other end of selection. If months are not continuous there should be visual sign in the middle of calendars.

[stuta]

Configurable shortcuts like 'This week', 'Last week', 'Last month'.

[atilacamurca]

About localization (l10n), I understand that this library allows to pass dayNames and monthNames as a way change the locale. My concern is about avoid repeating this process. So, one suggestion is to allow to pass these props while install vue-functional-calendar, for example:

GlobalVue.use(plugin, options: {
  dayNames: [/* ... */],
  monthNames: [/* ... */]
});

What do you think?

[ManukMinasyan]

About localization (l10n), I understand that this library allows to pass dayNames and monthNames as a way change the locale. My concern is about avoid repeating this process. So, one suggestion is to allow to pass these props while install vue-functional-calendar, for example:

GlobalVue.use(plugin, options: {
  dayNames: [/* ... */],
  monthNames: [/* ... */]
});

What do you think?

This is a good idea, in the next versions I will definitely do it.

[adamorlowskipoland]

How about making a named slot (let say under a day number) for additional info, icon etc.?

[ManukMinasyan]

How about making a named slot (let say under a day number) for additional info, icon etc.?

I plan to do this on the next versions. ) Thank you.

[stuta]

Optionally display Week Numbers

Sure ) https://github.com/ManukMinasyan/vue-functional-calendar/projects/1#card-20648892

How can I enable week numbers?

[masterix21]

Hi dear,

what do you think about the custom inputs (slot) using modal version?

[Uninen]

First, this component looks really nice, Thank You for your work!

I'd like to suggest better themability, either by exposing few color variables (to easily be able to create for example themes or dark mode etc) or at least documenting what would be the best way to do it.

[ManukMinasyan]

Hello dears, Thank you for your message, I planned to do it all on the next week, thanks :)

[ManukMinasyan]

Hello dear developers, Already completed slots functionality. You can use the "week" and "day" props.

Thank you again for your support. ❤️

[severn-leon]

I can't work out how to set the inital date when using as a datepicker - could you explain how to do this please?

[severn-leon]

have set the dateFormat to dd-mm-yyyy but the datepicker still displays 9/8/2019 when you select a date - can/does the format affect how the date is displayed?

[jaywilburn]

auto-apply and auto-close would be nice

[ManukMinasyan]

I can't work out how to set the inital date when using as a datepicker - could you explain how to do this please?

If you need set start calendar date. You need use "newCurrentDate" prop.

[ManukMinasyan]

dd-mm-yyyy

Please look at this example. https://codesandbox.io/s/980jov4m4p?fontsize=14&hidenavigation=1

[ManukMinasyan]

auto-apply and auto-close would be nice

What do you mean about auto-apply and auto-close? What to do these functions and when?

Thanks.

[jaywilburn]

Once you’ve selected the date range, allowing the calendar element to auto close, hiding it. I’m sure I can probably auto apply it from the model itself.

[jaywilburn]

Is a single date select in date-range mode possible? I can see good use for that too.

[ManukMinasyan]

@jaywilburn please look at this example. Did you want it? https://codesandbox.io/s/vuejs-functional-calendar-k1h1c

[severn-leon]

dd-mm-yyyy

Please look at this example. https://codesandbox.io/s/980jov4m4p?fontsize=14&hidenavigation=1

Thanks Manuk, I had a look at that, when I click the Change Date button the calendar goes blank - all days disappear.

What I wanted was a modal datepicker that shows the date in dd-mm-yyyy format - is there a way to do that please?

[jaywilburn]

@jaywilburn please look at this example. Did you want it? https://codesandbox.io/s/vuejs-functional-calendar-k1h1c

Yes, thanks!

[ManukMinasyan]

@jamesleonardleonard you need pass date argument like on the date format. Example:

:date-format="'mm-yyyy-dd'" chooseDate('08-2019-05');

:date-format="'yyyy/mm/dd'" chooseDate('2019/08/05');

[oghea]

Hello Manuk,

I try to using props disableDate but its not working, but if im trying to use disabledDayNames its working.

then if i want to use @click in slot or using styles :hover for class its not working too.

Thanks u

[ManukMinasyan]

Hey dear @oghea , please check this example. Thanks. https://codesandbox.io/s/vuejs-functional-calendar-component-t9nlf

[garf]

Is it possible to preset date with v-model? I can't make it work

[ManukMinasyan]

Hey @garf . Now you can set the date using ChooseDate method only. You can add this code to your mounted or created method. And it will work.

this.$refs.Calendar.ChooseDate('2018-12-12');

Thanks.

[garf]

@ManukMinasyan But it's not a date range, right?

[ManukMinasyan]

@garf, yes, if you need to set the date range, you need to use the markedDateRange prop.

[xlcrr]

Just wanted to say thanks!

[garf]

Currently it's not possible to select in a date range a single date. I think it should be allowed, as sometimes you want to select only one day range.

I'll try to prepare the pull request.

[garf]

https://github.com/ManukMinasyan/vue-functional-calendar/pull/33 Here we go :)

[ManukMinasyan]

Thank you @garf :)

[HaileyGermanotta]

Hello Manuk, I try to use props 'markedDates' to display specific dates manually when I switch month page, however, I can not see any mark on these dates. Could you please help me out?

For example, I reset the markedDates array when I jump to October page from November :marked-dates="markedDates"

and I init it as follow, markedDates: [],

this.markedDates = [{ date: '1/10/2019', class: 'marked-class' }, { date: '12/10/2019', class: 'marked-class' }]

[ManukMinasyan]

Hi @HaileyGermanotta . Please share your code.

[HaileyGermanotta]

<FunctionalCalendar
    :date-format="'dd/mm/yyyy'"
    :marked-dates="markedDates"
    @changedMonth="changeMonth">
</FunctionalCalendar>

import { FunctionalCalendar } from 'vue-functional-calendar'
export default {
  components: {
    FunctionalCalendar
  },
  data() {
    return {
        markedDates: [],
    }
  },
  methods: {
     changeMonth(date) {
       // ..... retrieve an array of dates from the server and set to markedDates
       this.markedDates = ['1/11/2019', '2/11/2019']
     }
   }
}

but no marks on the calendar. Did I miss anything? Thank you!

[ManukMinasyan]

@HaileyGermanotta you need to use the computed property for reactive props.

[ManukMinasyan]

Example:

<FunctionalCalendar
    :date-format="'dd/mm/yyyy'"
    :marked-dates="reactiveMarkedDates"
    @changedMonth="changeMonth">
</FunctionalCalendar>

import { FunctionalCalendar } from 'vue-functional-calendar'
export default {
  components: {
    FunctionalCalendar
  },
  data() {
    return {
        markedDates: [],
    }
  },
computed: {
reactiveMarkedDates() {
return this.markedDates;
}
}
  methods: {
     changeMonth(date) {
       // ..... retrieve an array of dates from the server and set to markedDates
       this.markedDates = ['1/11/2019', '2/11/2019']
     }
   }
}

[jjfufu]

Hey !

When using the range mode it would be cool to be able to disable range date, like :

{ start: '13-10-2019', end: '15-10-2019' }

Thx :)

[ManukMinasyan]

@jfustier-it thank you for your suggestion. I will do that)

[ignasga]

First, this component looks really nice, Thank You for your work!

I'd like to suggest better themability, either by exposing few color variables (to easily be able to create for example themes or dark mode etc) or at least documenting what would be the best way to do it.

This would definitely be useful. But until it's implemented, how can we change what colour selected day and current (today) day has? I'm thinking about uverriding some CSS classed, but which should I override exactly?

[ManukMinasyan]

First, this component looks really nice, Thank You for your work! I'd like to suggest better themability, either by exposing few color variables (to easily be able to create for example themes or dark mode etc) or at least documenting what would be the best way to do it.

This would definitely be useful. But until it's implemented, how can we change what colour selected day and current (today) day has? I'm thinking about uverriding some CSS classed, but which should I override exactly?

We have a variables.scss file, you can see this file. And overwrite colors. Thanks