• This repository has been archived on 01/Jul/2022
  • Stars
    star
    195
  • Rank 199,374 (Top 4 %)
  • Language Vue
  • License
    MIT License
  • Created about 6 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Toast UI Calendar for Vue

⚠️ 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.

vue2 github version npm version license PRs welcome code with hearth by NHN Cloud

🚩 Table of Contents

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.

Name Type Default Reactive Description
schedules Array [] O Schedule list of calendar. If this prop is changed, Calendar is rendering.
calendars Array [] O Type list of calendars
view String 'week' O View of calendar. There are three views, day, week and month.
taskView Boolean, Array true O Show the milestone and task in weekly, daily view. If set true, the milestone and task show. If you want to show only the milestone or task, set array like this: ['mileston'] or ['task'].
scheduleView Boolean, Array true O Show the all day and time grid in weekly, daily view. If set true, the all day and time show. If you want to show only the all day or time, set array like this: ['allday'] or ['time'].
theme Object {} O Customize theme. For more infomation about theme, see ThemeConfig of Toast UI Calendar.
week Object {} O Set more for the week and day view. For more infomation about week, see WeekOptions of Toast UI Calendar.
month Object {} O Set more for the month view. For more infomation about month, see MonthOptions of Toast UI Calendar.
timezones Array [] O Set multiple time zones. For more information about timezones, see Timezone of Toast UI Calendar.
disableDblClick Boolean false O Disable double click to create a schedule.
disableClick Boolean false O Whether to use mouse click events as defaults to create schedules.
isReadOnly Boolean false O Set read only mode. If true, a user can't create and modify any schedule.
template Object {} X Customize renderer. For more information about template, see Template of Toast UI Calendar.
useCreationPopup Boolean true X Whether use default creation popup or not.
useDetailPopup Boolean true X Whether use default detail popup or not.
usageStatistics Boolean true X Whether send hostnames to Google Analytics or not.

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

📜 License

This software is licensed under the MIT © NHN Cloud.

More Repositories

1

tui.editor

🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
TypeScript
16,941
star
2

tui.calendar

🍞📅A JavaScript calendar that has everything you need.
TypeScript
11,682
star
3

tui.image-editor

🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
JavaScript
6,860
star
4

tui.chart

🍞📊 Beautiful chart for data visualization.
TypeScript
5,328
star
5

tui.grid

🍞🔡 The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer!
TypeScript
2,399
star
6

fe.javascript

FE DEV LAB
1,116
star
7

gpm.unity

A brand of NHN providing free services required for game development.
319
star
8

toast-ui.vue-editor

This repository is DEPRECATED! GO TO 👉 https://github.com/nhn/tui.editor/tree/master/apps/vue-editor
JavaScript
229
star
9

toast-ui.vue-image-editor

Toast UI Image Editor for Vue
Vue
187
star
10

tui.jsdoc-template

TUI JSDoc Template, Demo: https://nhnent.github.io/tui.jsdoc-template/latest/
JavaScript
176
star
11

toast-ui.react-calendar

TOAST UI Calendar wrapper for React.js
JavaScript
169
star
12

socket.io-client-unity3d

socket.io-Client for Unity3D, which is compatible with socket.io v1.x
C#
166
star
13

toast-ui.react-image-editor

TOAST UI ImageEditor wrapper for React.js
JavaScript
117
star
14

toast-ui.doc

JavaScript
115
star
15

toast-haste.framework

TOAST Haste framework is a pure java implementation of asynchronous game server framework
Java
97
star
16

tui.date-picker

Component that selects specific date.
JavaScript
92
star
17

tui.code-snippet

Group of utility methods to make ease with developing javascript applications.
JavaScript
92
star
18

tui.tree

Component that displays data hierarchically.
JavaScript
91
star
19

tui.time-picker

Component that selects specific time.
JavaScript
57
star
20

tui.color-picker

Colorpicker component for web services.
JavaScript
57
star
21

toast-ui.vue-chart

Toast UI Chart for Vue
Vue
51
star
22

toast-ui.vue-grid

This repository is DEPRECATED! GO TO 👉
Vue
51
star
23

tui.pagination

Component that automatically calculate and generate page numbers.
JavaScript
49
star
24

toast-ui.react-editor

This repository is DEPRECATED! GO TO 👉 https://github.com/nhn/tui.editor/tree/master/apps/react-editor
JavaScript
46
star
25

tui.context-menu

Component that creates a menu when the right mouse button is clicked.
JavaScript
44
star
26

tui.app-loader

Component that installs a specific app by determining whether an app is installed on mobile devices.
JavaScript
43
star
27

eat

Json based scenario testing tool(which can have test for functional and non-functional)
Java
40
star
28

toast-ui.react-chart

Toast UI Chart for React
JavaScript
27
star
29

tui.ngx-calendar

TypeScript
26
star
30

tui.file-uploader

JavaScript
26
star
31

tui.eslint.config

ESLint Sharable Configuration for TUI Component
JavaScript
23
star
32

tui.auto-complete

TOAST UI Auto Complete
JavaScript
21
star
33

toast-ui.react-grid

This repository is DEPRECATED! GO TO 👉
JavaScript
19
star
34

toast-ui.select-box

Component that selects an option in the drop-down list.
JavaScript
18
star
35

toast-haste.sdk.dotnet

This repo is .NET client for TOAST Haste framework.
C#
17
star
36

tui.rolling

Components that rotates and displays items such as a slideshow.
JavaScript
14
star
37

tui.virtual-keyboard

JavaScript
12
star
38

tui.virtual-scroll

JavaScript
12
star
39

tui.animation

Javascript animation library with ease
JavaScript
11
star
40

tui.layout

JavaScript
10
star
41

toast.gamebase.unity.sample

C#
10
star
42

tui.flicking

JavaScript
7
star
43

tui.placeholder

JavaScript
7
star
44

dooray.scrum

JavaScript
7
star
45

dooray.vote

JavaScript
7
star
46

adlib.android_media_app

Java
6
star
47

tui.gesture-reader

fe.component-gesture-reader
JavaScript
6
star
48

tui.floating-layer

JavaScript
6
star
49

toast-ui.detect-runtime-error-actions

🧐 Detect Runtime Error with browserstack
JavaScript
6
star
50

tui.dom

DOM control library for TOAST UI Components
JavaScript
5
star
51

toastcloud.sdk

Objective-C
4
star
52

gameanvil.sample-game-server

Java
3
star
53

hands-on-labs.java.spring-boot-custom-starter

Python
3
star
54

gameanvil.sample-game-test

Java
3
star
55

nhncloud.ios.sdk

Objective-C
3
star
56

toast-ui.date

JavaScript
2
star
57

toast.gamebase.ios.sdk

2
star
58

toast.gamebase.unity.tools.setting-tool

2
star
59

hands-on-labs.java.mybatis-to-jpa

Java
2
star
60

hands-on-labs.gamebase.guest-auth-on-js

Python
2
star
61

hands-on-labs.toastui.calendar-timetable

Python
2
star
62

adlib.ios_media_app

Objective-C
2
star
63

gameanvil.agent

2
star
64

hands-on-labs.java.spring-boot-actuator

Makefile
1
star
65

hands-on-labs.gamebase.google-setting

Python
1
star
66

toast-ui.release-notes

Publish Github release note from a tag.
JavaScript
1
star
67

gameanvil.sample-game-client-unity

HTML
1
star
68

hands-on-labs.toastui.chart-dashboard

Python
1
star
69

hands-on-labs.gamebase.install-with-setting-tool

Python
1
star
70

k8s.oss-helm-packages

JavaScript
1
star
71

hands-on-labs.toastui.grid-account-book

Python
1
star
72

tui.webpack.safe-umd-plugin

Webpack plugin to handle optional dependencies safely when using libraryTarget: umd
JavaScript
1
star
73

hands-on-labs.java.jvmtop

Python
1
star
74

hands-on-labs.gamebase.guest-auth-on-unity

HTML
1
star
75

tui.component.calendar

JavaScript
1
star
76

terraform-provider-nhncloud

Terraform Provider for NHN Cloud
Go
1
star
77

ace.guide.script

웹로그분석 스크립트 설치가이드
HTML
1
star
78

hands-on-labs.toastui.editor-ext

Python
1
star