1

I'm working on an app with Ionic 5.0.0, Angular 8 and using the 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.

Improve this question

5 Answers 5

Reset to default
1

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

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

I had the same issue and a solution is related to encapsulation as stated in other answer.

Styling not applying to child component

try update your component:

@Component({ ... encapsulation: ViewEncapsulation.None // <------ }) export class xxComponent{

You can then apply the style based on the child class, eg.

.scss:

.monthview-container { ...; }
Improve this answer

Comments

0

The best way is to use Template Customization given in the plugin. https://github.com/twinssbc/Ionic2-Calendar/blob/v6/README.md#Template Customization

If that is diffcult in your case. Then add a class to calender tag in html. And get all the child elements in css using Child or descendent combinator. Css Combinator

Improve this answer

1 Comment

I don't need to modify the structure of the calendar, just the colors. Also, adding a class to calendar element does not affect the plugin elements due to hierarchy of selectors...
0

Although I'm not sure about the reason for this, the solution in my case seems to be using the global stylesheet (without any attribute selector in brackets) instead of the module specific one. It's not ideal, but it works I guess!

Improve this answer

Comments

0

With depp

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

}

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.