The agenda includes print optimized styling through the print add-on. This needs to be added to the download package or installed separately from a dedicated NPM package.
Print styling is applied when print is called on a page that contains the agenda. In addition to that, you can call the print method on the instance which grabs only the markup of the agenda places it onto a temporary page and calls the browsers printing function. This is especially useful when you want to add a button to only print the agenda rather than the whole page.
Besides printing, PDF export is possible through the print dialog of the browser.
The print module is not available in the trial. You can try the live demo to see how it looks.
Demo
By calling the print method, the agenda will open a new window and print its content.
<script setup>
const calendarRef = ref(null)
const myView = {
agenda: { type: 'month' }
}
function printView() {
calendarRef.value.instance.print()
}
</script>
<template>
<MbscEventcalendar
ref="calendarRef"
:view="myView"
:modules="[print]"
/>
</template>
SFC JSSFC TS
<script setup>
import { print } from '@mobiscroll/print'
import {
getJson,
MbscButton,
MbscEventcalendar,
MbscPage,
setOptions
} from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const inst = ref(null)
const myEvents = ref([])
const myView = { agenda: { type: 'month' } }
function printView() {
inst.value.instance.print()
}
onMounted(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events) => {
myEvents.value = events
},
'jsonp'
)
})
</script>
<template>
<MbscPage className="mds-full-height">
<div className="mds-full-height mbsc-flex-col">
<div className="mbsc-flex-none">
<MbscButton @click="printView()" startIcon="print"> Print agenda </MbscButton>
</div>
<div className="mds-overflow-hidden mbsc-flex-1-1">
<MbscEventcalendar ref="inst" :data="myEvents" :modules="[print]" :view="myView" />
</div>
</div>
</MbscPage>
</template>
<style>
.mds-full-height {
height: 100%;
}
.mds-overflow-hidden {
overflow: hidden;
}
</style><script setup lang="ts">
import { print } from '@mobiscroll/print'
import {
getJson,
MbscButton,
MbscEventcalendar,
MbscPage,
setOptions
} from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView } from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const inst = ref<typeof MbscEventcalendar>()
const myEvents = ref<MbscCalendarEvent[]>([])
const myView: MbscEventcalendarView = { agenda: { type: 'month' } }
function printView() {
inst.value!.instance.print()
}
onMounted(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events: MbscCalendarEvent[]) => {
myEvents.value = events
},
'jsonp'
)
})
</script>
<template>
<MbscPage className="mds-full-height">
<div className="mds-full-height mbsc-flex-col">
<div className="mbsc-flex-none">
<MbscButton @click="printView()" startIcon="print"> Print agenda </MbscButton>
</div>
<div className="mds-overflow-hidden mbsc-flex-1-1">
<MbscEventcalendar ref="inst" :data="myEvents" :modules="[print]" :view="myView" />
</div>
</div>
</MbscPage>
</template>
<style>
.mds-full-height {
height: 100%;
}
.mds-overflow-hidden {
overflow: hidden;
}
</style>