As in the attached image I need to know if using a slot or another approach it is possible to add the btn with the text ‘Today’ next to the navigation items.

As in the attached image, I need to know if using a slot or another approach it is possible to add the btn with the text ‘Today’ next to the navigation items.

I tried using @ViewChild, and Renderer2 to insert the button

 <div id="calander">
    <ion-datetime ngClass="w-100"  presentation="date"
     [value]="highlightedDates[2].date" [multiple]="true" [highlightedDates]="highlightedDates"></ion-datetime>
  </div>

 @ViewChild('calendar', { read: ElementRef, static: false }) calendar?: ElementRef;

  highlightedDates = [
    {
      date: '2024-04-06',
      textColor: 'var(--ion-color-blue-secondary-contrast)',
      backgroundColor: 'var(--ion-color-blue-secondary)',
    },
    {
      date: '2024-04-09',
      textColor: 'var(--ion-color-blue-secondary-contrast)',
      backgroundColor: 'var(--ion-color-blue-secondary)',
    },
    {
      date: '2024-04-15',
      textColor: 'var(--ion-color-blue-secondary-contrast)',
      backgroundColor: 'var(--ion-color-blue-secondary)',
    }
  ];


  constructor(
    private renderer: Renderer2,
  ) {}

  ngAfterViewInit(): void {
    timer(300).subscribe(() => {
      const shadow: DocumentFragment = this.calendar?.nativeElement.shadowRoot;
      const calendarActionButtons = shadow.querySelector('.calendar-action-buttons');

      // Create new button

      const hojeButton = this.renderer.createElement('ion-button');
      this.renderer.setProperty(hojeButton, 'innerText', 'Hoje');
      this.renderer.setStyle(hojeButton, 'color', 'blue');


    });
  }