0

I am trying to show a div when I select a time slot on FullCalendar, but I don't know how to do it with react. It is supposed to look like this: https://prnt.sc/vekx12. This is my code:

> import React from 'react' import FullCalendar from
> '@fullcalendar/react' import dayGridPlugin from
> '@fullcalendar/daygrid'
> 
> export default class DemoApp extends React.Component {
>     render() {
>         return (
>             <FullCalendar
>                 plugins={[dayGridPlugin]}
>                 events= 'https://fullcalendar.io/demo-events.json?overload-day&start=2020-11-01T00%3A00%3A00Z&end=2020-12-13T00%3A00%3A00Z&timeZone=UTC'
>                 selectable={true}
>                 select={(info)=>this.someMethod(info)}
>             />
>         )
>     }
>     someMethod() {
>     return "<div className='event-edit-popup'> <div className='flex'> <p>title</p></div></div>"   } }

What am I missing??

ADyson
  • 57,178
  • 14
  • 51
  • 63
wavelet
  • 41
  • 3
  • I'm not a react expert but maybe something like this would help: https://stackoverflow.com/questions/24502898/show-or-hide-element-in-react (I just googled "react how to show a div" - there are plenty more results if that isn't useful. What have you research yourself so far?) – ADyson Nov 06 '20 at 23:10
  • @ADyson Thanks a lot. I don't need it on react. I need it on FullCalendar. For example, to edit a content on FullCalendar, we have the prop 'eventContent', where I can show/hide, edit divs. I was looking for something like eventContent, when there is no event. – wavelet Nov 09 '20 at 08:16
  • An eventContent equivalent would put content _into_ the calendar area though. Not sure you really want that - what changes would you make? I think what you really need is to do something like show a modal popup, so that the user can confirm the details of the event, based on the time they've just selected in the calendar. So for that, you'd simply handle the "select" event as you've already done, and then make it show the modal popup element (either via react, or I guess via native Javascript if you prefer). – ADyson Nov 09 '20 at 09:29
  • I have the method to save the changes after I put them into the calendar area, and to update the calendar. I want to do something similar as Google Calendar has. In order to add a new event, I want to open a small popup next to the selected date, like in the attached image. I already have a working modal. – wavelet Nov 09 '20 at 09:47
  • I see. If you're only going to be using the dayGrid view, then I suggest using [dateClick](https://fullcalendar.io/docs/dateClick) instead of `select`, because that callback contains a reference to the HTML element of the day area in the grid, and therefore you can use it to position a popover relative to that element. – ADyson Nov 09 '20 at 09:54

0 Answers0