defaultView not working

[Manu Rueda]

Version

"@toast-ui/react-calendar": "^1.0.1"

Test Environment

MAC OS Mojave 10.14.1

Current Behavior

adding defaultView="month" does not show the month view as expected, it remains with the same view

const AirworkCalendar = () => {
  return (
    <Calendar
      defaultView="month"
      usageStatistics={false}
      calendars={[
        {
          id: "0",
          name: "Private",
          bgColor: "#9e5fff",
          borderColor: "#9e5fff"
        }
      ]}
      disableDblClick={true}
      height="50vh"
      isReadOnly={true}
      month={{
        visibleWeeksCount: 3
      }}
      schedules={[
        {
          id: "1",
          calendarId: "0",
          title: "TOAST UI Calendar Study",
          category: "time",
          dueDateClass: "",
          start: changeTodayDateInDays(0),
          end: changeTodayDateInDays(3)
        }
      ]}
      template={{
        milestone(schedule) {
          return `<span style="color:#fff;background-color: ${
            schedule.bgColor
          };">${schedule.title}</span>`;
        }
      }}
      theme={myTheme}
      timezones={[
        {
          timezoneOffset: -420,
          displayLabel: "GMT-08:00",
          tooltip: "San Francisco"
        }
      ]}
    />
  );
};

This is an screenshot of the current behaviour

Expected Behavior

I would like to get the view like in the example https://nhn.github.io/tui.calendar/latest/tutorial-example05-3-weeks

[Seiya]

Have you found any solution for this? @jmderueda
Having a button with a function :

changeViewToDay= () => {
    Calendar.changeView('day', true);
}
  
...

<button
    onClick={this.changeViewToDay}
    > Day
</button>

doesn't seems to work and produces this error:

And it should work according to this documentation

[Seiya]

@jmderueda after ... reading the Readme.md I finally managed to find out how to handle the events.
First, you need to declare a referece.

class ReactComponent extends Component {
  calendarRef = React.createRef(); //this line
  constructor(props) {
  ...
    };
  }
  ...

and after that you just update the function with the reference.

  changeViewToDay = () => {
    console.log("changingViewToDay");
    const calendarInstance = this.calendarRef.current.getInstance();
    calendarInstance.changeView('day', true);
    console.log("changeViewToDay");
  }

[lessfish]

same problem, did I miss something? Or it's a real bug?

[Seiya]

@lessfish, I've been working with the calendar for a while now, atm I don't think is possible to "render directly" to a view apart from week.
The workaround for doing so is to call a function like above on componentDidMount(){ }

--- after ... reading the Readme.md I finally managed to find out how to handle the events.
First, you need to declare a referece.

class ReactComponent extends Component {
  calendarRef = React.createRef(); //this line
  constructor(props) {
  ...
    };
  }
  ...

and after that you just update the function with the reference.

  changeViewToDay = () => {
    console.log("changingViewToDay");
    const calendarInstance = this.calendarRef.current.getInstance();
    calendarInstance.changeView('day', true);
    console.log("changeViewToDay");
  }

[조정은]

@jmderueda
Use view prop instead of defaultView prop.
If you change the view("month", "week" or "day"), it will call changeView method internally.

<Calendar
  view="month"
  ...
/>

[YEriin]

@jmderueda
Use view prop instead of defaultView prop.
If you change the view("month", "week" or "day"), it will call changeView method internally.

<Calendar
  view="month"
  ...
/>

After set view = "month", the component display nothing. And, would you plz provide the *.d.ts file?

There will be ''Setting defaultProps as an instance property on t is not supported and will be ignored.'' error because the set of defaultProps, too.

[조정은]

@YEriin
The defaultProps will be fixed soon. It will be declared as static.

The monthly calendar requires the height value of the container.

You can see this for *.d.ts.

[조정은]

@YEriin
In the near future, I'll include a Typescript definition file in the wrapper.
Happy coding. ✨

[Riccardo Giorato]

@jungeun-cho how can I fix the error ''Setting defaultProps as an instance property on t is not supported and will be ignored.'' ?

<Calendar 
...
month = {
    {
        startDayOfWeek: 1,
        moreLayerSize: {
            width: "100%",
            height: "500px",
        }
    }
}
.../>

I tried with this but it didn't work.

[조정은]

@giorat Can you tell me how to reproduce the issue you mentioned?

<Calendar
          height="800px"
          view="month"
          month={
            {
              startDayOfWeek: 1,
              moreLayerSize: {
                width: "100%",
                height: "500px"
              }
            }
          }
        />

[Dohyung Ahn]

Closing the issue since it's inactive and the problem looks resolved.