title: How to modify the primeng p-calendar style?
body: <p>I am trying to modify the primeng p-calendar, but it is not working properly.</p>
  <p>For example:</p>
  <p>I want it to be like this:<a href="https://i.stack.imgur.com/QBXoh.png" rel="nofollow noreferrer">required changes</a></p>
  <p>But original it looks like this:<a href="https://i.stack.imgur.com/hVzvn.png" rel="nofollow noreferrer">original image</a></p>
  <p>What i have tried so far:</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div class=&quot;nxui-form-group&quot;&gt;
      &lt;label for=&quot;planEndDate&quot;&gt;
        &lt;img src=&quot;assets/images/calendar.svg&quot; class=&quot;nxui-icon-small nxui-icon-align-bottom&quot;&gt;
        {{ 'i18n.all-damage-reports.label.plan-end-date' | translate }}
      &lt;/label&gt;
  
      &lt;p-calendar formControlName=&quot;planEndDate&quot;
                  class=&quot;calendar-control&quot;
                  id= &quot;planEndDate&quot;
                  [title]=&quot;'i18n.all-damage-reports.label.plan-end-date' | translate&quot;
                  [dateFormat]=&quot;'i18n.common.dateformat.shortdate-p-calendar' | translate&quot;
                  [locale]=&quot;'i18n.common.dateformat.calendar' | translate&quot;
      &gt;&lt;/p-calendar&gt;
    &lt;/div&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>p-calendar.calendar-control  {
    opacity: 1;
    color: black;
    background: #eeeeee;
  }
  </code></pre>
  <p>looking forward to inputs.</p>
  <p>Thanks</p>