Material-ui: Need a date calendar component

[geohuz]

Basically It is just a calendar component with look and feel similar with the date picker. It's a calendar without "popup". Any way to make it?

[oliviertassinari]

That's the internal Calendar component. You can use it directly but we plan do change the folder organization. That may break in the future.

[geohuz]

Thanks!

[jaredmahan]

@oliviertassinari The link you specified no longer works

[oliviertassinari]

@jaredmahan Link fixed.

[mokargas]

Hey, I'm trying to use the calendar directly, but all days appear on one line. Is there any other way to show the calendar persistently?

import Calendar from 'material-ui/DatePicker/Calendar';

export default class DateSelector extends React.Component {

  render() {
    return (

        <Calendar></Calendar>

    );
  }
}

[PhilipGrefe]

@mokargas look right here: https://github.com/callemall/material-ui/issues/5037

[mokargas]

Thanks @FelipeSP !

[qalqi]

To capture day click events for
<Calendar firstDayOfWeek={1} onTouchTapDay={(event, date) => { console.log(date)}} ></Calendar>

[nataze]

To capture day click events for
<Calendar firstDayOfWeek={1} onTouchTapDay={(event, date) => { console.log(date)}} ></Calendar>

For some reason the onTouchTapDay doesn't work for me, did it work for you @qalqi ?

[nataze]

Nevermind, it was changed to onClickDay

[MattRCherry]

Hey does anyone still know if this is still possible? It looks like the folder organization was changed so the Calendar now lives under /views/Calendar, but when I try to render it, it now requires props I'm not sure what to do with. Here is what I've tried:

import React, { useState } from 'react';
import { MaterialUiPickersDate } from '@material-ui/pickers';
import { Calendar } from '@material-ui/pickers/views/Calendar/Calendar';
import { makeStyles } from '@material-ui/styles';
import { Theme, createStyles, useTheme } from '@material-ui/core';

const useStyles = makeStyles((theme: Theme) => createStyles({}));

interface ScheduleViewProps {
  example?: string;
}

export default function ScheduleView(props: ScheduleViewProps) {
  const { example } = props;
  const theme: Theme = useTheme();
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());

  const handleDateChange = (date: MaterialUiPickersDate) => {
    setSelectedDate(date);
  };

  return (
    <div>
      <Calendar
        firstDayOfWeek={1}
        date={selectedDate}
        onChange={(date, isFinish) => {}}
        classes={{}}
        utils={{}}
        theme={theme}
      />
    </div>
  );
}

Left with the Typescript errors:
Prop classes:

Type '{}' is missing the following properties from type 'Record<"transitionContainer" | "progressContainer" | "week", string>': transitionContainer, progressContainer, week

Prop utils:

Type '{}' is missing the following properties from type 'IUtils': yearFormat, yearMonthFormat, dateTime12hFormat, dateTime24hFormat, and 50 more.

[oliviertassinari]

@MattRCherry Do you think that you could move the concern to https://github.com/mui-org/material-ui-pickers? Thanks :)

[MattRCherry]

Will do! My mistake should have noticed this was no longer the right repo!