How to hide Outside month Date ? about react-big-calendar HOT 9 CLOSED

made some progress on this

.rbc-off-range { background: white; border-left: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; position: absolute; width: 100%; height: 100%; opacity: 1; color: white; z-index: 10000; }

Please check..

from react-big-calendar.

.rbc-off-range {
      background: #fff;
      opacity: 1;
      color: white;
      z-index: 10000;
      button {
        display: none;
      }
}

This seems to work for me.

from react-big-calendar.

You can visually hide the months buy adjusting the styling of the rbc-off-range class, but there is no option to not have events visible on those dates if they extend to them.

from react-big-calendar.

Please do not close the issue.
I can hide dates using overwriting rbc-off-range . My real question is, How to hide event.
Please mark as bug or improvement as this is needed.
May be if you can provide me some pointers, I can make pull request.

from react-big-calendar.

Hi there, sorry if I closed this a bit soon. I'm not sure what you are looking for in this case...You want to hide any events that extend into the previous month? I appreciate your suggestion, but I don't think we will ever make such an enhancement as it has (I think) UX problems, and breaks expectations. Moreso tho, supporting that behavior would dramatically complicate the code base for not a ton of gain.

If you want to have such a behavior in your app then I suggest you sort and filter/map your events to only contain events (or parts of events) that are fully contained in the given month, and then pass that to the calendar. You can use the onNavigate and onView events to know when and what date range you are looking at. And use the eventPropGetter to style edge events. Alternatively, remember that startAccessor and endAccessor can be functions so you can return any date you want from them, such as the 1st or last of the month for events that overlap.

overall I think what you want to do can be accomplished already using the existing API, without too much complexity.

from react-big-calendar.

I am able to hide only the first date. I think you can modify it to make it a proper solution !!

from react-big-calendar.

from react-big-calendar.

from react-big-calendar.

Hi I made a quick hack to do this

hideAllUnwanted(){
    try{
      var old = ReactDOM.findDOMNode(this).querySelectorAll(".fix-calendar-offset");
      [...old].forEach(function( node ) {
        node.parentNode.removeChild( node );
      });

      var elements = ReactDOM.findDOMNode(this).querySelectorAll(".rbc-off-range");
      [...elements].forEach((el) => {
        var elData = el.getBoundingClientRect();
        var width = parseInt(elData.width);
        var node = document.createElement("DIV");
        node.style.width = (width + 1) + "px";
        node.setAttribute('class', 'fix-calendar-offset');
        el.appendChild(node);
      });
    }catch(ex){


    }
  }
  componentDidUpdate(){
    this.hideAllUnwanted();
  }
  componentDidMount() {
    this.hideAllUnwanted();
  }

.fix-calendar-offset {
    /*width: 52px;*/
    height: 300px;
    position: absolute;
    background: #FFFFFF;
    margin-left: 1px;
    border-right: 1px solid #E4E4E4;
}```

from react-big-calendar.