Toast UI Calendar for Vue

NHN

Last update: Dec 6, 2022

Related tags

Overview

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
    }
}

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.

Comments

how to add an icon to front of the schedule name

Version

1.1.0

Test Environment

chrome, vue.js

<template>
      <calendar
        style="height: 800px;"
        ref="tuiCalendar"
        :schedules="scheduleList"
        :template="template"
      ...
      />
</template>
<script>
  data() {
    return {
     ...
      template: {
        schedule: function(schedule) {
          return getGridCategoryTemplate(schedule.category, schedule);
        }
      },
</script>
..
methods: {
    getGridCategoryTemplate(category, schedule) {
      console.log("hello");
      var tpl;

      switch (category) {
        case "milestone":
          tpl =
            '<span class="calendar-font-icon ic-milestone-b"></span> <span style="background-color: ' +
            schedule.bgColor +
            '">icontestttttt' +
            schedule.title +
            "</span>";
          break;
        case "task":
          tpl = "#icontestttttt" + schedule.title;
          break;
        case "allday":
          tpl = getTimeTemplate(schedule, true);
          break;
      }

      return tpl;
    },
    getTimeTemplate(schedule, isAllDay) {
      var html = [];

      if (!isAllDay) {
        html.push(
          "<strong>" +
            moment(schedule.start.getTime()).format("HH:mm") +
            "</strong> "
        );
      }
      if (schedule.isPrivate) {
        html.push('<span class="calendar-font-icon ic-lock-b"></span>');
        html.push(" Private");
      } else {
        if (schedule.isReadOnly) {
          html.push('<span class="calendar-font-icon ic-readonly-b"></span>');
        } else if (schedule.recurrenceRule) {
          html.push('<span class="calendar-font-icon ic-repeat-b"></span>');
        } else if (schedule.attendees.length) {
          html.push('<span class="calendar-font-icon ic-user-b"></span>');
        } else if (schedule.location) {
          html.push('<span class="calendar-font-icon ic-location-b"></span>');
        }
        html.push("icontestttttt " + schedule.title);
      }

      return html.join("");
    },
}

Expected Behavior

I want to add an icon to front of the schedule name like below

i tried to getTimeTemplate method and schedule templates but nothing happend. how can i do this?

thank you for your time

Question Answer Category: Usage

opened by charmjeh 10

How to create a new Event

Hello, how it is possible to extract the start and enddate to create a new Schedule in the list? i need to use my own creationpopup and yes i know how to customize but i couldn't figure this point out. thank in advance for Help
Question Answer

opened by janlueders 10

how can i modify/delete items in create schedule modal?

hello! i have another question.

how can i modify or delete item in create schedule modal?
can i limit the number of schedule per day? (스케줄을 하루에 각 항목당 n개만 추가 가능하도록 하고 싶습니다.)
how can i use calendar in event? i tried to add beforeCreateSchedule event and create schedule, but an error has occurred

Error in event handler for "beforeCreateSchedule": "TypeError: calendar.createSchedules is not a function"

below is my calenar.vue code ( or check this out plz link )

<template>
  <calendar
    style="height: 800px;"
    ref="tuiCalendar"
    ...
    @beforeCreateSchedule="onBeforeCreateSchedule"
  />
</template>
<script>
import "tui-calendar/dist/tui-calendar.css";
import { Calendar } from "@toast-ui/vue-calendar";

export default {
  name: "Calendar",
  components: {
    calendar: Calendar
  },
  data() {
    return { ... }
  },
  methods: {
    onBeforeCreateSchedule(event) {

      schedule = {
        id: +new Date(),
        title: e.title,
        isAllDay: e.isAllDay,
        start: e.start,
        end: e.end,
        category: "allday"
      };

      var calendar = this.$refs.tuiCalendar;
      calendar.createSchedules([schedule]); //There was an error here
    }
  }
};
</script>

thank you for your time

Version

1.1.0

Test Environment

Chrome : version 75.0.3770.100 (64bit), Vue.js

opened by charmjeh 6

how can i modify popup items?
hello, Thanks to toast-ui team, I'm making calendars relatively easy and looks nice Thank you for your effort :D

can i noticed shedule count per day? If i already have one event and try to add another one, i want to show an alert window and overwrite it. (schedule). Do you already have the feature to know the number of schedules? Can I get some reference to this work if possible?

modify create schedule popup i wanted to delete some items in create schedule popup, so change both useCreationPopup and useDetailPopup to false.

but i don't know how to use tui.calendar popup template.(popup open & item modify) how can i use creation popup/detail popup?

here is my recent code. (link) check it out please.

thank you for your time

for creation popup https://github.com/nhnent/tui.calendar/blob/415be4453e5a63150017d146175adf2401908322/src/js/view/template/popup/scheduleCreationPopup.hbs#L28-L32

for detail popup https://github.com/nhnent/tui.calendar/blob/415be4453e5a63150017d146175adf2401908322/src/js/view/template/popup/scheduleDetailPopup.hbs#L10-L17

Originally posted by @dongsik-yoo in #217 (comment)
Question Answer Category: Custom Popups
opened by charmjeh 4

캘린더 달(month) 이동

Version

"tui-calendar": "^1.12.3",
"tui-date-picker": "^4.0.0",

Test Environment

크롬 77.0.3865.120（Official Build）（64비트）

Code

// Write example code
    init() {
      this.calendar = new Calendar(this.$refs.calendar, this.calendarOptions);
      /* ... */
    },
    /* ... */

    setCalendarMonth(val) {
      if (val === -1) {
        this.calendar.prev();
      } else if (val === 1) {
        this.calendar.next();
      } else if (val === 0) {
        this.calendar.today();
      }
      /* ... */
      this.calendarYear = this.calendar.getDate().getFullYear();
      this.calendarMonth = this.calendar.getDate().getMonth() + 1;
      /* ... */
   }

Expected Behavior

안녕하세요! 덕분에 계속 잘 쓰고 있습니다.

this.calendar.next(); 를 사용하여 크롬에서 캘린더 달을 이동시키고 있는데 일본의 한 pc에서만 달 이동이 잘 되지 않습니다. 어떤 부분을 어떻게 확인해야 할까요?

Answer

opened by charmjeh 3

display the month picker
Version

Test Environment

Current Behavior

please any one can tell me how to enbale the month changer ?

// Write example code

Expected Behavior
Question
opened by nazihheni 3

How to on/off useDetailPopUp?

Version

toast-ui/vue-calendar: 1.1.1

Test Environment

Window, Vue

Current Behavior

I wanna have useDetailPopup on and off, when specific user clicks his/her own event. In order to do this, I used 'setOptions' as below, it didnt work well though.

// Write example code
onClickSchedule (res) {
      //1. 처음 이벤트 클릭시 eventDetailPopup을 끄기 
      this.$refs.tuiCal.invoke('setOptions', { useDetailPopup: false })

      // 2. isPrivate이 true인지 확인
      if (res.schedule.isPrivate) {
        this.FETCH_EMPLOYEE_ID_BY_SCHEDULE_ID({
          // 3. if(true)면 해당 이벤트의 id로 회원의 id가져오기
          employeeScheduleId: res.schedule.id
        }).then(() => {
          // 4. 저장된 회원 id와 로그인한 회원의 id를 비교하여 로그인한 회원인지 구분하기.
          if (this.getEmployeeId === Number(this.myEmployeeId)) {
            // 5. 해당 isReadOnly을 일시적으로 false로 만들기
            res.schedule.isReadOnly = false

           //6. 위 작업이 끝나면 eventDetailPopup을 다시 켜기 
            this.$refs.tuiCal.invoke('setOptions', { useDetailPopup: true })
          }
        }).catch(err => {
          console.log(err)
          if (err.response.status === 403) {
            this.message = '권한이 없습니다. 로그아웃 합니다.'
            this.showNotify(this.message)
            this.$router.push('/')
          }
        })
      }

Expected Behavior

자신이 쓴 event만 수정 가능하도록 하려고, useDetialPopUp을 setOptions로 false 하였다가, 작업이 끝나면 true로 바꿔주고 싶습니다. 하지만 아래와 같은 에러가 발생합니다.

Uncaught (in promise) TypeError: Cannot read property 'status' of undefined at eval (VM14949 Scheduler.vue:450)

opened by abbb1399 2

Weekly view: how to go to next/prev week?

Question: the demo here has nice buttons to switch weeks (Today, prev/next, see current week) https://nhn.github.io/tui.calendar/latest/tutorial-example02-weekly

How can we get the same?

Thanks!
Answer

opened by mariusa 2

set calendars by asynchronous request，the view doesn't change,but when i call getOptions function, the calendars is right

Version

"@toast-ui/vue-calendar": "^1.0.3",

Test Environment

windows 10

Current Behavior

code of template

<calendar ref="tuiCalendar"
                          style="height: 800px;"
                          :calendars="calendarList"
                          :schedules="scheduleList"
                          :view="view"
                          :month="month"
                          :week="week"
                          :taskView="taskView"
                          :scheduleView="scheduleView"
                          :theme="theme"
                          :disableDblClick="disableDblClick"
                          :isReadOnly="isReadOnly"
                          :template="template"
                          :useCreationPopup="useCreationPopup"
                          :useDetailPopup="useDetailPopup"
                          @beforeCreateSchedule="onBeforeCreateSchedule"
                          @clickSchedule="onClickSchedule"
                          @beforeUpdateSchedule="onBeforeUpdateSchedule"
                />

and data is blow

calendarList: [
                    {
                        "id": 1,
                        "name": "My Calendar",
                        "color": "#FFFFFF",
                        "bgColor": "#9E5FFF",
                        "dragBgColor": "#9E5FFF",
                        "borderColor": "#9E5FFF"
                    },
                    {
                        "id": 2,
                        "name": "Company",
                        "color": "#FFFFFF",
                        "bgColor": "#00A9FF",
                        "dragBgColor": "#00A9FF",
                        "borderColor": "#00A9FF"
                    }
                ],
                scheduleList: [
                    {
                        id: '1',
                        calendarId: '1',
                        title: 'my schedule',
                        category: 'time',
                        dueDateClass: '',
                        start: '2019-03-18T22:30:00+09:00',
                        end: '2019-03-19T02:30:00+09:00'
                    },
                    {
                        id: '2',
                        calendarId: '2',
                        title: 'second schedule',
                        category: 'time',
                        dueDateClass: '',
                        start: '2019-03-20T17:30:00+09:00',
                        end: '2019-03-22T17:31:00+09:00'
                    }
                ],
                view: 'month',
                taskView: false,
                scheduleView: ['time'],
                theme: theme.theme,
                month: {
                    daynames: [this.$t("Sun"),this.$t("Mon"),this.$t("Tue"),this.$t("Wed"),this.$t("Thu"),this.$t("Fri"),this.$t("Sat")],
                    narrowWeekend: true,
                    startDayOfWeek: 1, // monday
                    visibleScheduleCount: 4
                },
                week: {
                    narrowWeekend: true,
                    daynames: [this.$t("Sun"),this.$t("Mon"),this.$t("Tue"),this.$t("Wed"),this.$t("Thu"),this.$t("Fri"),this.$t("Sat")],
                },
                disableDblClick: false,
                isReadOnly: false,
                template: {
                    milestone: function (schedule) {
                        return `<span style="color:red;">${schedule.title}</span>`;
                    },
                    milestoneTitle: function () {
                        return 'MILESTONE';
                    },
                    allday: function (schedule) {
                        return schedule.title;
                    },
                },
                useCreationPopup: false,
                useDetailPopup: false,

then the code of mounted

mounted: function () {
            calendars().then(res => {
                console.log(res.data.data)
                this.calendarList = res.data.data
            })
            console.log(this.calendarList);
            this.setRenderRangeText()
        },

the return of data is below

{
    "data": [
        {
            "id": 1,
            "name": "My Calendar",
            "color": "#FFFFFF",
            "bgColor": "#9E5FFF",
            "dragBgColor": "#9E5FFF",
            "borderColor": "#9E5FFF"
        },
        {
            "id": 2,
            "name": "Company",
            "color": "#FFFFFF",
            "bgColor": "#00A9FF",
            "dragBgColor": "#00A9FF",
            "borderColor": "#00A9FF"
        }
    ]
}

so the color of schedule text must be black,but the color of text is white 搜狗截图20190327220000

so i use console.log(this.$refs.tuiCalendar.invoke('getOptions')) to print the options, the result is below: 搜狗截图20190327220229

Expected Behavior

can you help me to figure out?

Question Answer

opened by DamonSnow 2

Customize Popup Create Event

Hello, I'm having trouble customizing the popup that creates the calendar.

I took a look at the Template options however I did not find the option to modify the creation popup (Not the popupDetail).

Is there any way I can customize this part?

Thank you for your attention. Congratulations on the Library, I really enjoyed it!
Help Wanted 🤝

opened by luizotavior 2
Display semesters, cycles of years, seasons and combination.

Feature request

Hello everyone I'm using this template to my school project by the way the school use some abstracts times like weeks of semester and week/semester of cycles of year

My question is if there is a way to implement this kind of abstract date, like weeks of semester, semester of cycles of 3 years etc...

I'm based on the demo ui so as i can see there is a drop-down menu wish allow us to chose weekly, day, or month, 2/3 weeks etc.. But semesters or a cycle of year e.g 3 year, My school what schedule events for 3 years and some times for 2 weeks from X semester, and some other custom date.

So there is a way to implement this kind of date showing in the ui?

Kind regards.

opened by CyberPoison 1
Type Conversion Error

Version

1.1.1

Test Environment

Chrome, Windows 10, Vue 3

Current Behavior

The Calendar is rendering but not displaying schedules. Its giving me error

TypeError: Cannot convert undefined or null to object Calendar.vue?96c9:184 on console. When I click the error, it shows error on line for (const eventName of Object.keys(this.$listeners)) { this.calendarInstance.on(eventName, (...args) => this.$emit(eventName, ...args)); }

// Write example code

Expected Behavior

Need it to work in normal behaviour.

opened by SaqibSyed1014 1

make it for a component,but when two page use it,some value was be covered

Version

toast-ui/vue-calendar: 1.1.1

Test Environment

Chrome,Window10, vue-element-admin

Current Behavior

// Write example code
// i use props[isExamine] check how to show the button
        popupDelete: function() {
          if (that.isExamine) {
            return '退回'
          } else {
            return '删除'
          }
        }
// when two page use this component 
// open one and  open two , now two page is right
// but when open one again(use vue keepalive) isExamine is another page value
// now i delete keepalive,two page work right,but i want to use keepalive

Expected Behavior

show right value

Bug

opened by nanami-yu 4

When updating, private button only gives 'null'

Version

toast-ui/vue-calendar: 1.1.1

Test Environment

Chrome,Window10, Vue CLI

Current Behavior

// Write example code
 
updateSchedule (e) {
      console.log(e)
      const { schedule, changes } = e
      // Chainging private status by clicking lock button only gives 'null'.   
      // Expected behavior was giving true or false value.
      console.log(changes)    // null

      this.$refs.tuiCal.invoke('updateSchedule', schedule.id, schedule.calendarId, changes)
    }

Even if the button clicked and changed, 'changes' only gives null.

Expected Behavior

What i want to do is updating private value on the detail popup. but 'changes' doesn't react to lock button(only gives null).

Bug

opened by abbb1399 3

onEditSchedule and onDeleteSchedule functions 'eventData has no attribute isAllDay'
Describe the bug

Hi when i set scheduleView = ['allday'] and edit or delete allday schedule inside weekly or daily view i have this error because eventData has no attribute 'isAllDay', this attribute is inside schedule field, how can i solve it?

this happens with onEditSchedule function and with onDeleteSchedule function

Version

toast-ui/vue-calendar: 1.1.1

Test Environment

Linux, Vue

Current Behavior

set scheduleView = ['allday']

open popoup detail into weekly or daily view

edit or delete allday schedule

Bug
opened by bonis955 1
Custom event mousedown
Version

toast-ui/vue-calendar: 1.1.1

Test Environment

Window, Vue

Current Behavior

How do I can create a custom event mousedown on a Schedule?

Passing as a prop event

@onMousedown="onMousedownEvent"

isn't working.
Answer Category: Usage
opened by detroit2501 2
When updating, private button dosen't work
Version

1.1.1,

Test Environment

Window,chrome

Current Behavior

// Write example code scheduleList: [ { id: '1', calendarId: '0', title: '집청소', category: 'time', dueDateClass: '', start: today.toISOString(), end: getDate('hours', today, 3, '+').toISOString(), isPrivate: true }, ....

When updating private events, private button(lock image) dosen't match isPriavte's value(true). It should be locked.

In your example(https://ui.toast.com/tui-calendar), private button works well. Is this error because of VueTUI calendar? tui-calendar latest version is 1.13.0 whereas toast-ui.vue-calendar's latest version is .1.1.1.

please let me know how to solve it.

Expected Behavior
Bug
opened by abbb1399 2

Releases(v1.1.1)

v1.1.1(Aug 30, 2019)
Features

72afcfd Feat: update typescript declaration (#38)

Bug Fixes

71cf7bc Fix: resolve memory leak issue, refactor: register event listener handler (#37)

Documentation

688d668 Docs: import css dependencies

a3c4cfb Docs: update links 'nhnent' to 'nhn'

Source code(tar.gz)
Source code(zip)
v1.1.0(Jun 27, 2019)
Bug Fixes

d2b0615 Fix : add supported api

add 'disableClick' prop in Calendar Option

add 'usageStatistics' prop in Calendar Option

update readme

Source code(tar.gz)
Source code(zip)
v1.0.2(Dec 7, 2018)
Bug Fixes

ecb341b Fix: occurs reassign in setOptions of calendar (close #2) (#3)

Source code(tar.gz)
Source code(zip)
v1.0.1(Nov 28, 2018)
Chores

update vue/cli (Security vulnerability response)

Source code(tar.gz)
Source code(zip)
v1.0.0(Oct 24, 2018)
Features

a8ae7cb210a988b621161f05079fec419457e702 feat: Implement vue wrapper for tui.calendar

Source code(tar.gz)
Source code(zip)