To use TOAST UI Calendar for Vue, Vue 2 should be installed. Vue 3 is not supported.
TOAST UI products can be used by using the package manager or by directly downloading the source code. However, it is recommended to use a package manager.
TOAST UI products are registered in the npm package registry. You can easily install packages using CLI tools provided by each package manager. To use npm, you need to install Node.js in advance.
npm install @toast-ui/vue-calendar # latest version
npm install @toast-ui/vue-calendar@<version> # specific versionThere are three ways to import TOAST UI Calendar for Vue depending on the environment.
/* ES6 module in Node.js environment */
import Calendar from '@toast-ui/vue-calendar';/* CommonJS in Node.js environment */
const Calendar = require('@toast-ui/vue-calendar');/* in the browser environment namespace */
const Calendar = tui.VueCalendar;TOAST UI Calendar for Vue provides a separate bundle file for legacy browsers. The basic bundle provides stable support for the latest two versions of the modern browser. However, the basic bundle does not include a polyfill for IE11, so to support IE11 or similar level of legacy browsers, you need to add the IE11 bundle that includes a polyfill as follows.
Since the bundle size of IE11 is about 2x larger than that of the default bundle, you must take care not to increase the bundle size unnecessarily by considering the range of support.
/* ES6 module in Node.js environment */
import Calendar from '@toast-ui/vue-calendar/ie11';/* CommonJS in Node.js environment */
const Calendar = require('@toast-ui/vue-calendar/ie11');To use the calendar, you need to add a CSS file of TOAST UI Calendar. You can import CSS files through import and require, or you can import them through CDN.
/* ES6 module in Node.js environment */
import '@toast-ui/calendar/dist/toastui-calendar.min.css'; // Stylesheet for calendar/* CommonJS in Node.js environment */
require('@toast-ui/calendar/dist/toastui-calendar.min.css');<!-- CDN -->
<link rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.css" />You can load a calendar component and add it to the components in your component or Vue instance.
<template>
<Calendar style="height: 800px" />
</template>
<script>
import Calendar from '@toast-ui/vue-calendar';
import '@toast-ui/calendar/dist/toastui-calendar.min.css';
export default {
name: 'YourComponent',
components: {
Calendar,
},
};
</script>import Calendar from '@toast-ui/vue-calendar';
import '@toast-ui/calendar/dist/toastui-calendar.min.css';
new Vue({
el: '#app',
components: {
Calendar,
},
});TOAST UI Calendar for Vue provide props for options of TOAST UI Calendar. Each name of props is same with options of Toast UI Calendar except view is for defaultView.
Additionally, it provides a events prop to add events.
<template>
<Calendar
style="height: 800px"
:view="view"
:use-detail-popup="true"
:month="month"
:calendars="calendars"
:events="events"
/>
</template>
<script>
import Calendar from '@toast-ui/vue-calendar';
import '@toast-ui/calendar/dist/toastui-calendar.min.css';
export default {
name: 'YourComponent',
components: {
Calendar,
},
data() {
return {
view: 'month',
month: {
dayNames: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
visibleWeeksCount: 3,
},
calendars: [{ id: 'cal1', name: 'Personal' }],
events: [
{
id: '1',
calendarId: 'cal1',
title: 'Lunch',
category: 'time',
start: '2022-06-28T12:00:00',
end: '2022-06-28T13:30:00',
},
{
id: '2',
calendarId: 'cal1',
title: 'Coffee Break',
category: 'time',
start: '2022-06-28T15:00:00',
end: '2022-06-28T15:30:00',
},
],
};
},
};
</script>You can use the v-on directive to handle the calendar instance events. For more information such as the parameters of each event, see TOAST UI Calendar Instance Events.
<template>
<Calendar
style="height: 800px"
ref="calendar"
@selectDateTime="onSelectDateTime"
@beforeCreateSchedule="onBeforeCreateSchedule"
/>
</template>
<script>
import Calendar from '@toast-ui/vue-calendar';
import '@toast-ui/calendar/dist/toastui-calendar.min.css';
export default {
name: 'YourComponent',
components: {
Calendar,
},
methods: {
onSelectDateTime({ start, end }) {
alert(`Select ${start} ~ ${end}`);
},
onBeforeCreateSchedule(event) {
const calendarInstance = this.$refs.calendar.getInstance();
calendarInstance.createEvents([
{
...event,
id: uuid(),
}
]);
},
},
};
</script>馃挕 Click on a method to see more detailed explanations and usage examples.
| Method | Description |
|---|---|
| getRootElement | Return the element on which the calendar is mounted. |
| getInstance | Return the calendar instance. |
- Type:
getRootElement(): HTMLDivElement - Returns:
HTMLDivElement- the element on which the calendar is mounted
Return the element on which the calendar is mounted.
- Type:
getInstance(): Calendar - Returns:
Calendar- the calendar instance
Return the calendar instance. You can use this to call the calendar instance methods.
<template>
<Calendar
style="height: 800px"
ref="calendar"
/>
</template>
<script>
import Calendar from '@toast-ui/vue-calendar';
import '@toast-ui/calendar/dist/toastui-calendar.min.css';
export default {
name: 'YourComponent',
components: {
Calendar,
},
computed: {
calendarInstance() {
return this.$refs.calendar.getInstance();
}
},
mounted() {
this.calendarInstance.setDate('2022-06-29T12:30:00');
}
};
</script>TOAST UI Calendar applies GA to collect statistics on open source usage to see how widespread it is around the world. This serves as an important indicator to determine the future progress of the project. It collects location.hostname (e.g. "ui.toast.com") and is only used to measure usage statistics.
To disable GA, set the usageStatistics prop to false:
<template>
<Calendar :usage-statistics="false"/>
</template>