You just add (click) = "$event.stopPropagation()"
to the parent element of these calendars. Like below,
<mat-menu class="date-range-menu" #dateTimeMenu="matMenu">
<div fxLayout="row">
<div fxLayout="column" (click)="$event.stopPropagation();">
<b>From</b>
<mat-calendar></mat-calendar>
</div>
<div fxLayout="column" (click)="$event.stopPropagation();">
<b>To</b>
<mat-calendar></mat-calendar>
</div>
</div>
</mat-menu>
Another Solution :-
By giving a return to the previous solution, encapsulating the instruction in a method allows not to close the menu and continue executing instructions
IN HTML:
<mat-menu class="date-range-menu" #dateTimeMenu="matMenu">
<div fxLayout="row">
<div fxLayout="column" (click)="doSomething($event);">
<b>From</b>
<mat-calendar></mat-calendar>
</div>
<div fxLayout="column" (click)="doSomething($event)">
<b>To</b>
<mat-calendar></mat-calendar>
</div>
</div>
</mat-menu>
IN TS:
doSomething($event:any){
$event.stopPropagation();
//Another instructions
}