Angular's Calendar
Let's add a calendar view to our dashboard using the existing angular's library.
We'll cover the following...
We'll cover the following...
With our events ready to be displayed and our dashboard tests updated, it’s time to add a calendar to our dashboard to display the events.
Below is the updated code. Use this code to make further changes:
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "lets-get-lunch": { "projectType": "application", "schematics": {}, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/lets-get-lunch", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "aot": true, "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/ng-pick-datetime/assets/style/picker.min.css", "src/styles.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ] }, "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" }, { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "lets-get-lunch:build" }, "configurations": { "production": { "browserTarget": "lets-get-lunch:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "lets-get-lunch:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json" ], "exclude": [ "**/node_modules/**" ] } }, "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "lets-get-lunch:serve" }, "configurations": { "production": { "devServerTarget": "lets-get-lunch:serve:production" } } } } } }, "defaultProject": "lets-get-lunch" }
Updated dashboard tests
Adding angular-calendar
library
We’ll use the angular-calendar
library for the calendar within our dashboard. You can see the documentation for the library on GitHub here.
- Add the CSS for the library to
angular.json
. Within thestyles
property, add the path to the CSS below our previous additions for Bootstrap andng-pick-datetime
.
Press + to interact
// angular.json"styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css","node_modules/ng-pick-datetime/assets/style/picker.min.css","node_modules/angular-calendar/css/angular-calendar.css","styles.css"]
...