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

Reactjs Wrapper for tui.calendar #134

Closed
IniZio opened this Issue Jun 7, 2018 · 15 comments

Comments

Projects
3 participants
@IniZio

IniZio commented Jun 7, 2018

I am planning to write a Reactjs wrapper for this nice package, and have read the vuejs and angularjs implementations, however they seem to differ from the pattern that React suggests i.e. 'data down, actions up'.

Therefore just want to ask if it is preferred to follow the other wrappers or figure our the React way?

@dongsik-yoo

This comment has been minimized.

Member

dongsik-yoo commented Jun 7, 2018

I think it's better that you figure the React way out. https://ui.toast.com/tui-calendar is implemented by React.

@dongsik-yoo dongsik-yoo added the question label Jun 7, 2018

@dongsik-yoo

This comment has been minimized.

Member

dongsik-yoo commented Jun 8, 2018

@IniZio If you have any question to create React wrapper, don't hesitate leave comments or issue.

@damusix

This comment has been minimized.

Contributor

damusix commented Jun 25, 2018

@dongsik-yoo can you provide an example? Also, how would we manage calendar state?

@dongsik-yoo

This comment has been minimized.

Member

dongsik-yoo commented Jun 25, 2018

@damusix I needed very simple state in my example site. So this is simple sample.

class CalendarMain extends React.Component {
  constructor() {
    super();
    this.state = {
      renderRange: ''
    };

    this.options = {
      defaultView: 'month',
      template: CalendarTemplate,
      useCreationPopup: true,
      useDetailPopup: true,
      calendars: calendarList,
      month: {},
      week: {}
    };
  }

  componentDidMount() {
    this.calendar = this.createCalendarMain();
    this.setEventHandlers();
    this.setSchedules();
    this.setRenderRangeText();
  }

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

  setSchedules() {
    const cal = this.calendar;
    const schedules = generateSchedule(
      calendarList,
      cal.getViewName(),
      cal.getDateRangeStart(),
      cal.getDateRangeEnd(),
      cal.getOptions()
    );
    cal.createSchedules(schedules);
  }

  createCalendarMain() {
    return new TuiCalendar('#calendar', this.options);
  }
}
@IniZio

This comment has been minimized.

IniZio commented Jun 26, 2018

Currently working on the wrapper here https://github.com/IniZio/react-tui-calendar

@dongsik-yoo

This comment has been minimized.

Member

dongsik-yoo commented Jun 26, 2018

@IniZio It's empty repository. Can you please check it out?
image

@IniZio

This comment has been minimized.

IniZio commented Jun 26, 2018

Yes I am doing the initial setup still 😅

@dongsik-yoo

This comment has been minimized.

Member

dongsik-yoo commented Jun 26, 2018

Oh, sorry. I didn't understand what you said.
Thank you for your effort.

@dongsik-yoo

This comment has been minimized.

Member

dongsik-yoo commented Jul 4, 2018

I introduce to you Another TOAST UI Family. It would be helpful for your React application.
TOAST UI Grid v3.0 has been released. New design and Tree+Grid. Please have a look.

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

@IniZio

This comment has been minimized.

IniZio commented Jul 4, 2018

I am working on the integrating react-tui-calendar with https://github.com/IniZio/usthing-ui 😄

@dongsik-yoo

This comment has been minimized.

Member

dongsik-yoo commented Jul 4, 2018

@IniZio usthing-ui has many useful components. Great!

@IniZio

This comment has been minimized.

IniZio commented Jul 15, 2018

Demo site for the wrapper https://inizio.github.io/react-tui-calendar/, though the wrapper itself is not ready yet 😂

@IniZio

This comment has been minimized.

IniZio commented Jul 15, 2018

react-tui-calendar was occupied already, published at tui-calendar-react for testing

@dongsik-yoo

This comment has been minimized.

Member

dongsik-yoo commented Jul 16, 2018

@IniZio Thank you for your effort. I would be great helpful to users!.
BTW, tui-calendar-react link is forbidden.

@IniZio

This comment has been minimized.

IniZio commented Jul 16, 2018

Fixed the link 🙈

@dongsik-yoo dongsik-yoo closed this Sep 5, 2018

Features automation moved this from To do to Done Sep 5, 2018

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