Angular full calendar ver 5- hide past dates or disable click on past dates

I am developing a meal planner that allows users to choose the plan date. I do not need to schedule events, I just need the date clicked (I need only dayClick).

Version:

"@fullcalendar/angular": "^5.5.0",>     
"@fullcalendar/daygrid": "^5.5.0",>     
"@fullcalendar/interaction": "^5.5.0",

The code:

export class DateSelector {

    currentDate : Date = new Date();
    
    calendarOptions: CalendarOptions = {
      initialView: 'dayGridMonth',
      dateClick: this.handleDateClick.bind(this),
      validRange : {
        start : this.currentDate, //start is today
        end : getEndDate() //end is 6 months from today
      }
    };
  
    handleDateClick(arg) {
      console.log('date click! ' + arg.date); //Logs date correctly
    }
    
    getEndDate() : Date {
        this.currentDate.setMonth(this.currentDate.getMonth() + 6);
        return this.currentDate;
    }
}

<div class="row text-center">
  <full-calendar
  [options]="calendarOptions"></full-calendar>
</div>

What I currently see: The calendar correctly greys out/disables the past dates with no numbers displayed. The trouble is if say start is the 24th, the calendar looks ugly.

I want a way where either (1) The calendar starts today i.e. past days are hidden. (2) The disabled past dates look better - the nos are displayed and greyed out, but they are not clickable.

So I'm not certain I'll be of much help to the second half of your question regarding greying out past dates as a part of the same cycle, but I do have some code that works with the 'Locales.html' example to create a variable with today's date. It's also worth mentioning I'm not using the angular file set (I think I have the react files). You could effectively plug this in

var theDate = new Date();
var dd = String(theDate.getDate()).padStart(2, '0');
var mm = String(theDate.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = theDate.getFullYear();

theDate = yyyy + '-' + mm + '-' + dd;

Just pass your variable name in this document.addEventListener('DOMContentLoaded', function() as the initialDate parameter.

As far as greying out the numbers, you could use the date variable created above, dd, as a check within a for loop. Something like

function myFunction() {
for (i=0; i<dd; i++) {
document.getElementsByClassName("fc-daygrid-day-number").style.color = "#aaa"; }
}

I'm not very good with javascript yet, but that should, in theory, change the color of all dates of the month prior to today to grey. You'll likely have to look for some way to prevent from greying out these days for the following months, but I hope this is a starting point!