Support for Flatpickr plugins

[Kethet]

I have an app that needs to do week selection.

The Flatpickr library comes with a plugin for this, but it is not currently support by this library.

I have tried the following

// Somewhere before the app loads
importAll "flatpickr/dist/themes/material_green.css"
importAll "flatpickr/dist/plugins/weekSelect/weekSelect.js"

// Inside some view/div
Flatpickr.flatpickr
    [
        Flatpickr.EnableWeekNumbers true
        Flatpickr.custom "plugins" "[new weekSelect({})]" true
    ]

Though that gives the following error

"TypeError: self.config.plugins[i] is not a function\n    at parseConfig (webpack:///./node_modules/flatpickr/dist/flatpickr.js?:1976:56)\n    at init (webpack:///./node_modules/flatpickr/dist/flatpickr.js?:587:13)\n    at FlatpickrInstance (webpack:///./node_modules/flatpickr/dist/flatpickr.js?:2521:9)\n    at _flatpickr (webpack:///./node_modules/flatpickr/dist/flatpickr.js?:2540:35)\n    at new flatpickr (webpack:///./node_modules/flatpickr/dist/flatpickr.js?:2567:20)\n    at DateTimePicker.componentDidMount (webpack:///./node_modules/react-flatpickr/build/index.js?:118:24)\n    at commitLifeCycles (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:22101:22)\n    at commitLayoutEffects (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:25344:7)\n    at HTMLUnknownElement.callCallback (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:336:14)\n    at Object.invokeGuardedCallbackDev (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:385:16)"

If I change the true to false It doesn't give an error, but no changes in functionality are observed.

I have tried my best at adding support for this using [<Emit>]ers, but I'm too new to Fable to get it to work.

[spingee]

I tried

[<Emit("new rangePlugin({})")>] let inline rangePlugin():string = jsNative

Flatpickr.flatpickr [
Flatpickr.DateFormat "m.y" Flatpickr.custom "plugins"
[|rangePlugin()|]
true Flatpickr.ClassName "input" ]

which will emit proper js

(\"plugins\", [new rangePlugin({})], true)

but it looks like rangeplugin is not properly referneced

i tried importAll "flatpickr/dist/plugins/weekSelect/weekSelect.js" and import "rangePlugin" "flatpickr/dist/plugins/rangePlugin"

@Zaid-Ajaj can you please lead us to a proper way?

[spingee]

So i was able to get it works this way:

importAll "flatpickr/dist/plugins/monthSelect/style.css"
let monthSelectPlugin (x: obj): obj -> obj =
    importDefault "flatpickr/dist/plugins/monthSelect"

Flatpickr.flatpickr [
                                      Flatpickr.DateFormat "m.y"
                                      Flatpickr.custom
                                          "plugins"
                                          [| monthSelectPlugin
                                              ({| shorthand = true
                                                  dateFormat = "m.y"
                                                  altFormat = "F Y" |}) |]
                                          true
                                      Flatpickr.Locale Flatpickr.Locales.czech
                                      Flatpickr.ClassName "input" ]

[bdaniel7]

Thank you very much! Based on this fable-flatpickr project, and this issue, I was able to successfully implement a Fable binding for FullCallendar, that can be used like this:

FullCalendar.fullCalendar  [
          FullCalendar.Plugins [| dayGridPlugin; interactionPlugin; timeGridPlugin |]
          FullCalendar.HeaderToolbar [ ToolbarSection.Left, "prev,next today"
                                       ToolbarSection.Center, "title"
                                       ToolbarSection.Right, "dayGridMonth,timeGridWeek,timeGridDay"
                                    ]
           FullCalendar.EventClick (HandleDateSelected >> dispatch)
           FullCalendar.DateClick (ClickOnSelectedDate >> dispatch)
           FullCalendar.Editable true
           FullCalendar.Droppable true
           FullCalendar.InitialView "dayGridMonth"
           FullCalendar.EventColor "red"
       ]

But boy, what a struggle to find something helpful...

[washington-more]

@spingee Good morning, a question? This code also works for you to be able to visualize from the Y-m cell phone.