Render Full Calendar of DatePicker on a page

问题:

I'm trying out React to make a simple application.

I like how the full calendar looks like of the following date pickers (after clicking):

• Material-UI
• React-Toolbox

Is it possible to extract out the full calendar out onto a page without having to click to open the calendar modal/dialog? Just like in Google Calendar apps.

For example, I'd like to display the calendar on the main page of the app.

回答1:

Have a look at the Calendar component in material-ui library. You should be able to use it directly -

import Calendar from 'material-ui/lib/date-picker/calendar';

For an example on how to use it, look inside the DatePickerDialog component code.

<Calendar
      DateTimeFormat={DateTimeFormat}
      firstDayOfWeek={firstDayOfWeek}
      locale={locale}
      ref="calendar"
      onDayTouchTap={this.handleTouchTapDay}
      initialDate={this.props.initialDate}
      open={this.state.open}
      minDate={this.props.minDate}
      maxDate={this.props.maxDate}
      shouldDisableDate={this.props.shouldDisableDate}
      disableYearSelection={this.props.disableYearSelection}
      mode={this.props.mode}
    />