How to integrate with VueJs

[lkmadushan]

How do I integrate a Vue component into the calendar schedule view?

[scottybo]

Would also love to know how to integrate this with vuejs

[scottybo]

@ikmadushan did you figure this one out?

[lkmadushan]

@scottybo i needed to mount a Vue component into the calendar event using template option, but unfortunately i couldn't do that. i think we need to pass the element as an argument to the template function to achieve this.

[dongsik-yoo]

Yes, you might be right.
The constructor of Calendar needs a element or element's selector as first parameter.

I have experienced it using React like this.

class CalendarMain extends React.Component {
  constructor() {
    super();

    this.options = {
      defaultView: 'month',
      useCreationPopup: true,
      useDetailPopup: true,
      month: {},
      week: {}
    };
  }
  componentDidMount() {
    this.calendar = this.createCalendarMain();
  }

  componentDidUpdate() {
    this.calendar.render();
  }

  createCalendarMain() {
    return new Calendar('#calendar', this.options);
  }

  render() {
    return (
      <div>
        <div id="calendar" style={{height: '600px'}}></div>
      </div>
    );
  }
}

[dongsik-yoo]

Is there anyone who makes a vue wrapper?

[lkmadushan]

@dongsik-yoo it would be great if we can add something like below to the core.

new Calendar('#calendar', {
    ...
    template: {
        milestone: function(schedule, element) {
            // element can be used to mount a Vue or React instance to these templates
        },
    }
})

Currently it doesn't pass element to template functions. if it can be done calendar will be more flexible for VueJs and ReactJs apps

[dongsik-yoo]

@lkmadushan I can offer the container element. Is it enough for Vue or React?.
We have many templates for rendering html by those function, but the only schedule's element would be enough for that. What do you think?

[lkmadushan]

@dongsik-yoo yep, only schedule's element would be enough :)

[lkmadushan]

@dongsik-yoo When do you plan to make a new release with above features? :) I'm planning to use tui calendar for my next project.

[dongsik-yoo]

@lkmadushan I'm checking it on that how I implement it.

[dongsik-yoo]

@lkmadushan I will be able to offer the schedule elements by event afterRender handler and api Calendar.getElement().

For example,

// event handlers
cal.on({
  'afterRender': function(e) {
    var schedule = e.schedule;
    var element = cal.getElement(schedule.id, schedule.calendarId);
    // use element for Vue or React
  }
});

tui-calendar uses a template engine, so can't not directly offer a schedule element at that template function call.

If no problem, I hope that the feature will be included in a new release v1.2.0 on 17th May.

[dongsik-yoo]

@lkmadushan Please check #109 for your request about the element. It'll be released after QA with v1.2.0, if no problem.

[lkmadushan]

@dongsik-yoo sorry for late reply. i'm bit busy these days.

I think this would be ok, for different schedules we can check type of it and render corresponding Vue component :)

[dongsik-yoo]

It's okay. We'll release v1.2.0 tomorrow. We are doing QA.

[dongsik-yoo]

@lkmadushan Here v1.2.0 is.

[lkmadushan]

@dongsik-yoo Thank you very much!

[lkmadushan]

Vue.js wrapper for TOAST UI Calendar :)

https://github.com/lkmadushan/vue-tuicalendar

Example: https://codesandbox.io/s/0wm308qol

[lkmadushan]

@dongsik-yoo i'm getting below error when updating a schedule using creation popup.

Check this out: https://codesandbox.io/s/9j4yn57nnr

no-conflict.js:13 Uncaught TypeError: Cannot read property 'id' of undefined
    at ScheduleCreationPopup._onClickSaveSchedule (no-conflict.js:13)
    at eval (no-conflict.js:13)
    at forEachArray (no-conflict.js:13)
    at Object.forEach (no-conflict.js:13)
    at ScheduleCreationPopup._onClick (no-conflict.js:13)
    at HTMLDivElement.handler (no-conflict.js:13)

Do yo have you any idea?

[dongsik-yoo]

It's a bug. I found the cause.
I'll let you know a solution.

[dongsik-yoo]

@lkmadushan Can you create a new issue for that?

[lkmadushan]

@dongsik-yoo sure! #122

[dongsik-yoo]

@lkmadushan Is this issue finished? If it is, please close this issue.
Thank you.

[luzioluna]

Hello lkmadushan,
Forgive me, I am a bit fresh at javacsript and it confuses me. I am wondering if you can give me a hint how to start with theming my calendar component with your vue-tuicalendar script. I cant seem to figure out how to overwrite the css properties set in your vui.tuicalendar.js file. I try adding :
var theme = {
"common.backgroundColor": "rgba(255, 255, 255, 0)",
"month.dayname.fontSize": "16px"
};
Under the component script section and Ive tried a thousand other things with no luck. Can you give me a clue?

[lkmadushan]

@luzioluna

Is this what you want? https://codesandbox.io/s/kw1o37l195

Check App.vue

In my previous example each event is a Vue Component so you have to style component it self.

In here i have removed @after-render-schedule event so it uses default event template.

[luzioluna]

Yes! Thank you! Any chance you are available for tutoring? contact you through your website? ill remove this comment tonight

[lkmadushan]

@luzioluna For sure. let me know if you need any help. Skype: kalpa.lkm

I think your question will help some else later. So keep it :)

[luzioluna]

sure. you've already advanced me a great deal on my project with this wrapper and your advice. i will get a hold of you.

[lkmadushan]

@luzioluna Thank you :) I think it's because fixed dates. Need to update it to relative dates

[luzioluna]

thanks, sometimes I ask questions before I look at things, not a good habit.

[dongsik-yoo]

Hello everyone. There is a new TOAST UI Family. I think it's great grid and helpful for your Vue application.
TOAST UI Grid v3.0 has been released. New design and Tree+Grid. Please have a look.

https://github.com/nhnent/tui.grid

[lkmadushan]

@dongsik-yoo that's cool. I will try to create a Vue component for that. Thanks :)

BTW.. I would like to know, is there a timeline view in TUI Calendar?

[dongsik-yoo]

@lkmadushan Oh, not yet. There are several questions about timeline, but we don't have it yet.