Vue.js wrapper for TOAST UI Calendar
Switch branches/tags
Clone or download
Latest commit 8899543 May 23, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Initial commit May 22, 2018
src Added ability to attach events using registerEvent method May 22, 2018
test Initial commit May 22, 2018
.babelrc Initial commit May 22, 2018
.editorconfig Initial commit May 22, 2018
.eslintignore Initial commit May 22, 2018
.eslintrc.js Initial commit May 22, 2018
.gitignore Bumped versions May 23, 2018
.stylelintrc Initial commit May 22, 2018
CONTRIBUTING.md Initial commit May 22, 2018
LICENSE Initial commit May 22, 2018
README.md Update README.md May 23, 2018
package.json Update README.md May 23, 2018

README.md

Vue TOAST UI Calendar

npm vue2

A Vue.js wrapper for TOAST UI Calendar

Installation

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

Usage

Example

Try out this Code Sandbox

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

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:

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.

# 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

License

MIT