There is an annoying Event icon on the bottom left of each day on the Angular Calendar that I'm struggling to remove. Unfortunately, it shares a class name with the day blocks, so simply using Pointer-event:none; won't work because then I lose the ability to expand events on the days.
<div class="cal-events ng-star-inserted"><div mwldraggable="" dragactiveclass="cal-drag-active" class="cal-event Marks ng-star-inserted" ng-reflect-drag-active-class="cal-drag-active" ng-reflect-ng-style="[object Object]" ng-reflect-ng-class="Marks" ng-reflect-contents="Test1 Marks" ng-reflect-placement="auto" ng-reflect-event="[object Object]" ng-reflect-append-to-body="true" ng-reflect-drop-data="[object Object]" ng-reflect-drag-axis="[object Object]" ng-reflect-validate-drag="function isWithinThreshold({ x" ng-reflect-touch-start-long-press="[object Object]" aria-hidden="true" style="background-color: rgb(204, 51, 51);"></div><!--container--><!--bindings={
"ng-reflect-ng-for-track-by": "(index, event) => event.id ? e"
}--></div>
The problematic class names are "cal-events ng-start-insterted"
As the elements are dynamically generated in the DOM, I'm unable to provide you with the exact layout. However, the image linked below might help illustrate the issue better: https://i.sstatic.net/cfORJ.png
I understand this question may be confusing, but due to the nature of the generated code, I'm not sure how to demonstrate it accurately. Essentially, the day blocks and the dot share the same classes, but I want the dot to be non-interactive while keeping the blocks interactive.