month view not workink

[josecn29]

Version

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

Test Environment

Goolgle Chrome Versión 75.0.3770.100 Windows

Current Behavior

When I switch to the month view, it is not displayed correctly. Only the headers are shown.

In others views, it is displayed correctly.

import * as React from 'react';
import Typography from '@material-ui/core/Typography';
import { Link } from 'react-router-dom';
import { linkRoutes } from 'core/router';
import { useTranslation, composeInitialProps } from 'react-i18next';
import { namespaces } from 'core/i18n';
import { keys } from './translations';
import Calendar from '@toast-ui/react-calendar';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
import moment from 'moment';

interface Props {
  schedules: any;
}

const useStyles = makeStyles(theme => ({
  button: {
    margin: theme.spacing(1),
  },
  input: {
    display: 'none',
  },
}));

export const HorarioComponent: React.FunctionComponent<Props> = props => {

  const classes = useStyles(props);
  const { t } = useTranslation(namespaces.pods.horario);

  const [view, setView] = React.useState('day');

  const myTheme = {
    // Theme object to extends default dark theme.
  };

  function handleDiaClick(e) {
    e.preventDefault();
    setView('day');
  }

  function handleSemanaClick(e) {
    e.preventDefault();
    setView('week');
  }

  function handleMesClick(e) {
    e.preventDefault();
    setView('month');
  }

  return (
    <>
      <Typography variant="h4">{t(keys.title)}</Typography>
      <Link to={linkRoutes.base}>
        <Typography variant="body1">{t(keys.link)}</Typography>
      </Link>
      <div id="botones" style={{ width: '100%' }}>
        <Button
          variant="contained"
          className={classes.button}
          onClick={handleDiaClick}
        >
          Dia
        </Button>
        <Button
          variant="contained"
          className={classes.button}
          onClick={handleSemanaClick}
        >
          Semana
        </Button>
        <Button
          variant="contained"
          className={classes.button}
          onClick={handleMesClick}
        >
          Mes
        </Button>
      </div>
      <div id="calendar" style={{ width: '100%' }}>
        <Calendar
          calendars={[
            {
              id: '0',
              name: 'Asignatura 1',
              bgColor: '#9e5fff',
              borderColor: '#9e5fff',
            },
            {
              id: '1',
              name: 'Asignatura 2',
              bgColor: '#00a9ff',
              borderColor: '#00a9ff',
            },
          ]}
          view={view}
          disableDblClick={true}
          disableClick={true}
          height="100%"
          isReadOnly={true}
          month={{
            daynames: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
            startDayOfWeek: 1,
            visibleWeeksCount: 6,
          }}
          schedules={props.schedules}
          scheduleView={true}
          taskView={false}
          template={{
            milestone(schedule) {
              return `<span style="color:#fff;background-color: ${schedule.bgColor};">${schedule.title}</span>`;
            },
            milestoneTitle() {
              return 'Milestone';
            },
            allday(schedule) {
              return `${schedule.title}<i class="fa fa-refresh"></i>`;
            },
            alldayTitle() {
              return 'Todo el dia';
            },
          }}
          theme={myTheme}
          /*   timezones={[
            {
              timezoneOffset: 540,
              displayLabel: 'GMT+01:00',
              tooltip: 'Madrid',
            },
          ]} */
          useDetailPopup
          useCreationPopup
          //    view={selectedView}
          week={{
            startDayOfWeek: 1,
            daynames: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
            showTimezoneCollapseButton: true,
            timezonesCollapsed: true,
            hourStart: 8,
            hourEnd: 18,
          }}
        />
      </div>
    </>
  );
};

Expected Behavior

I would like to see the month view

[dongsik-yoo]

#calendar must have css height. Will you set the height?

[josecn29]

But both day and week views work correctly without height. This one should also do it. How workaround is perfect.

[dongsik-yoo]

@josecn29 yeah, you're right. I will enhance that.

[josecn29]

Ok, thanks. I await the solution.

[zzis]

+1, waiting for the solution

[zzis]

I'm using the container has a height, but still can't see the calendar. With version 1.0.2

<div id={'calendar'} style={{height: 500, width: '100%'}}>
  <Calendar
    view={'month'}
  />
</div>;

[zzis]

#calendar must have css height. Will you set the height?

I checked the code, the height prop should be the Calendar itself but not the container's height now it works, I can see the month view after setting the height prop

<div id={'calendar'} className={style.calendarContainer}>
  <Calendar
     view={'month'}
     height={500}
  />
</div>;

[dongsik-yoo]

Thank you. And I patch this at TOAST UI Calendar. You will see the default height of month view after new release version(Not scheduled).

[adhrinae]

@Elise-Kasai Hi, I think your question is irrelevant to this issue. How about creating a new issue on the main repo? It will help others struggling with similar problems. And also, Please upload some attachments like screenshots or codes reproducing the problem.

If you're trying to modify behaviors on the example page, you might need to see functions such as like this one rather than the calendar instance.