Toast UI Calendar for Vue

Related tags

Calendar vue calendar
Overview

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

๐Ÿšฉ 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.

Comments
  • how to add an icon to front of the schedule name

    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

    image

    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

    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?

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

    hello! i have another question.

    1. how can i modify or delete item in create schedule modal?
    2. can i limit the number of schedule per day? (์Šค์ผ€์ค„์„ ํ•˜๋ฃจ์— ๊ฐ ํ•ญ๋ชฉ๋‹น n๊ฐœ๋งŒ ์ถ”๊ฐ€ ๊ฐ€๋Šฅํ•˜๋„๋ก ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.)
    3. 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?

    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

    1. 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?

    2. 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) ์ด๋™

    ์บ˜๋ฆฐ๋” ๋‹ฌ(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

    display the month picker

    Version

    Test Environment

    Current Behavior

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

    // Write example code
    

    screenshot_2019-02-06 tutorial example01-basic calendar

    Expected Behavior

    Question 
    opened by nazihheni 3
  • How to on/off useDetailPopUp?

    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?

    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

    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

    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?

    https://screenshotscdn.firefoxusercontent.com/images/16ec0726-1bb9-422a-8e13-f662d276e0e3.png

    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.

    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

    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

    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'

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

    image

    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'

    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

    Untitled

    Screenshot from 2021-03-13 00-22-14

    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

    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

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

    image

    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)

  • v1.0.1(Nov 28, 2018)

  • v1.0.0(Oct 24, 2018)

Owner
NHN
NHN
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
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
a horizontal calendar component for Vue.js

a horizontal calendar component for Vue.js

jacques 37 Aug 10, 2022