<h3>Demo with 2 selectable months in different colors</h3>
<vcl-month-picker id="myStyledMonthPicker" #myStyledMonthPicker
  [locales]="locales"
  [dateOptions]="dateOptions"
  [prevYearAvailable]="true"
  [nextYearAvailable]="true"
  [colors]="['#50E3C2', '#FF3CE6']">
</vcl-month-picker>
<br><br>

<h3>Demo with a button which creates a popover with a month picker</h3>
<button vcl-button
  #target
  label="Expand"
  (click)="expandMonthPicker()">
</button>

<vcl-popover #mp [target]="target" targetAttachment='bottom right' attachment='top right' [visible]="expanded">
  <vcl-month-picker
    [expandable]="true"
    [(expanded)]="expanded"
    [(currentYear)]="currentYear"
    [monthsPerRow]="4"
    (select)="onSelect($event)"
    (prevYearBtnTap)="onPreviousYearTap()"
    [prevYearAvailable]="prevYearAvailable"
    (nextYearBtnTap)="onNextYearTap()"
    [nextYearAvailable]="nextYearAvailable">
  </vcl-month-picker>
</vcl-popover>

<h3>Demo with 2 selectable months in different colors</h3>
<vcl-month-picker id="myStyledMonthPicker" #myStyledMonthPicker
  [locales]="locales"
  [dateOptions]="dateOptions"
  [prevYearAvailable]="true"
  [nextYearAvailable]="true"
  [colors]="['#50E3C2', '#FF3CE6']">
</vcl-month-picker>
<br><br>

<h3>Demo with a button which creates a popover with a month picker</h3>
<button vcl-button
  #target
  label="Expand"
  (click)="expandMonthPicker()">
</button>

<vcl-popover #mp [target]="target" targetAttachment='bottom right' attachment='top right' [visible]="expanded" class="vclNoPadding">
  <vcl-month-picker
    [expandable]="true"
    [(expanded)]="expanded"
    [(currentYear)]="currentYear"
    [monthsPerRow]="4"
    (select)="onSelect($event)"
    (prevYearBtnTap)="onPreviousYearTap()"
    [prevYearAvailable]="prevYearAvailable"
    (nextYearBtnTap)="onNextYearTap()"
    [nextYearAvailable]="nextYearAvailable">
  </vcl-month-picker>
</vcl-popover>

Remove padding from month picker popover
Remove padding from month picker popover
