Skip to content
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
Closed

How to integrate with VueJs #81

lkmadushan opened this issue Apr 27, 2018 · 32 comments
Labels

Comments

@lkmadushan
Copy link

lkmadushan commented Apr 27, 2018

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

@lkmadushan lkmadushan changed the title How to integrate with Vuejs How to integrate with VueJs Apr 27, 2018
@scottybo
Copy link

Would also love to know how to integrate this with vuejs

@scottybo
Copy link

scottybo commented May 7, 2018

@ikmadushan did you figure this one out?

@lkmadushan
Copy link
Author

@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
Copy link
Contributor

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
Copy link
Contributor

Is there anyone who makes a vue wrapper?

@lkmadushan
Copy link
Author

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
Copy link
Contributor

@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
Copy link
Author

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

@lkmadushan
Copy link
Author

@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
Copy link
Contributor

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

@dongsik-yoo
Copy link
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
Copy link
Contributor

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

@lkmadushan
Copy link
Author

@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
Copy link
Contributor

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

@dongsik-yoo
Copy link
Contributor

@lkmadushan Here v1.2.0 is.

@lkmadushan
Copy link
Author

@dongsik-yoo Thank you very much!

@lkmadushan
Copy link
Author

lkmadushan commented May 22, 2018

Vue.js wrapper for TOAST UI Calendar :)

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

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

@lkmadushan
Copy link
Author

@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
Copy link
Contributor

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

@dongsik-yoo
Copy link
Contributor

@lkmadushan Can you create a new issue for that?

@lkmadushan
Copy link
Author

@dongsik-yoo sure! #122

@dongsik-yoo
Copy link
Contributor

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

@luzioluna
Copy link

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
Copy link
Author

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
Copy link

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

@lkmadushan
Copy link
Author

@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
Copy link

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
Copy link
Author

lkmadushan commented Jun 12, 2018

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

@luzioluna
Copy link

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

@dongsik-yoo
Copy link
Contributor

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
Copy link
Author

@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
Copy link
Contributor

@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
Labels
Projects
None yet
Development

No branches or pull requests

4 participants