Open lfmunoz opened 2 years ago
Was trying to get this to work on vuejs3 but it won't update the dates on the calendar. See the watch section for how I was trying to do that. It updates the dates but the ranges don't change to select the updates ranges.
<template> <input ref="refCal" :type="refType" /> </template> <script> import { watch, ref, defineEmits, onMounted} from 'vue'; import bulmaCalendar from "bulma-calendar/dist/js/bulma-calendar.min"; export default { emits: ['update:modelValue'], setup(props, { emit }) { const refCal = ref(null); const refType = ref(props.type); const refDate = ref([null, null]); // Set date if (props.range) { if (props.modelValue instanceof Array) { refDate.value = props.modelValue; } } else { refDate.value[0] = props.modelValue; } // can only access ref after mounted onMounted(() => { // Attach Calendar const calendar = bulmaCalendar.attach(refCal.value, { ...props.options, displayMode: props.inline ? 'inline' : (props.dialog ? 'dialog' : 'default'), // isRange: props.range, isRange: true, showClearButton: props.clearable, startDate: refDate.value[0], startTime: refDate.value[1], endDate: refDate.value[0], endTime: refDate.value[1], }); // Event Handler calendar[0].on('save', e => { refDate.value = [e.data.startDate, e.data.endDate]; if (props.range) { emit('update:modelValue', refDate.value); return; } emit('update:modelValue', refDate.value[0]); }); console.log(calendar); // https://github.com/Wikiki/bulma-calendar/blob/master/src/js/index.js watch( () => { console.log(props.modelValue) // calendar[0].clear() // calendar[0].setStartDate(props.modelValue[0]) // calendar[0].startDate = props.modelValue[0] // calendar[0].endDate = props.modelValue[1] // calendar[0].refresh() }); }) return { refType, refCal, refDate } }, props: { clearable: { type: Boolean, default: false }, dialog: { type: Boolean, default: false }, inline: { type: Boolean, default: false }, range: { type: Boolean, default: false }, options: { type: Object, default() { return {}; } }, type: { type: String, default: 'datetime' }, modelValue: Date|Array|null }, } </script>
Sorry, I can't help with VueJS 3 at the moment, as I use the calendar exclusively in conjunction with Buefy, which is still based on VueJS 2.
Is this still the case? bulma-calendar is not available for Vue3?
Was trying to get this to work on vuejs3 but it won't update the dates on the calendar. See the watch section for how I was trying to do that. It updates the dates but the ranges don't change to select the updates ranges.