mithril-vndb/docs/integrating-libs.md

3rd Party Integration

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