Vue.js wrapper for TOAST UI Calendar

Related tags

Calendar vue-tuicalendar
Overview

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

Comments
  • No content shown in the calendar

    No content shown in the calendar

    I followed almost exactly from your example, but there's nothing shown except the header (and you are missing the '=>' in this.$refs.calendar.registerEvent("beforeDeleteSchedule", event {).

    2018-07-12 08_44_18-schedule vue - school-course - visual studio code

    2018-07-12 08_39_42- schedule vue - school-course - visual studio code

    This is the tui calendar option I coped directly from their official website.

    2018-07-12 08_43_25-schedule vue - school-course - visual studio code

    Result 2018-07-12 08_45_58-schedule - 1000 class _ california community college online course

    opened by kelvinau 2
  • Weird rendering issue

    Weird rendering issue

    Hello, I have some rendering problems and I don't know how to solve them because this.$refs.calendar.fireMethod('render') doesn't do the trick. Basically the month view does not render while the others work fine on the initial load. Also when I use next or prev methods on any view it stops rendering, but if i change the view to something else then back it works again: 2018-09-06_23-50-35

    Any ideeas?

    Thank you!

    opened by mihailtd 1
  • Support/Enhancements

    Support/Enhancements

    Since this is quite new, I'm wondering how much support and future enhancements you envision to provide with this wrapper. I'm trying to determine if it's worth using this library or just writing my own wrapper.

    opened by sbowler 1
  • How to use js from dist?

    How to use js from dist?

    I used "npm run build" to generate vue-tuicalendar.js and use it in my page.

    <script type="text/javascript" src='./vendor/vue-tuicalendar/dist/vue-tuicalendar.js'></script>
<link href="./vendor/tui.calendar/dist/tui-calendar.min.css" rel="stylesheet">

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

    Only get this:

    <!--function(e,n,r,i){return Pt(t,e,n,r,i,!0)}-->

    How can I use compiled js? Thanks

    Vue.use('VueTuicalendar') ;
Vue.component('vue-tuicalendar', vueTuicalendar) ;
...
      options:{
defaultView: 'week'
      },
                  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
        }
      ]
...

    handler() {
      console.log("Handler") ;
    }
    opened by xoit 0
  • High severity vulnerabilities

    High severity vulnerabilities

    Hi, There are jquery vulnerabilities in tui-calendar dependency (as you can see below). Can you do something for it ? Or should i post an issue on tui-calendar repo ?

    screenshot 2019-01-14 at 13 36 19

    Thanks

    opened by agrezo 0
Owner
Kalpa Madushan Perera
I'm a web developer from Sri Lanka.
Kalpa Madushan Perera
GitHub
TOAST UI Calendar for Vue

TOAST UI Calendar for Vue This is Vue component wrapping TOAST UI Calendar. ?? Table of Contents Install Using npm Usage Load Implement Props Event Me

Chantouch Sek 3 Dec 14, 2022
Simple-calendar-app - Simple Vue calendar (date-picker)

Simple vue calendar (date-picker) Vue Moment.js Installation git clone npm i npm

Dmitry Chinenov 3 Oct 31, 2022
Contra - Combines GitHub and GitLab contributions calendar to create a single calendar

Welcome to Contra ?? Combines GitHub and GitLab contributions calendar to create

Ahmet Korkmaz 10 Dec 29, 2022
Convenient Vue wrapper for the add to calendar button snippet, which lets you reliably create beautiful buttons, where people can add events to their calendars.

The Add to Calendar Button - optimized for Vue 3 This is a wrapper repository for the popular Add to Calendar Button, making it even more convenient,

Add to Calendar 3 Nov 9, 2022
vue calendar fullCalendar. no jquery required. Schedule events management

##vue-fullcalendar Works for Vue2 now. This is a fullCalendar component based on vue.js . No Jquery or fullCalendar.js required. Currently, It only su

Sunny Wang 1.5k Dec 18, 2022
A vue component for lunar calendar.

vue-lunar-calendar A vue component for lunar calendar. Uses Moment.js for date operations. This is the Korean lunar calendar. It is different from Chi

Kim WooHyun 70 Aug 20, 2022
Simple Vue component to show a month-grid calendar with events

VueSimpleCalendar Introduction vue-simple-calendar is a flexible, themeable, lightweight calendar component for Vue that supports multi-day scheduled

Richard Tallent 762 Jan 3, 2023
An elegant calendar and datepicker plugin for Vue.

An elegant calendar and datepicker plugin for Vuejs. npm i --save v-calendar Documentation For full documentation, visit vcalendar.io. Attributes High

Nathan Reyes 3.7k Dec 31, 2022
A simple infinite calendar component in Vue 2

vue-infinite-calendar A simple infinite calendar component in Vue 2 Build Setup # install dependencies npm install # serve with hot reload at localho

Rares S 15 Feb 28, 2022
A calendar component for Vue.js

calendar Chinese This is a calendar component based on vue.js . support custom content. No dependencies. Currently, It only supports month view. You c

Kylin 47 Aug 16, 2022
vue 2.x calendar component

vue2-calendar vue 2 calendar, datepicker component which supported lunar or date event Live Demo >> This project is not only a vue component, but also

Terry Cai 485 Dec 18, 2022
Vue.js Functional Calendar | Component/Package

Vue Functional Calendar Modern calendar and datepicker module for Vue.js Demo Demo: https://y3jnxov469.codesandbox.io/ Lightweight, high-performance c

Manuk 425 Dec 27, 2022
A Vue JS full calendar, no dependency, no BS. :metal:

vue-cal A Vue JS full calendar, no dependency, no BS. ?? Installation npm i vue-cal Vue 3 npm i [email protected] Demo & Documentation antoniandre.github

Antoni 982 Dec 29, 2022
A full 12-Month view calendar made by vue.js.

English | 繁體中文 There is no full year (12 months on a page) calendar right now, the Vue-material-year-calendar is designed to solve this problem. ?? 12

null 114 Dec 13, 2022
Simple and clean calendar written in Vue.js

Vuelendar Simple and clean calendar written in Vue.js. Check out full Vuelendar's documentation here. Features Select single date Select range of date

The Codest 76 Oct 5, 2022
Full Calendar based on Vue.js

Vue Spring Calendar It's a Vue based component which provides the functionality of a full-calendar that shows daily events. Installation npm install v

Brahim 40 Jun 8, 2022
A full 12-Month view calendar made by vue.js.

A full 12-Month view calendar made by vue.js.

null 90 Mar 23, 2021
Vue Mobile Calendar - 基于 Vue2的移动端日历插件

Vue Mobile Calendar - 基于 Vue2的移动端日历插件,仿钉钉签到日历,vue 钉钉日历, 自适应,周月切换

Hoyt 12 Sep 9, 2022
📅 A feature-rich calendar component, support multiple modes and gesture sliding. For vue 3.0+

?? A calendar component for vue3.0. Support gesture sliding, range selection, according to the week switch...

飞翔的荷兰人 434 Jan 3, 2023