Vue Forms Inside a modal Example

When working with the event calendar you will usually want to show an add/edit form in a popup rather than render it directly into the page markup. Simply configure the popup and add your form fields to it.

Interested in add/edit screens for events? Check out this example of a fully functional event form →

Get started with this example

Javascript jQuery Angular React Vue

                        <script setup>
const popupOpen = ref(false)
const popupAnchor = ref(null)
const popupButtons = ['set', 'cancel']

function handleClick(ev) {
  popupAnchor.value = ev.target
  popupOpen.value = true
}

function handleClose() {
  popupOpen.value = false
}
</script>

<template>
  <MbscButton @click="handleClick">Show modal</MbscButton>
  <MbscPopup
    display="anchored"
    :isOpen="popupOpen"
    :anchor="popupAnchor"
    :buttons="popupButtons"
    :contentPadding="false"
    @close="handleClose"
  >
    <div class="mbsc-form-group">
      <MbscInput label="Title" />
      <MbscTextarea label="Description" />
    </div>
    <div class="mbsc-form-group">
      <MbscSwitch label="All-day" />
      <MbscInput label="Starts" />
      <MbscInput label="Ends" />
      <MbscSegmentedGroup>
        <MbscSegmented  :defaultChecked="true">Show as busy</MbscSegmented>
        <MbscSegmented>Show as free</MbscSegmented>
      </MbscSegmentedGroup>
    </div>
  </MbscPopup>
</template>
                