Skip to content

Latest commit

 

History

History
298 lines (236 loc) · 7.71 KB

getting-started.md

File metadata and controls

298 lines (236 loc) · 7.71 KB
Raw

Getting Started

Table of Contents

Install Vue 2

To use TOAST UI Calendar for Vue, Vue 2 should be installed. Vue 3 is not supported.

Installation

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.

Using the 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

npm install @toast-ui/vue-calendar # latest version
npm install @toast-ui/vue-calendar@<version> # specific version

How to use the calendar

JavaScript

Importing modules

There 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;

Loading bundle files for legacy browsers

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');

CSS

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" />

Vue

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,
  },
});

Props

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>

Events

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>

Methods

💡 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.

getRootElement

  • Type: getRootElement(): HTMLDivElement
  • Returns: HTMLDivElement - the element on which the calendar is mounted

Return the element on which the calendar is mounted.

getInstance

  • 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>

Basic usage

Disable to collect hostname for Google Analytics(GA)

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>