## Introduction I'm working on my sideproject developed in React. A calendar component is needed for user to pick the date. Through searching on Github, I find [rc-calendar](https://github.com/react-component/calendar), which is a very beautiful React calendar component. The screenshot is as following: ![1](https://steemitimages.com/DQmTKPrRp341vie5jGeN4W8LMZgcoXFmCUXBALaj3JfQj3Q/%E6%8D%951212%E8%8E%B7.PNG) In this tutorial, I will show you how to import rc-calendar into our React project. ## Install I install rc-calendar package with yarn: ``` yarn add rc-calendar ``` ## Getting Start We beggining coding from a React class, eg. CalendarPage: ``` import React, {Component} from 'react'; class CalendarPage extends Component { constructor(props) { super(props); } render() { return (

) ) } export default CalendarPage; ``` It's an emtpy class now. ## Adding a calendar To add the calendar into our DialogCreateProject component, we need following code: ```js import React, {Component} from 'react'; import Calendar from 'rc-calendar'; import 'rc-calendar/assets/index.css'; class CalendarPage extends Component { constructor(props) { super(props); } render() { return (

) } } export default CalendarPage; ``` Now a Calendar will be shown on our page: ![2](https://steemitimages.com/DQmSLyc3Txfd9SDjaP1MePpTK7TEYFYsL6zENuWArur6u6B/fdafs.PNG) ## Poped up by clicking the time The code abrove can not completely meets my need. I would like the Calendar poping up after I click a time label, like this [demo](http://react-component.github.io/calendar/examples/antd-calendar.html): ![3](https://steemitimages.com/DQmT8ypkmh3Mms9Fq5TqLHJm4cfv8NhwkbbTBx9H2ttXEv6/64565465464.PNG) So the problem is devided into two parts: 1. Create a label shows the datetime. 2. A calendar be poped up by clicking the label. The rc-calendar is already provide a React Component called Picker, which is the label we need. We import it into our project: ```js import React, {Component} from 'react'; import Calendar from 'rc-calendar'; import DatePicker from 'rc-calendar/lib/Picker'; import 'rc-calendar/assets/index.css'; import moment from 'moment'; class CalendarPage extends Component { constructor(props) { super(props); } render() { const calendar = (); return (

{ ({value}) => { return ( ) } }

) } } export default CalendarPage; ``` Now after recompile the code, a Picker will appear in our page: ![4](https://steemitimages.com/DQmRbxyHKFzCaWWKCH9m2D46kcTK5jyqrx7EdrpBUTnaysC/%E6%8D%95%E8%8E%B744444.PNG) When we click it, the Calendar pops up. But we find that the time is not correct, it shows the timestamp, what we want is formatted date. ## Format Time I use moment library for time formating, we change the DatePicker as following: ```js { ({value}) => { return ( ) } } ``` I add a format call on the value. ## Time State Now we need to add a state to record the time we picked from the DatePicker, so we change the code as following: ```js import React, {Component} from 'react'; import Calendar from 'rc-calendar'; import DatePicker from 'rc-calendar/lib/Picker'; import 'rc-calendar/assets/index.css'; import moment from 'moment'; class CalendarPage extends Component { constructor(props) { super(props); this.state = { time: moment() } } render() { const calendar = (); return (

this.setState({time: newTime})} >{ ({value}) => { return ( ) } }

) } } export default CalendarPage; ``` So far we have achieved our intended target. For more advanced usage, you can see this [page](http://react-component.github.io/calendar/). If you like my tutorial, please upvote~