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

[paulhuisman]

Even if i include onShowMore and set popup to false, the show more link still redirects to the day view..

Anybody know how to fix that?

[lalizita]

onShowMore is not working for me, some one is having the same problem?

[Yasith91]

Even if i include onShowMore and set popup to false, the show more link still redirects to the day view..

Anybody know how to fix that?

@paulhuisman Hey, Did you find a solution ?
I'm also having this.

[Yasith91]

Even if i include onShowMore and set popup to false, the show more link still redirects to the day view..
Anybody know how to fix that?

@paulhuisman Hey, Did you find a solution ?
I'm also having this.

found the solution,

onClick={(e) => {
                    e.stopPropagation();
                    console.log(e);
                  }}

[Yasith91]

@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>
    )
  }
}

@Yadro I tried this one and It'll redirect to day view. can you tell me how to fix that ?

https://codesandbox.io/s/react-big-calendar-example-lrwm4?file=/index.js

[guptaji048]

Can we change the max limit of events in a day from '5' to '3'??

[github-actions]

🎉 This issue has been resolved in version 0.33.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[lomber1]

@paulhuisman @Yasith91
I know this issue is closed, but I wanted to help you get around this.

// Prevents view change when clicking on "show more events"
const getDrilldownView = (_,  currentView) => (currentView === 'month' ? 'month' : null);

const CalendarWrapper = () => {
  return (
    <Calendar
      getDrilldownView={getDrilldownView}
    />
  );
}

[lomber1]

@paulhuisman @Yasith91 I know this issue is closed, but I wanted to help you get around this.

// Prevents view change when clicking on "show more events"
const getDrilldownView = (_,  currentView) => (currentView === 'month' ? 'month' : null);

const CalendarWrapper = () => {
  return (
    <Calendar
      getDrilldownView={getDrilldownView}
    />
  );
}

Ok, this solution is wrong, as it removes the drilldown when date number is clicked.
I found this and it is much better:

<Calendar doShowMoreDrillDown={false} />

[Mmaheshbabu123]

Thanks @lomber1 its working like a charm

[deizepi]

My workaround was to duplicate the file Month.js and replace the call to the PopOverlay component (adding its functionalities to the new MonthView.js) with the call to my custom component PopupView (based on both PopOverlay and Popup from react-big-calendar).

You can find both custom files in the attached zip file.

RBC-popup.zip