In this post lets look at how we can book a meeting on a calendar (React Big Calendar).
In your project home directory first install the required npm package.
npm i react-big-calendar --save
Now you can import the package in your component as below:
import BigCalendar from 'react-big-calendar'
To display the calendar view on your webpage you need to invoke the component with some props as below:
<BigCalendar
events={myEventsList}
views={allViews}
step={30}
timeslots={2}
defaultView='week'
defaultDate={new Date()}
components={{
event: Event,
agenda: {
event: EventAgenda
}
}}
/>
We need to define the two functions Event and EventAgenda for the Agenda view to work on the calendar:
/*Agenda Rendering*/
//Outside the class
function Event({ event }) {
return (
<span>
<strong>
{event.title}
</strong>
{ event.desc && (': ' + event.desc)}
</span>
)
}
function EventAgenda({ event }) {
return <span>
<em style={{ color: 'magenta'}}>{event.title}</em>
<p>{ event.desc }</p>
</span>
}
The calendar component is dependent on moment.js as well. So we need to install and import moment.js as follows:
npm i moment --save //In the root of the proj directory import moment from 'moment'; //In the calendar component
We need to initialise the Big Calendar using moment JS inside the calendar component:
//Outside the class BigCalendar.momentLocalizer(moment); let allViews = Object.keys(BigCalendar.views).map(k => BigCalendar.views[k])
Now we need to provide the events data to show all the booked slots. So we need to provide a JSON in following format:
var myEventsList = [{
'title': 'Conference',
'start': new Date(2017, 3, 11),
'end': new Date(2017, 3, 13),
desc: 'Big conference for important people'
},
{
'title': 'Meeting',
'start': new Date(2017, 3, 12, 10, 30, 0, 0),
'end': new Date(2017, 3, 12, 12, 30, 0, 0),
desc: 'Pre-meeting meeting, to prepare for the meeting'
},
{
'title': 'Lunch',
'start':new Date(2017, 3, 12, 12, 0, 0, 0),
'end': new Date(2017, 3, 12, 13, 0, 0, 0),
desc: 'Power lunch'
}]
Now this should show all the booked slots on the calendar if you navigate to the right dates.
The next steps will let you choose a slot and book a meeting:
Below props need to be sent to the existing BigCalendar component:
selectable
onSelectEvent={event => this.onEventClick(event)}
onSelectSlot={(slotInfo) => this.onSlotChange(slotInfo) }
Now the render function should have the BigCalendar invocation as below:
<BigCalendar
selectable
onSelectEvent={event => this.onEventClick(event)}
onSelectSlot={(slotInfo) => this.onSlotChange(slotInfo) }
events={myEventsList}
views={allViews}
step={30}
timeslots={2}
defaultView='week'
defaultDate={new Date()}
components={{
event: Event,
agenda: {
event: EventAgenda
}
}}
/>
Lets define the functions that are being sent as props:
/* When you choose a particular slot on the calendar */
onSlotChange(slotInfo) {
var startDate = moment(slotInfo.start.toLocaleString()).format("YYYY-MM-DD HH:mm:ss");
var endDate = moment(slotInfo.end.toLocaleString()).format("YYYY-MM-DD HH:mm:ss");
console.log('startTime', startDate); //shows the start time chosen
console.log('endTime', endDate); //shows the end time chosen
}
/* When you click on an already booked slot */
onEventClick(event) {
console.log(event) //Shows the event details provided while booking
}
Now you can build a view to use the selected time slot and book a meeting:
You can refer this page for more details on the calendar component:
Live demo of different views can be found here:
vickykedlaya 