show more popup customize

[adityay-perpetualny]

How can we customize show more popup

[adityay-perpetualny]

any suggestions please

[terminalqo]

http://intljusticemission.github.io/react-big-calendar/examples/index.html#prop-components

[adityay-perpetualny]

Can I have an example please, just an over view, that would be helpful.

For event,we pass event in the component, so for show more popup which parameter needs to be passed.

Thanks in advance.

[terminalqo]

Well, I can't find popup in components, which means cannot customize show more popup?

     * let components = {
     *   event: MyEvent, // used by each view (Month, Day, Week)
     *   eventWrapper: MyEventWrapper,
     *   eventContainerWrapper: MyEventContainerWrapper,
     *   dayWrapper: MyDayWrapper,
     *   dateCellWrapper: MyDateCellWrapper,
     *   timeSlotWrapper: MyTimeSlotWrapper,
     *   timeGutterHeader: MyTimeGutterWrapper,
     *   toolbar: MyToolbar,
     *   agenda: {
     *   	 event: MyAgendaEvent // with the agenda view use a different component to render events
     *     time: MyAgendaTime,
     *     date: MyAgendaDate,
     *   },
     *   day: {
     *     header: MyDayHeader,
     *     event: MyDayEvent,
     *   },
     *   week: {
     *     header: MyWeekHeader,
     *     event: MyWeekEvent,
     *   },
     *   month: {
     *     header: MyMonthHeader,
     *     dateHeader: MyMonthDateHeader,
     *     event: MyMonthEvent,
     *   }
     * }
     * <Calendar components={components} />
     * 

[adityay-perpetualny]

can we try by disabling the popup and on click of "show more link" open our own popup?
I tried it but the issue is, not able to get the click event or callback on the click of "show more link"

Thanks.

[mkurtzsd]

Here's what we do. Note that we return an element rather than just text. This allows us to add an onClick handler.

messages={{ showMore: (target) => <span className="ml-2" role="presentation" onClick={() => this.setState({ calendarOverlay: true, currentTitleData: {} })}> ...{target} more</span> }}

With this, do not set the popup attribute true.

[jquense]

you can disable the pop and handle the show more callback yourself. onShowMore is the callback, it seems to be missing from the docs oops

https://github.com/intljusticemission/react-big-calendar/blob/1d62c432eaa183ed6b38f08cfcec5ee7edcbfe41/src/EventEndingRow.js#L103

[andrew-pyle]

@jquense or @Yadro How is the onShowMore callback used? Can you provide a short example of a onShowMore callback in action?

I'm trying to customize the default popup to specify the order of events, but I can't figure out the usage.

The documentation in the code at src/Calendar.js says

/**
* Callback fired when a +{count} more is clicked
*
* ```js
* (events: Object, date: Date) => any
* ```
*/
onShowMore: PropTypes.func,

However, something like this does nothing in my project:

import React from 'react'
import Calendar from 'react-big-calendar'

export class MonthCal extends React.Component {
  render() {
    return (
      <Calendar
        popup={false}
        onShowMore={(events, date) => console.log(date)}
        ...
      />
    )
  }
}

[Yadro]

@andrew-pyle You can't modify the default popup. But you can display your own modal on click show-more.

import React from 'react'
import Calendar from 'react-big-calendar'

export class MonthCal extends React.Component {
  render() {
    return (
      <div>
        <Calendar
          popup={false}
          onShowMore={(events, date) => this.setState({ showModal: true, events })}
          ...
        />
        {this.state.showModal && <Modal events={this.state.events}/>}
      </div>
    )
  }
}

[andrew-pyle]

I see the direction now.

It would be great to see a more full explanation of the onShowMore API in the docs. As a newcomer, I would have never guessed this pattern.

[laughing-pic-zhu]

<BigCalendar
            {...props}
            popup
            messages={{
              showMore: total => (
                <div
                  style={{ cursor: 'pointer' }}
                  onMouseOver={e => {
                    e.stopPropagation();
                    e.preventDefault();
                  }}
                >{`+${total} more`}
                </div>
              ),
            }}
  />

i do like this,and solve this problem