Since the latest update (v1.3.2) the functional calendar is not working as before. If you update the markDate array it doesn't change this in the calendar. Only the initial dates are visible.

A user opens the Date Picker (with date range) for the first time and select Start Date and End Date. Date range between Start and End date is highlighted. Screenshot here Then the user opens the Date Picker again. Screenshot here

Actual result: Date range between Start and End date is not highlighted. CSS class .vfc-marked.vfc-hover that make date range highlighted is absent.

Expected result: Date range between Start and End date displays as highlighted and CSS class .vfc-marked.vfc-hover presents.

In mounted() method I use this.$refs.Calendar.ChooseDate('15.04.2020') to set date, but still initial display is only placeholder dd.mm.yyyy. When I click to field it shows datepicker and after the pick, I see the chosen date in the input field.

In this example, the end date has been picked but the start date shows only the placeholder.

How can I show the initial date in the input field?

This is my config:

calendarData: {},
calendarConfig: {
	showWeekNumbers: true,
	changeMonthFunction: true,
	changeYearFunction: true,
	changeYearStep: 1,
	calendarsCount: 1,
	isModal: true,
	isAutoCloseable: true,
	isDatePicker: true,
	isMultiple: true,
	isMultipleDatePicker: true,
	isDateRange: false,
	isTypeable: true,
	transition: true,
	sundayStart: false,
	placeholder: false,
	dateFormat: 'dd.mm.yyyy'
}

Hi,

importing the package in the main.js file i've this error

Could not find a declaration file for module 'vue-functional-calendar'. '/home/xxx/app/frontend/node_modules/vue-functional-calendar/index.js' implicitly has an 'any' type.
  Try `npm install @types/vue-functional-calendar` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-functional-calendar';`ts(7016)

I've tried to download the types declaration file, but i receive 404 error

Not Found - GET https://registry.npmjs.org/@types%2fvue-functional-calendar - Not found

so if i try to replace the import statement with

const FunctionalCalendar = require('./vue-functional-calendar')

i receive the error

Module build failed: TypeError: this.getResolve is not a function
    at Object.loader (/home/xxx/app/frontend/node_modules/sass-loader/dist/index.js:52:26)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-e
b8491ac","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?ty
pe=styles&index=0!./node_modules/vue-functional-calendar/src/components/FunctionalCalendar.vue 4:14-344 13:3-17:5 14:22-352
 @ ./node_modules/vue-functional-calendar/src/components/FunctionalCalendar.vue
 @ ./node_modules/vue-functional-calendar/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

In the end i've tried to create a declaration file (index.d.ts, FunctionalCalendar.d.ts, vue-functional-calendar.d.ts) with

declare module 'vue-functional-calendar'

but even this attemps was unsuccessful. I'm sorry but i'm a beginner about frontend development so i restricted to some example founded on SO. I be afraid that this error depends on my envinronment

from package.json

 "dependencies": {
    "ag-grid-community": "^20.2.0",
    "ag-grid-vue": "^20.2.0",
    "node-sass": "^4.12.0",
    "npm": "^6.11.3",
    "sass-loader": "^8.0.0",
    "semantic-ui": "^2.4.2",
    "semantic-ui-vue": "^0.8.1",
    "vue": "^2.5.2",
    "vue-functional-calendar": "^2.6.0",
    "vue-property-decorator": "^8.2.2",
    "vue-router": "^3.1.3",
    "vue2-datepicker": "^2.12.0",
    "vuelidate": "^0.7.4",
    "vuex": "^3.1.1"
  }

Best regards

Thanks for the great work on this project! This simple PR will emit an event each time a day is clicked, allowing the parent component to do something, for example show a list of events on that day.

First of all great work!

While trying out the component I ran into issues with the time-picker esp. in modal-mode and in combination with date-ranges. Let's say you got a single-date picker with "with-time-picker" and "is-modal" set to true, on click the date-picker will open and work fine. Right after selecting a date the time-picker will be shown, but its width only is the width of hours and minutes so the closing-X overlays with the headline (but still is useable).

Second problem, if used as date-range, again with is-modal and with-time-picker set to true first you'll get the date picker, followed by first time selection (which has to be closed by clicking on the x; closing after selecting the desired minute might be more conveniant) and afterwards followed by second date selection and second time selection. Now after second time selection the first date selection will be shown again and can only be closed by clicking into the form-field, not by clicking somewhere random on the screen nor by hitting "ESC" on the keyboard.

Sometimes when I furthermore add "is-auto-closeable" the modal will be closed after second date selection without even showing the second time-picker.

Tried on Google Chrome Version 80.0.3987.116 (Official Build) (64-bit) and Mozilla Firefox 72.0.2 (64-bit)

While running tests in Jest, I received this:

DateRange.vue.js.test `Test suite failed to run

/Users/jaywilburn/Code/HLT/hlt-cms/node_modules/vue-functional-calendar/index.js:2
import FunctionalCalendar from './src/components/FunctionalCalendar';
       ^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier

  13 | 
  14 | <script>
> 15 | import { FunctionalCalendar } from 'vue-functional-calendar'
     | ^
  16 | export default {
  17 |   props: ['selectedSearchKey'],
  18 |   components: { FunctionalCalendar },

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)`

It's not able to read the import from the right path Any ideas?

hi， Manuk, thanks for your calendar, however, I find a bug when I have chosen my date range across the month, then I change my date range in the next month, the previous style is still here. can you fix it as soon as possible? thank you.

I tried quite a bunch of ways:

• updating :calendar prop
• updating :config prop
• updating :value prop
• calling .updateCalendar()

and only re-rendering of the whole component worked

BTW: great job and thanks!

hi, I need to set current-day of my calendar to a fixed timezone date and the newCurrentDate property doesn't work as it is supposed to.

here is my code example

 <functional-calendar
                  ref="selectDate"
                  v-model="calendarData"
                  :is-date-picker="true"
                  date-format="mm/dd/yyyy"
                  :limits="limits"
                  :new-current-date="new Date(2021, 10, 11)" // doesn't work
                  @choseDay="handleClickDay"
                ></functional-calendar>

Hi, I'm having one issue with the date picker. I have two inputs for the pickup date and dropoff date and I'm trying to use DayJS to calculate the difference between the days.

Is it possible to get the selectedDate in the same format as currentDate?

dropOffDate:Object
     currentDate:Wed Sep 23 2020 16:07:38 GMT+0000 (Greenwich Mean Time)
     dateRange:Object
     multipleDateRange:Array[0]
     selectedDate:"26/9/2020"
     selectedDateTime:false
     selectedDates:Array[0]
     selectedDatesItem:""
     selectedHour:"00"
     selectedMinute:"00"

Because if I try to format the selectedDate, DayJS says it's an Invalid Date

dayjs(this.booking.dropOffDate.selectedDate);