3rd Party Integration

• Getting Started
  • Introduction
  • Installation
  • Tutorial
  • Learning Resources
  • Getting Help
• Resources
  • JSX
  • ES6
  • CSS
  • Animation
  • Testing
  • Examples
  • 3rd Party Integration
• Key concepts
  • Vnodes
  • Components
  • Lifecycle methods
  • Keys
  • Autoredraw system
• Social
  • Mithril Jobs
  • How to contribute
  • Credits
  • Code of Conduct
• Misc
  • Framework comparison
  • Change log/Migration

Integration with third party libraries or vanilla javascript code can be achieved via lifecycle methods.

Example

var FullCalendar = {

    oncreate: function (vnode) {
        console.log('FullCalendar::oncreate')
        $(vnode.dom).fullCalendar({
            // put your initial options and callbacks here
        })

        Object.assign(vnode.attrs.parentState, {fullCalendarEl: vnode.dom})
    },

    // Consider that the lib will modify this parent element in the DOM (e.g. add dependent class attribute and values).
    // As long as you return the same view results here, mithril will not
    // overwrite the actual DOM because it's always comparing old and new VDOM
    // before applying DOM updates.
    view: function (vnode) {
        return m('div')
    },

    onbeforeremove: function (vnode) {
        // Run any destroy / cleanup methods here.
        //E.g. $(vnode.state.fullCalendarEl).fullCalendar('destroy')
    }
}

m.mount(document.body, {
    view: function (vnode) {
        return [
            m('h1', 'Calendar'),
            m(FullCalendar, {parentState: vnode.state}),
            m('button', {onclick: prev}, 'Mithril Button -'),
            m('button', {onclick: next}, 'Mithril Button +')

        ]

        function next() {
            $(vnode.state.fullCalendarEl).fullCalendar('next')
        }

        function prev() {
            $(vnode.state.fullCalendarEl).fullCalendar('prev')
        }

    }

})

Running example flems: FullCalendar