New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to integrate with VueJs #81

Closed
lkmadushan opened this Issue Apr 27, 2018 · 32 comments

Comments

Projects
None yet
4 participants
@lkmadushan

lkmadushan commented Apr 27, 2018

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

@lkmadushan lkmadushan changed the title from How to integrate with Vuejs to How to integrate with VueJs Apr 27, 2018

@scottybo

This comment has been minimized.

scottybo commented Apr 29, 2018

Would also love to know how to integrate this with vuejs

@scottybo

This comment has been minimized.

scottybo commented May 7, 2018

@ikmadushan did you figure this one out?

@lkmadushan

This comment has been minimized.

lkmadushan commented May 7, 2018

@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

This comment has been minimized.

Contributor

dongsik-yoo commented May 8, 2018

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

This comment has been minimized.

Contributor

dongsik-yoo commented May 11, 2018

Is there anyone who makes a vue wrapper?

@lkmadushan

This comment has been minimized.

lkmadushan commented May 11, 2018

@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

This comment has been minimized.

Contributor

dongsik-yoo commented May 11, 2018

@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

This comment has been minimized.

lkmadushan commented May 11, 2018

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

@lkmadushan

This comment has been minimized.

lkmadushan commented May 12, 2018

@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

This comment has been minimized.

Contributor

dongsik-yoo commented May 14, 2018

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

@dongsik-yoo

This comment has been minimized.

Contributor

dongsik-yoo commented May 14, 2018

@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

This comment has been minimized.

Contributor

dongsik-yoo commented May 15, 2018

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

@lkmadushan

This comment has been minimized.

lkmadushan commented May 16, 2018

@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

This comment has been minimized.

Contributor

dongsik-yoo commented May 16, 2018

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

@dongsik-yoo

This comment has been minimized.

Contributor

dongsik-yoo commented May 17, 2018

@lkmadushan Here v1.2.0 is.

@lkmadushan

This comment has been minimized.

lkmadushan commented May 17, 2018

@dongsik-yoo Thank you very much!

@lkmadushan

This comment has been minimized.

lkmadushan commented May 22, 2018

@lkmadushan

This comment has been minimized.

lkmadushan commented May 23, 2018

@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

This comment has been minimized.

Contributor

dongsik-yoo commented May 23, 2018

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

@dongsik-yoo

This comment has been minimized.

Contributor

dongsik-yoo commented May 23, 2018

@lkmadushan Can you create a new issue for that?

@lkmadushan

This comment has been minimized.

lkmadushan commented May 23, 2018

youjung-hong added a commit that referenced this issue May 23, 2018

@dongsik-yoo

This comment has been minimized.

Contributor

dongsik-yoo commented May 24, 2018

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

@lkmadushan lkmadushan closed this May 24, 2018

@luzioluna

This comment has been minimized.

luzioluna commented Jun 12, 2018

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

This comment has been minimized.

lkmadushan commented Jun 12, 2018

@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

This comment has been minimized.

luzioluna commented Jun 12, 2018

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

@lkmadushan

This comment has been minimized.

lkmadushan commented Jun 12, 2018

@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

This comment has been minimized.

luzioluna commented Jun 12, 2018

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

This comment has been minimized.

lkmadushan commented Jun 12, 2018

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

@luzioluna

This comment has been minimized.

luzioluna commented Jun 12, 2018

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

@dongsik-yoo

This comment has been minimized.

Contributor

dongsik-yoo commented Jul 4, 2018

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

This comment has been minimized.

lkmadushan commented Jul 4, 2018

@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

This comment has been minimized.

Contributor

dongsik-yoo commented Jul 4, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment