attachTo not working on Kalendae.Input

[reintroducing]

Hello, I am trying to implement Kalendae and my use case calls for attaching it to specific div when using Kalendae.Input. According to the docs that defaults to the body but you can set it to be a different element. If I set it and do the following:

var options = {attachTo: 'container'};
var kal = new Kalendae.Input('input1', options);
console.log(kal.settings); // returns {attachTo: body...}

No matter what I try, the attachTo is always body when logging the settings and it gets attached to, you guessed it, the body.

If I try doing this with new Kalendae() (not input) it attaches to the correct element.

Am I doing something wrong or is this indeed a bug? Appreciate any help offered.

[Twipped]

You can’t pass in a css selector. attachTo has to be a DOMElement such as what you’d get from document.getElementById(), orjQuery(’selector’)[0].

On Oct 16, 2015, at 11:51 AM, Matt Przybylski notifications@github.com wrote:

Hello, I am trying to implement Kalendae and my use case calls for attaching it to specific div when using Kalendae.Input. According to the docs that defaults to the body but you can set it to be a different element. If I set it and do the following:

var options = {attachTo: 'container'}; var kal = new Kalendae.Input('input1', options); console.log(kal.settings); // returns {attachTo: body...} No matter what I try, the attachTo is always body when logging the settings and it gets attached to, you guessed it, the body.

If I try doing this with new Kalendae() (not input) it attaches to the correct element.

Am I doing something wrong or is this indeed a bug? Appreciate any help offered.

— Reply to this email directly or view it on GitHub https://github.com/ChiperSoft/Kalendae/issues/158.

[reintroducing]

I tried that as well which also didn't work. For this purpose assume that 'container' in my example above was an ID, but either way, an actual DOM element doesn't work either.

Truth be told I'm writing a wrapper around this for a React component for our project and I was pointing it to this.refs.container (which would return the DOM element that container points to) but I changed it to show the example above. I also tried (just for the sake of it) selecting an element on the page with jQuery as you specified in your second bit of code and that too did not work (because I thought that React wasn't passing the reference back properly, but no dice).

[Twipped]

Actually I'm wrong, it can be a string element id. attachTo defaults to the body tag and gets overwritten with what you pass on the constructor options. If what you pass can't be resolved into an element it doesn't attach to anything at all.

You can also see it being used that way in the auto attachment code.

You could try manually appending the calendar container (instance.container) after initializing it.

[reintroducing]

I can try to manually append it, but is this not a bug then? My element does resolve, I can log it properly and all of this is happening after the component is mounted (which in React means it's in the DOM). Am I mistaken in thinking that my implementation should work properly?

[Twipped]

I've not used Kalendae with react, so I don't know what the integration involvement is. React does a lot of funny things with the DOM, so I'm not entirely surprised it wouldn't mesh cleanly.

I can tell you, however, that attachTo absolutely is working as intended. If it didn't, nothing on the demo page would work.

[Twipped]

OH! I missed that you were referring to Kalendae.Input. I was thinking this was just a normal kalendae instance. Input does not support the attachTo option, the element must be bound to the body so that it avoids alignment, overflow and clipping problems.

[reintroducing]

Ah, and there in is the problem :) The docs make it seem like attachTo can apply to Input as well. May want to update them to reflect that its not possible. Thanks for clearing that up!

All this aside, this is a fantastic project and I just want to thank you for all the work you put into this.