vue toast_TOAST UI日历的Vue.js包装器

vue toast

Vue TOAST UI日历 (Vue TOAST UI Calendar)

A Vue.js wrapper for TOAST UI Calendar.

TOAST UI日历的Vue.js包装器。

安装 (Installation)

npm install --save tui-calendar @lkmadushan/vue-tuicalendar

用法 (Usage)

例 (Example)

Try out this Code Sandbox

试用此代码沙箱

捆绑器(Webpack，汇总) (Bundler (Webpack, Rollup))

import Vue from 'vue'
import VueTuicalendar from '@lkmadushan/vue-tuicalendar'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'tui-calendar/dist/tui-calendar.min.css'

Vue.use(VueTuicalendar)

// or

import { VueTuicalendar } from '@lkmadushan/vue-tuicalendar'

<template>
  <vue-tuicalendar
    ref="calendar"
    :options="options"
    :schedules="schedules"
    @after-render-schedule="handler"
    @before-render-schedule="handler"
    @click-schedule="handler"
  >
  </vue-tuicalendar>
</template>

...
<script>
...
  data() {
    return {
      schedules: [
        {
          id: "1",
          calendarId: "1",
          title: "A schedule",
          category: "time",
          dueDateClass: "",
          start: "2018-05-22T22:30:00+09:00",
          end: "2018-05-23T02:30:00+09:00"
        },
        {
          id: "2",
          calendarId: "1",
          title: "Another schedule",
          category: "time",
          dueDateClass: "",
          start: "2018-05-23T17:30:00+09:00",
          end: "2018-05-24T17:31:00+09:00",
          isReadOnly: true
        }
      ]
    }
  }
  
  methods: {
    mounted() {
      this.$refs.calendar.fireMethod('clear');
      this.$refs.calendar.fireMethod('getElement');
      this.$refs.calendar.fireMethod('changeView', 'month', true);
      
      this.$refs.calendar.registerEvent('beforeDeleteSchedule', (event) {
        // do stuff here
      })
    }
  }
...
</script>

More options can be found at https://nhnent.github.io/tui.calendar/latest/Calendar.html

更多选项可以在https://nhnent.github.io/tui.calendar/latest/Calendar.html找到

浏览器 (Browser)

<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-tuicalendar/dist/@lkmadushan/vue-tuicalendar.js"></script>

<!-- From CDN -->
<script src="https://unpkg.com/@lkmadushan/vue-tuicalendar"></script>

发展历程 (Development)

启动视觉测试 (Launch visual tests)

npm run dev

发起因果报应 (Launch Karma with coverage)

npm run dev:coverage

建立 (Build)

Bundle the js and css of to the dist folder:

将的js和CSS捆绑到dist文件夹：

npm run build

出版 (Publishing)

The prepublish hook will ensure dist files are created before publishing. This way you don't need to commit them in your repository.

prepublish挂钩将确保在发布之前创建dist文件。 这样，您无需在存储库中提交它们。

# Bump the version first
# It'll also commit it and create a tag
npm version
# Push the bumped package and tags
git push --follow-tags
# Ship it 🚀
npm publish

翻译自: https://vuejsexamples.com/a-vue-js-wrapper-for-toast-ui-calendar/

vue toast