Question: I'm working on an app with Ionic 5.0.0, Angular 8 and using the [ionic2-calendar](https://github.com/twinssbc/Ionic2-Calendar) plugin. Although the plugin demo works fine, I can't seem to modify the styling of the calendar. 

The documentation lists a couple of classes that seem to be used for each element, but adding them to my own scss file and adding !important (or not) doesn't really work. I tried adding them to the global scss, as well as to the main app one. 

Aside from that, I've tried using the browser inspector to check which css selector is actually styling the elements in question, but the attribute selector seems to be random somehow. Current day for example is:

```
.monthview-current[_ngcontent-ljn-c3]

```

And after reloading, it is

```
.monthview-current[_ngcontent-igq-c4]

```

So clearly that method won't work either... I've also tried adding td.monthview-current, which also didn't work... Those were the suggestions and sample codes I've found from looking up this plugin online and looking around the plugin files. If anyone has any ideas whatsoever I'd be super thankful.

**EDIT:** I've found a way to change it, but ONLY through the source files for the plugin, which I have to assume is not the right way to do it... There's JSON files, JS files, and I have to manually change all of them.

Answer: 
If the styles are present inside the angular component's file it will not be applied due to view encapsulation. You need to specify the styles in the global stylesheet, and also in most you need to add `important` to the styles.

To elaborate further,

```
-src
  -assets
    -calendar.css (add styles here)
  -app
    -my-calendar
      -my-calendar.page.html
      -my-calendar.page.ts
      -my-calendar.page.css (and not here)

```

**Some commonly needed customizations:** (assets/calendar.css)

Apply styles to the selected date:

```
.monthview-selected{
    font-weight: bold;
    background-color: #F1F1F1 !important;
    color: #333 !important;
}

```

Apply styles to the date that has an event:

```
.monthview-primary-with-event, .calendar-event-inner{
    background-color: #1a92d0!important;
}

```

Disable all the borders in the calendar:

```
td, th {
    border: 0 !important;
  }

```

**Final calendar after applying the styles:**

[![Final calendar after applying the styles](https://i.stack.imgur.com/pjvxe.png)](https://i.stack.imgur.com/pjvxe.png)

**HTML**

```
<calendar [eventSource]="eventSource" [calendarMode]="calendar.mode" [currentDate]="calendar.currentDate"
    (onCurrentDateChanged)="onCurrentDateChanged($event)" (onRangeChanged)="reloadSource(startTime, endTime)"
    (onEventSelected)="onEventSelected($event)" (onTitleChanged)="onViewTitleChanged($event)"
    (onTimeSelected)="onTimeSelected($event)" step="30" (showEventDetail)="true" formatDayHeader="EEEEE"
    allDayLabel="All Day" startHour="9" endHour="20">
  </calendar>

```
*With depp*

```
::ng-deep {
.monthview-selected {
    background-color: blue !important;
    color: white !important;
    border-radius: 50%;
}

```

}