nhn/toast-ui.vue-calendar

⚠️ Notice: This repository is deprecated️️️️️

TOAST UI Calendar for Vue has been managed separately from the TOAST UI Calendar repository. As a result of the distribution of these issues, we decided to deprecate each wrapper repository and manage repository as a mono-repo from the TOAST UI Calendar repository.

From now on, please submit issues or contributions related to TOAST UI Calendar for Vue to TOAST UI Calendar repository. Thank you 🙂

TOAST UI Calendar for Vue

This is Vue component wrapping TOAST UI Calendar.

🚩 Table of Contents

• Collect statistics on the use of open source
• Install
  • Using npm
• Usage
  • Load
  • Implement
  • Props
  • Event
  • Method
• Pull Request Steps
• Contributing
• License

Collect statistics on the use of open source

Vue Wrapper of TOAST UI Calendar applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Calendar is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, include tui-code-snippet.js and then immediately write the options as follows:

tui.usageStatistics = false;

💾 Install

Using npm

npm install --save @toast-ui/vue-calendar

📅 Usage

Load

You can use Toast UI Calendar for Vue as moudule format or namespace. Also you can use Single File Component (SFC of Vue). When using module format and SFC, you should load tui-calendar.css in the script.

• Using Ecmascript module

  import { Calendar } from '@toast-ui/vue-calendar';
  import 'tui-calendar/dist/tui-calendar.css';
  
  // If you use the default popups, use this.
  import 'tui-date-picker/dist/tui-date-picker.css';
  import 'tui-time-picker/dist/tui-time-picker.css';
  

• Using Commonjs module

  require('tui-calendar/dist/tui-calendar.css');
  
  // If you use the default popups, use this.
  require('tui-date-picker/dist/tui-date-picker.css');
  require('tui-time-picker/dist/tui-time-picker.css');
  
  var toastui = require('@toast-ui/vue-calendar');
  var Calendar = toastui.Calendar;
  

• Using Single File Component

  import 'tui-calendar/dist/tui-calendar.css'
  import Calendar from '@toast-ui/vue-calendar/src/Calendar.vue'
  
  // If you use the default popups, use this.
  import 'tui-date-picker/dist/tui-date-picker.css';
  import 'tui-time-picker/dist/tui-time-picker.css';
  

• Using namespace

  var Calendar = toastui.Calendar;
  

Implement

• Load calendar component and then add it to the components in your component or Vue instance.

  import 'tui-calendar/dist/tui-calendar.css'
  import { Calendar } from '@toast-ui/vue-calendar'
  
  export default {
      name: 'YourComponent',
      components: {
          'calendar': Calendar
      }
  }
  

  or

  import 'tui-calendar/dist/tui-calendar.css'
  import { Calendar } from '@toast-ui/vue-calendar'
  
  new Vue({
      el: '#app',
      components: {
          'calendar': Calendar
      }
  });
  

• Insert <calendar> in the template or html. <calendar> element should have own height.

  <calendar style="height: 800px;"/>
  

Props

We provide props for Options of Toast UI Calendar. Each name of props is same options of Toast UI Calendar except view is for defaultView of option. Additionally you can set schedules using schedules of prop.

Example

<template>
    <calendar style="height: 800px;"
        :calendars="calendarList"
        :schedules="scheduleList"
        :view="view"
        :taskView="taskView"
        :scheduleView="scheduleView"
        :theme="theme"
        :week="week"
        :month="month"
        :timezones="timezones"
        :disableDblClick="disableDblClick"
        :isReadOnly="isReadOnly"
        :template="template"
        :useCreationPopup="useCreationPopup"
        :useDetailPopup="useDetailPopup"
    />
</template>
<script>
import 'tui-calendar/dist/tui-calendar.css'
import { Calendar } from '@toast-ui/vue-calendar';

export default {
    name: 'myCalendar',
    components: {
        'calendar': Calendar
    },
    data() {
        return {
            calendarList: [
                {
                    id: '0',
                    name: 'home'
                },
                {
                    id: '1',
                    name: 'office'
                }
            ],
            scheduleList: [
                {
                    id: '1',
                    calendarId: '1',
                    title: 'my schedule',
                    category: 'time',
                    dueDateClass: '',
                    start: '2018-10-18T22:30:00+09:00',
                    end: '2018-10-19T02:30:00+09:00'
                },
                {
                    id: '2',
                    calendarId: '1',
                    title: 'second schedule',
                    category: 'time',
                    dueDateClass: '',
                    start: '2018-10-18T17:30:00+09:00',
                    end: '2018-10-19T17:31:00+09:00'
                }
            ],
            view: 'day',
            taskView: false,
            scheduleView: ['time'],
            theme: {
                'month.dayname.height': '30px',
                'month.dayname.borderLeft': '1px solid #ff0000',
                'month.dayname.textAlign': 'center',
                'week.today.color': '#333',
                'week.daygridLeft.width': '100px',
                'week.timegridLeft.width': '100px'
            },
            week: {
                narrowWeekend: true,
                showTimezoneCollapseButton: true,
                timezonesCollapsed: false
            },
            month: {
                visibleWeeksCount: 6,
                startDayOfWeek: 1
            },
            timezones: [{
                timezoneOffset: 540,
                displayLabel: 'GMT+09:00',
                tooltip: 'Seoul'
            }, {
                timezoneOffset: -420,
                displayLabel: 'GMT-08:00',
                tooltip: 'Los Angeles'
            }],
            disableDblClick: true,
            isReadOnly: false,
            template: {
                milestone: function(schedule) {
                    return `<span style="color:red;">${schedule.title}</span>`;
                },
                milestoneTitle: function() {
                    return 'MILESTONE';
                },
            },
            useCreationPopup: true,
            useDetailPopup: false,
        }
    }
}
</script>

Event

• afterRenderSchedule : Occurs when every single schedule after rendering whole calendar.
• beforeCreateSchedule : Occurs when select time period in daily, weekly, monthly.
• beforeDeleteSchedule : Occurs when delete a schedule.
• beforeUpdateSchedule : Occurs when drag a schedule to change time in daily, weekly, monthly.
• clickDayname : Occurs when click a day name in weekly.
• clickSchedule : Occurs when click a schedule.
• clickTimezonesCollapseBtn : Occurs when click timezones collapse button. This event works when timezone prop has multi timezones and week prop has { showTimezoneCollapseButton: true }.

For more information such as the parameters of each event, see Event of Toast UI Calendar.

Example

<template>
    <calendar style="height: 800px;"
        @afterRenderSchedule="onAfterRenderSchedule"
        @beforeCreateSchedule="onBeforeCreateSchedule"
        @beforeDeleteSchedule="onBeforeDeleteSchedule"
        @beforeUpdateSchedule="onBeforeUpdateSchedule"
        @clickDayname="onClickDayname"
        @clickSchedule="onClickSchedule"
        @clickTimezonesCollapseBtn="onClickTimezonesCollapseBtn"
    />
</template>
<script>
import 'tui-calendar/dist/tui-calendar.css'
import { Calendar } from '@toast-ui/vue-calendar';

export default {
    name: 'myCalendar',
    components: {
        'calendar': Calendar
    },
    methods: {
        onAfterRenderSchedule(e) {
            // implement your code
        },
        onBeforeCreateSchedule(e) {
            // implement your code
        },
        onBeforeDeleteSchedule(e) {
            // implement your code
        },
        onBeforeUpdateSchedule(e) {
            // implement your code
        },
        onClickDayname(e) {
            // implement your code
        },
        onClickSchedule(e) {
            // implement your code
        },
        onClickTimezonesCollapseBtn(e) {
            // implement your code
        }
    }
}
</script>

Method

For use method, first you need to assign ref attribute of element like this:

<calendar ref="tuiCalendar"/>

After then you can use methods through this.$refs. We provide getRootElement and invoke methods.

• getRootElement

  You can get root element of calendar using this method.

  this.$refs.tuiCalendar.getRootElement();
  

• invoke

  If you want to more manipulate the Calendar, you can use invoke method to call the method of Toast UI Calendar. First argument of invoke is name of the method and second argument is parameters of the method. To find out what kind of methods are available, see method of Toast UI Calendar.

  this.$refs.tuiCalendar.invoke('today');
  

🔧 Pull Request Steps

TOAST UI products are open source, so you can create a pull request(PR) after you fix issues. Run npm scripts and develop yourself with the following process.

Setup

Fork develop branch into your personal repository. Clone it to local computer. Install node modules. Before starting development, you should check to haveany errors.

$ git clone https://github.com/{your-personal-repo}/[[repo name]].git
$ cd [[repo name]]
$ npm install

Develop

Let's start development!

Pull Request

Before PR, check to test lastly and then check any errors. If it has no error, commit and then push it!

For more information on PR's step, please see links of Contributing section.

💬 Contributing

• Code of Conduct
• Contributing guideline
• Commit convention

📜 License

This software is licensed under the MIT © NHN Cloud.