CODEWITHSUNDEEP
javascriptreactjsreact-big-calendar
R.Meredith
R.Meredith

Reputation: 314

React big calendar, render component when clicking on an event

I would like to render a component next to an event when it is clicked to show more information. Something like this https://i.sstatic.net/jOVsE.png

I can use onSelectEvent to create a modal but I have no idea how to put the modal next to the event that was just clicked. I have looked into creating custom events with a popover contained within the event text but there seems to be no way to fire the click event from with in the event and I cannot work out how to do it from onSelectEvent.

Upvotes: 1

Views: 4976

Answers (1)

iamwebkalakaar
iamwebkalakaar

Reputation: 358

import React from 'react';
import { Button, Popover, PopoverHeader, PopoverBody } from 'reactstrap';

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      popoverOpen: false
    };
  }

  toggle() {
    this.setState({
      popoverOpen: !this.state.popoverOpen
    });
  }

  render() {
    return (
      <div>
        <Button id="Popover1" type="button">
          Launch Popover
        </Button>
        <Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
          <PopoverBody>/*Your date picker code goes here*/</PopoverBody>
        </Popover>
      </div>
    );
  }
}

Check for refrence (reactstrap)

Upvotes: 3

Related Questions