Make the calendar takes the height available

[ALapaque]

Is your feature request related to a problem? Please describe

Describe the solution you'd like

In my application we can parameter the view and the start hour or end hour of the views, my problem is that if the person sets a tiny shift the shift won't take the full screen available (example below)

I would love to get my agenda like below

I did something with the @HostListener('window:resize') but it's freaking laggy (see below)

and here is the normal behavior without the method on the @HostListener('window:resize')

and here is the content of my method

/**
   * method called when the windows receive an event of resize in order to change the height for responsive design
   */
  @HostListener('window:resize')
  public onResize(): string {
    // responsive view when minimal width set the view to day
    const width: number = window.innerWidth; // contains the innerWidth available
    if (width < 960) return (this.agendaV2Service.view = 'day'); // if small screen then display the day view
    
    // responsive for segment size
    if (!this._agendaContainer) return;

    // transform into moment the start
    const start: Moment = moment().hours(this.agendaV2Service.dayStartHour).minutes(this.agendaV2Service.dayStartMinute);

    // transform into moment the end
    const end: Moment = moment().hours(this.agendaV2Service.dayEndHour).minutes(this.agendaV2Service.dayEndMinute);

    // calculate the amount of complete hours between the start and end
    const diff: number = Math.round(Math.abs(moment.duration(start.diff(end)).asHours()));

    // calculate the amount of segment which will be displayed
    const segments: number = diff * this.agendaV2Service.hourSegments;

    // calculate the available height of the container substracting the header height
    let containerHeight: number = this._agendaContainer._content.getElementRef().nativeElement.offsetHeight - (this.agendaV2Service.view === 'day' ? 32 : 75);

    // get the allDay container size
    const allDayContainer: HTMLElement = document.getElementsByClassName('cal-all-day-events').item(0) as HTMLElement;

    // if there's event marked as allDay substract the height to the container
    if (allDayContainer) {
      containerHeight -= allDayContainer.offsetHeight;
    }

    // calculate the height of a segment (height available divided by the number of segments displayed)
    const segmentHeight: number = containerHeight / segments;

    // set the hourSegmentHeight but if it's below 30 then we set 30 as minimal else we ceil it
    this.agendaV2Service.hourSegmentHeight = segmentHeight < 30 ? 30 : Math.ceil(segmentHeight);

    //  call the view render of the agenda component
    this.agendaV2Service.refresh$.next();
  }

Describe your use case for implementing this feature

I need this cuz we can configure the view settings like segments (10min - 20min - 30 min - ...) and also the start and end of a day

Additional context

Thanks for your good work @mattlewis92 :)

[matts-bot]

Thanks so much for opening an issue! If you'd like me to give priority to answering your issue or would just like to support this project, then please consider sponsoring me