Vue Agenda External Date Navigation Example

This example demonstrates how can the Agenda navigated externally. Here we have a two-pane layout with a Datepicker on the left and an Agenda on the right. Changing date on the Datepicker will trigger the date change on the Agenda.

The Datepicker updates the selectedDate option of the Agenda in its @change event, while the Agenda updates the datepicker value from its @selected-date-change event.

Get started with this example

Preview in full screen

Use a two-pane layout with a date picker and a agenda view — selecting a date in the picker, sync the agenda.

<script setup>
import {
  getJson,
  MbscDatepicker,
  MbscEventcalendar,
  setOptions 
} from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
})

const myEvents = ref([])
const mySelectedDate = ref(new Date())
const dayView = { agenda: { type: 'day' } }

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/events/?vers=5',
    (events) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <div class="mds-external-nav-agenda mbsc-flex">
    <div class="mds-external-nav-dp">
      <MbscDatepicker
        display="inline"
        :value="mySelectedDate"
        @change="mySelectedDate = $event.value"
      />
    </div>
    <div class="mds-external-nav-ec mbsc-flex-1-1">
      <MbscEventcalendar
        :data="myEvents"
        :selectedDate="mySelectedDate"
        :view="dayView"
        @selected-date-change="mySelectedDate = $event.date"
      />
    </div>
  </div>
</template>

<style>
.mds-external-nav-agenda {
  height: 100%;
}

.mds-external-nav-dp .mbsc-datepicker-inline {
  height: auto;
}

.mds-external-nav-ec {
  border-left: 1px solid #ccc;
}

@media screen and (max-width: 700px) {
  .mds-external-nav-agenda {
    display: block;
  }
}
</style>

<script setup lang="ts">
import {
  getJson,
  MbscDatepicker,
  MbscEventcalendar,
  setOptions 
} from '@mobiscroll/vue'
import type {
  MbscCalendarEvent,
  MbscDatepickerChangeEvent,
  MbscDateType,
  MbscEventcalendarView,
  MbscSelectedDateChangeEvent
} from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
})

const myEvents = ref<MbscCalendarEvent[]>([])
const mySelectedDate = ref<MbscDateType>(new Date())
const dayView: MbscEventcalendarView = { agenda: { type: 'day' } }

function handleDateChange(args: MbscDatepickerChangeEvent) {
  mySelectedDate.value = args.value as MbscDateType
}

function handleSelectedDateChange(args: MbscSelectedDateChangeEvent) {
  mySelectedDate.value = args.date
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/events/?vers=5',
    (events: MbscCalendarEvent[]) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <div class="mds-external-nav-agenda mbsc-flex">
    <div class="mds-external-nav-dp">
      <MbscDatepicker
        display="inline"
        :value="mySelectedDate"
        @change="mySelectedDate = $event.value"
      />
    </div>
    <div class="mds-external-nav-ec mbsc-flex-1-1">
      <MbscEventcalendar
        :data="myEvents"
        :selectedDate="mySelectedDate"
        :view="dayView"
        @selected-date-change="mySelectedDate = $event.date"
      />
    </div>
  </div>
</template>

<style>
.mds-external-nav-agenda {
  height: 100%;
}

.mds-external-nav-dp .mbsc-datepicker-inline {
  height: auto;
}

.mds-external-nav-ec {
  border-left: 1px solid #ccc;
}

@media screen and (max-width: 700px) {
  .mds-external-nav-agenda {
    display: block;
  }
}
</style>

External Date Navigation

Duplicate Session

Duplicate Session

Demo

Code

Duplicate Session

Duplicate Session