integration problem with calender

[lakhank295]

1. Can't bind to 'enableTime' since it isn't a known property of 'input'. ("
2. Can't bind to 'convertModelValue' since it isn't a known property of 'input'. ("
3. Can't bind to 'altInput' since it isn't a known property of 'input'. ("
4. Can't bind to 'enableTime' since it isn't a known property of 'input'. ("
5. Can't bind to 'convertModelValue' since it isn't a known property of 'input'. (" 6.Can't bind to 'altInput' since it isn't a known property of 'input'. ("

I am getting above error messages while integrating angular-calender into my angular project. please help. Thank you in advance.

[callen1994]

I ran into similar problems when I was looking to get it figured out. I got it working by using the kitchen sink demo on this page: https://mattlewis92.github.io/angular-calendar/#/kitchen-sink

To make sure you have everything good to go, look at the "module.ts" tab of the kitchen sink demo. There you can see all the module imports. Make sure those imports are properly configured on your app-module.ts file. If you're missing any of the dependencies (I was missing flatpickr and ng-bootstrap) just npm install them

[mattlewis92]

@callen1994 is right, you need to add the angularx-flatpickr package (or just delete the event editor code if your app doesn't need it, it's just for the demo)

[Ashish-TalentMicro]

npm install --save flatpickr angularx-flatpickr This'll work.

[ramkumar-siriyala]

i am not getting dates to select, can any one help me

[Karl-kartl]

@ramkumar-siriyala same thing happening here. Any workaround that you found?

[Karl-kartl]

@ramkumar-siriyala I found a work around

Just enable the date using range in the <input/> tag of template.html where the code resides for picking date

<input class="form-control" type="text" mwlFlatpickr [enable]="[{ from: '2020-04-01', to: '2030-05-01' }]" [(ngModel)]="event.end" (ngModelChange)="refresh.next()" [altInput]="true" [convertModelValue]="true" [enableTime]="true" dateFormat="Y-m-dTH:i" altFormat="F j, Y H:i" placeholder="Not set" />

Reference https://flatpickr.js.org/options/

[grmvishnu]

I am getting an issue with flatpickr where it is not being used as a pop-up when I click the start date and end date, same as in the kitchen sink demo. The code for that html is:

Can someone please help me with this, to format the flatpickr correctly?

[akbarhafeezbutt]

@grmvishnu In your angular.json => add "node_modules/flatpickr/dist/flatpickr.css" to the styles array of your application. It will work 100%.