Angular-calendar: CSS doesn't seem to be loaded

[sarbogast]

I am trying to integrate this library in my Angular 2.0.0 project and I got everything to compile but I have a styling problem. It seems like the CSS is not loaded correctly, even though I have no error in the console or anywhere. Here is what the calendar looks like:

[mattlewis92]

It looks like you're missing the CSS import

node_modules/angular2-calendar/dist/css/angular2-calendar.css

I've added a note to the getting started guide which should hopefully make this a bit clearer for folks in the future :)

[sarbogast]

I copy/pasted the content of this file to my component CSS but it doesn't seem to work. Also, isn't there a way to package this CSS with the component so that we don't have to do that?

[mattlewis92]

If it's in your component CSS then it'll be scoped to just that component, you'll need to use ViewEncapsulation.None to get the styles to apply globally. I'd highly recommend not copy pasting the CSS though as you'd have to update it every time the library was updated to reflect and new changes.

Not including the CSS into the component was purposeful, this was so people would be able to easily override styling of the library without having to use !important on every rule, I think it's a reasonable tradeoff for having to add one extra CSS file. This is also how material does it: https://github.com/angular/material2/blob/master/docs/theming.md

[sarbogast]

Bingo. It worked by adding the following line to src/styles.css:

@import '~angular2-calendar/dist/css/angular2-calendar.css';

[mattlewis92]

Glad you got it resolved 😄

[sarbogast]

I think you should also mention that font-awesome should be imported somehow otherwise the event action buttons from the demo code simply cannot be displayed.

[mattlewis92]

Font awesome isn't a dependency though, I wouldn't want to confuse people by thinking they had to include it. That is simply a demo, you can use whatever icon set you like (if any)

[dfhincapiem]

Thank you man, I spend hours trying to fix the problem

[zaminx]

Added this @import '~angular-calendar/css/angular-calendar.css'; but not working

[ahuetWL]

Hi everyone :)
I actually have the opposite css issue : the month view displays properly but not the navigating buttons.

I imported the css file as mentioned in the tutorial. I also created a "navigating buttons" component because I did not understand how to import a header similar to the one from the "navigating between views" demo. Here is the code :

`import { Component, Input, Output, EventEmitter } from '@angular/core';
import { subDays, addDays } from 'date-fns';

@Component({
selector: 'utils-calendar-navbtn',
template: <div class="row text-center"> <div class="col-md-4"> <div class="btn-group"> <div class="btn btn-primary" mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate" (viewDateChange)="skipWeekends('back')"> Previous </div> <div class="btn btn-outline-secondary" mwlCalendarToday [(viewDate)]="viewDate" (viewDateChange)="viewDateChange.next(viewDate)"> Today </div> <div class="btn btn-primary" mwlCalendarNextView [view]="view" [(viewDate)]="viewDate" (viewDateChange)="skipWeekends('forward')"> Next </div> </div> </div> <div class="col-md-4"> <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):locale }}</h3> </div> <div class="col-md-4"> <div class="btn-group"> <div class="btn btn-primary" (click)="viewChange.emit('month')" [class.active]="view === 'month'"> Month </div> <div class="btn btn-primary" (click)="viewChange.emit('week')" [class.active]="view === 'week'"> Week </div> <div class="btn btn-primary" (click)="viewChange.emit('day')" [class.active]="view === 'day'"> Day </div> </div> </div> </div> <br>
})
export class CalendarNavBtnComponent {
@Input() view: string;

@Input() viewDate: Date;

@Input() locale: string = 'en';

@Output() viewChange: EventEmitter = new EventEmitter();

@Output() viewDateChange: EventEmitter = new EventEmitter();

// exclude weekends

excludeDays: number[] = [0, 6];

skipWeekends(direction: 'back' | 'forward'): void {

if (this.view === 'day') {
  if (direction === 'back') {
    while (this.excludeDays.indexOf(this.viewDate.getDay()) > -1) {
      this.viewDate = subDays(this.viewDate, 1);
    }
  } else if (direction === 'forward') {
    while (this.excludeDays.indexOf(this.viewDate.getDay()) > -1) {
      this.viewDate = addDays(this.viewDate, 1);
    }
  }
}
this.viewDateChange.next(this.viewDate)

}

}
`

I then call that component from my html file like the views :

<!-- Displays the navigating buttons to navigate between views --> <utils-calendar-navbtn [(view)]="view" [(viewDate)]="viewDate"> </utils-calendar-navbtn> <!-- End of the navigating buttons -->

I am aware that this component missing css features is due to the fact that I created it, but I can't find where they are defined in the src nor demo files.

And thanks a lot Matt for being that reactive to people's questions for more than two years, I've spent quite some time reading issues and improvements of this super cool library ;)

[ahuetWL]

It seems that I had a problem with Bootstrap. I fixed it by importing Bootstrap stylesheet in my calendar.html :

<!-- To use Bootstrap (header and event table styles)-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

Now I have beautiful header and events table

[Frank14b]

i use
@import '~angular-calendar/css/angular-calendar.css';
in src/styles.css to solved it

[RakeshKB]

@mattlewis92 could you please guide how can we use custom icons and styling them as well please.
I wan't to use custom icons for the actions. eg: delete and edit.
Any help would be mush appreciated :)