CODEWITHSUNDEEP
javascriptreactjsdatepickercalendarmaterial-ui
ali
ali

Reputation: 881

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):

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.

Upvotes: 0

Views: 2605

Answers (1)

hazardous
hazardous

Reputation: 10837

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}
    />

Upvotes: 2

Related Questions