CODEWITHSUNDEEP
javascriptangularcalendar
franchyze923
franchyze923

Reputation: 1200

Implementing angular-calendar in Angular 4 CLI project

New to Angular - Having trouble getting this angular-calendar component found here https://github.com/mattlewis92/angular-calendar implemented into my project.

I'm setting up a basic project using the Angular CLI. Following the Getting Started guide, I don't know how or where to include the .css file. I've tried a few spots.

After I couldn't figure that out, I went to the build-tools/angular-CLI page of the repo and cloned it. I'm assuming this is a basic project created using the Angular CLI?

When I ng serve -o this project, it's just a calendar. Missing a lot of the features that I want, found here -

https://mattlewis92.github.io/angular-calendar/#/kitchen-sink

It looks like this enter image description here

Can someone help me implement a calendar into a project that was just created using the Angular CLI? Very similar to how it looks here -

https://mattlewis92.github.io/angular-calendar/#/kitchen-sink

Thanks

Upvotes: 0

Views: 2573

Answers (1)

komron
komron

Reputation: 2277

This is an npm package, so first you should create angular project, you can do it easily via Angular CLI ng new. Then you should open terminal/bash in project directory and do npm i, then npm i --save angular-calendar.

Go to AppModule.ts and add calendar module, your code in appModule should be sth like this:

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-
browser/animations';
import { CalendarModule } from 'angular-calendar';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    CalendarModule.forRoot()
  ]
})
export class MyModule {}

Then go to file .angular-cli.json it is in your project root. Find section styles and add node_modules/angular-calendar/dist/css/angular-calendar.css there.

it should be sth like this:

"styles": [
        "../node_modules/font-awesome/css/font-awesome.css",
        "../node_modules/simple-line-icons/css/simple-line-icons.css",
        "../node_modules/angular-calendar/dist/css/angular-calendar.css",
        "scss/style.scss"
      ],

Then go back to project root and for example generate a component ng g component calendComp and use the calendar over there as it's described in it's documentation.

Upvotes: 2

Related Questions