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

Reactjs Wrapper for tui.calendar #134

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

Reactjs Wrapper for tui.calendar #134

IniZio opened this issue Jun 7, 2018 · 15 comments
Labels

Comments

@IniZio
Copy link

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

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

@dongsik-yoo
Copy link
Contributor

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

@damusix
Copy link
Contributor

damusix commented Jun 25, 2018

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

@dongsik-yoo
Copy link
Contributor

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

IniZio commented Jun 26, 2018

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

@dongsik-yoo
Copy link
Contributor

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

@IniZio
Copy link
Author

IniZio commented Jun 26, 2018

Yes I am doing the initial setup still 😅

@dongsik-yoo
Copy link
Contributor

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

@dongsik-yoo
Copy link
Contributor

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

IniZio commented Jul 4, 2018

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

@dongsik-yoo
Copy link
Contributor

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

@IniZio
Copy link
Author

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

IniZio commented Jul 15, 2018

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

@dongsik-yoo
Copy link
Contributor

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

@IniZio
Copy link
Author

IniZio commented Jul 16, 2018

Fixed the link 🙈

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
@IniZio @damusix @dongsik-yoo and others