DatePicker doesn't show background when is displayed

[EderV]

Im using version 16.0.2

When I click on the calendar icon to show the calendar and time picker, the background is not set and I se a transparent background.

  <mat-label>{{type}}</mat-label>
  <mtx-datetimepicker #datetimePicker
                      [type]="type"
                      [mode]="mode"
                      [multiYearSelector]="multiYearSelector"
                      [startView]="startView"
                      [twelvehour]="twelvehour"
                      [timeInterval]="timeInterval"
                      [touchUi]="touchUi"
                      [timeInput]="timeInput"></mtx-datetimepicker>
  <input [mtxDatetimepicker]="datetimePicker" [formControl]="datetime" matInput required>
  <mtx-datetimepicker-toggle [for]="datetimePicker" matSuffix></mtx-datetimepicker-toggle>

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, UntypedFormControl} from "@angular/forms";
import {MtxCalendarView, MtxDatetimepickerMode, MtxDatetimepickerType} from "@ng-matero/extensions/datetimepicker";

@Component({
  selector: 'app-add-event',
  templateUrl: './add-event.component.html',
  styleUrls: ['./add-event.component.scss']
})
export class AddEventComponent implements OnInit {

  eventForm!: FormGroup;

  type: MtxDatetimepickerType = 'datetime';
  mode: MtxDatetimepickerMode = 'portrait';
  startView: MtxCalendarView = 'month';
  multiYearSelector = false;
  touchUi = false;
  twelvehour = false;
  timeInterval = 1;
  timeInput = true;

  datetime = new UntypedFormControl();

}

Here is the result

[nzbin]

Maybe you should add the styles.

@use '@ng-matero/extensions' as mtx;

@include mtx.all-component-themes($theme);

[EderV]

@nzbin I can't compile doing what you said. (I'm a bit noot in angular)

  @use '@ng-matero/extensions' as mtx;

  $theme: (
    primary: 'blue',
    accent: 'green'
  );

  @include mtx.all-component-themes($theme);

[vmuresanu]

@EderV in theme.scss add the lines that @nzbin provided. Also make sure theme.scss is imported in angular.json, under architect -> build -> options -> styles.

[EderV]

@vmuresanu I did it but is not working.

Here is my theme.scss:

@use '@ng-matero/extensions' as mtx;
@use '@angular/material' as mat;

@include mtx.all-component-themes(mat.$indigo-palette);

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

Here angular.json

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/web-calendar-front",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": []

I'm using Angular material and I set the default theme "indigo-pink" Is there a way to take the theme that Angular Material is using and assing it to ng matero extensions?

Thanks!

[EderV]

I fixed it. @vmuresanu @nzbin

@use '@ng-matero/extensions' as mtx;
@use '@angular/material' as mat;

$theme: mat.define-light-theme((
  color: (
    primary: mat.define-palette(mat.$indigo-palette),
    accent: mat.define-palette(mat.$pink-palette),
    warn: mat.define-palette(mat.$red-palette)
  ),
  typography: mat.define-typography-config(),
  density: 0,
));

@include mat.all-component-themes($theme);
@include mtx.all-component-themes($theme);

Thanks for your help!!

[nzbin]

@vmuresanu I did it but is not working.

Here is my theme.scss:

@use '@ng-matero/extensions' as mtx;
@use '@angular/material' as mat;

@include mtx.all-component-themes(mat.$indigo-palette);

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

Here angular.json

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/web-calendar-front",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": []

I'm using Angular material and I set the default theme "indigo-pink" Is there a way to take the theme that Angular Material is using and assing it to ng matero extensions?

Thanks!

You can also use the pre-built themes as Angular Material does.

@ng-matero/extensions/prebuilt-themes/indigo-pink.css

[vmuresanu]

@EderV Glad it worked, but in angular.json, you have to also add theme.scss to the styles array If you want your custom theme to be applied. Or add @ng-matero/extensions/prebuilt-themes/indigo-pink.css below "@angular/material/prebuilt-themes/indigo-pink.css".