Show method does not show calendar

[chunhoong]

I am using bulma-calendar in my Vue application. The calendar is not shown after I invoke show method. Here is my code snippet:

sample.vue

<template>
  <div>
    <input ref="calendarTrigger" />

    <button @click="showCalendar">Show the calendar</button>
  </div>
</template>

<script>
import bulmaCalendar from 'bulma-calendar'

export default {
  data() {
    return {
      calendar: null
    }
  },
  methods: {
    showCalendar() {
      this.calendar.show()
    }
  },
  mounted() {
    this.calendar = bulmaCalendar.attach(this.$refs.calendarTrigger, {
      type: 'date',
      displayMode: 'default'
    })[0]
  }
}
</script>

[lakano]

I have the same problem... did you find a solution @chunhoong ?

[lakano]

I've created a workaround, I share my solution here:

In your template:

<a class="button" @click="calendarShow($refs.calendarTrigger)">show calendar</a>

In your methods:

methods: {
		/**	
		 * Show the calendar ( workaround of buggy calendar.show() )
		 *
		 *	@param {HTMLElement} cal - The calendarTrigger element
		 */
		calendarShow(cal) {
			this.updateClass(cal.parentNode, 'is-hidden', 'is-active')
			this.updateClass(cal.parentNode.parentNode, 'is-hidden', 'is-active')
			this.updateClass(cal.parentNode.parentNode.parentNode.lastElementChild, 'is-hidden', 'is-active')
		},



		/**	
		 * Update classes of an element
		 *
		 *	@param {HTMLElement} e		- Element
		 *	@param {String} [removeStr]	- List of classes to remove (eg: 'old')
		 *	@param {String} [addStr]	- List of classes to add (eg: 'new addThis')
		 */
		updateClass (e, removeStr, addStr) {

			let classes = e.className.trim().replace('  ', ' ').split(' ')
			if (removeStr) {
				const remove = removeStr.trim().replace('  ', ' ').split(' ')
				for (const r of remove) {
					classes = classes.filter(n => n !== r)
					c.log({ removed: r, classes })
				}
			}
			if (addStr) {
				const add = addStr.trim().replace('  ', ' ').split(' ')
				for (const a of add) {
					classes.push(a)
					c.log({ added: a, classes })
				}
			}
			e.className = classes.join(' ')
		},
}