How to use tui-calendar - 3 common examples

import Calendar, { ISchedule, IEventObject } from 'tui-calendar';

const querySelectorEl = document.querySelector('#div') ||
  document.getElementById('div') ||
  document.createElement('div') ||
  '#cal';

const calendar = new Calendar(querySelectorEl, {
    defaultView: 'week',
    taskView: true,
    scheduleView: ['allday', 'time'],
    template: {
        milestoneTitle() {
            return 'Milestone';
        },
        milestone(schedule: ISchedule) {
            return `<span style="color: red;">${schedule.title}</span>`;
        },
        taskTitle() {
            return 'Task';
        },
        task(schedule: ISchedule) {
            return `$nbsp;#${schedule.title}`;
        },

mounted () {
    this.calendar = new TuiCalendar(this.$el, this.options)

    this.registerEvents()
    this.render()
  },

componentDidMount() {
    const {schedules = [], view} = this.props;

    this.calendarInst = new TuiCalendar(this.rootEl.current, {
      ...this.props,
      defaultView: view
    });

    this.setSchedules(schedules);

    this.bindEventHandlers(this.props);
  }