diff --git a/angular.json b/angular.json
index da044bbc7..6df205896 100644
--- a/angular.json
+++ b/angular.json
@@ -246,7 +246,7 @@
               "project": "packages/calendar/ng-package.prod.json"
             },
             "examples": {
-              "project": "packages/avatar/ng-package.examples.json"
+              "project": "packages/calendar/ng-package.examples.json"
             }
           }
         },
diff --git a/packages/calendar/examples/calendar/calendar.module.ts b/packages/calendar/examples/calendar/calendar.module.ts
new file mode 100644
index 000000000..9a879dd25
--- /dev/null
+++ b/packages/calendar/examples/calendar/calendar.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CalendarModule } from '@acpaas-ui/ngx-components/calendar';
+import { CodeSnippetModule } from '@acpaas-ui/ngx-components/code-snippet';
+
+import { Pages } from './pages/index';
+
+@NgModule({
+	imports: [
+		CommonModule,
+		CalendarModule,
+		CodeSnippetModule,
+	],
+	declarations: [
+		Pages,
+	],
+})
+export class CalendarExamplesModule {}
diff --git a/packages/calendar/examples/calendar/calendar.routes.ts b/packages/calendar/examples/calendar/calendar.routes.ts
new file mode 100644
index 000000000..899fe5359
--- /dev/null
+++ b/packages/calendar/examples/calendar/calendar.routes.ts
@@ -0,0 +1,11 @@
+import { Routes } from '@angular/router';
+
+import { DemoPageComponent } from './pages/demo/demo.page';
+
+export const CALENDAR_EXAMPLES_ROUTES: Routes = [
+	{
+		path: '',
+		component: DemoPageComponent,
+		pathMatch: 'full',
+	},
+];
diff --git a/packages/calendar/examples/calendar/index.ts b/packages/calendar/examples/calendar/index.ts
new file mode 100644
index 000000000..2c704dcba
--- /dev/null
+++ b/packages/calendar/examples/calendar/index.ts
@@ -0,0 +1,3 @@
+export { DemoPageComponent } from './pages/demo/demo.page';
+export { CalendarExamplesModule } from './calendar.module';
+export { CALENDAR_EXAMPLES_ROUTES } from './calendar.routes';
diff --git a/packages/calendar/examples/calendar/pages/demo/demo.page.html b/packages/calendar/examples/calendar/pages/demo/demo.page.html
new file mode 100644
index 000000000..a094452e3
--- /dev/null
+++ b/packages/calendar/examples/calendar/pages/demo/demo.page.html
@@ -0,0 +1,5 @@
+<h3 class="u-margin-bottom">Calendar demo</h3>
+
+<aui-calendar
+	(selectDate)="selectDate($event)"
+></aui-calendar>
diff --git a/packages/calendar/examples/calendar/pages/demo/demo.page.ts b/packages/calendar/examples/calendar/pages/demo/demo.page.ts
new file mode 100644
index 000000000..c9f31acce
--- /dev/null
+++ b/packages/calendar/examples/calendar/pages/demo/demo.page.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+	templateUrl: './demo.page.html',
+})
+export class DemoPageComponent {
+	public selectDate(event) {
+		console.log(event);
+	}
+}
diff --git a/packages/calendar/examples/calendar/pages/index.ts b/packages/calendar/examples/calendar/pages/index.ts
new file mode 100644
index 000000000..e8f78952e
--- /dev/null
+++ b/packages/calendar/examples/calendar/pages/index.ts
@@ -0,0 +1,5 @@
+import { DemoPageComponent } from './demo/demo.page';
+
+export const Pages = [
+	DemoPageComponent,
+];
diff --git a/packages/calendar/examples/index.ts b/packages/calendar/examples/index.ts
new file mode 100644
index 000000000..8664e8002
--- /dev/null
+++ b/packages/calendar/examples/index.ts
@@ -0,0 +1 @@
+export * from './calendar/index';
diff --git a/packages/calendar/ng-package.examples.json b/packages/calendar/ng-package.examples.json
index fa7962812..c21add503 100644
--- a/packages/calendar/ng-package.examples.json
+++ b/packages/calendar/ng-package.examples.json
@@ -1,8 +1,12 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../examples/avatar",
+  "dest": "../../examples/calendar",
   "deleteDestPath": false,
   "lib": {
     "entryFile": "examples/index.ts"
-  }
+  },
+  "whitelistedNonPeerDependencies": [
+    "@acpaas-ui/js-date-utils",
+    "lodash-es"
+  ]
 }
diff --git a/packages/calendar/src/lib/calendar/calendar.module.ts b/packages/calendar/src/lib/calendar/calendar.module.ts
index 9ca21734e..d68c4e7fd 100644
--- a/packages/calendar/src/lib/calendar/calendar.module.ts
+++ b/packages/calendar/src/lib/calendar/calendar.module.ts
@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 
 import { Components } from './components/index';
 import { Services } from './services/index';
-import { Pipes } from './pipes/index';
 
 import {
 	CALENDAR_WEEKDAY_LABELS,
@@ -20,11 +19,9 @@ import { CalendarService } from './services/calendar.service';
 	],
 	declarations: [
 		Components,
-		Pipes,
 	],
 	exports: [
 		Components,
-		Pipes,
 	],
 	providers: [
 		Services,
diff --git a/packages/calendar/src/lib/calendar/components/month/month.component.spec.ts b/packages/calendar/src/lib/calendar/components/month/month.component.spec.ts
index 0c448ba84..f80883e83 100644
--- a/packages/calendar/src/lib/calendar/components/month/month.component.spec.ts
+++ b/packages/calendar/src/lib/calendar/components/month/month.component.spec.ts
@@ -5,7 +5,6 @@ import { Component, DebugElement } from '@angular/core';
 import { CalendarMonthComponent } from './month.component';
 import { CALENDAR_WEEKDAY_LABELS, CALENDAR_DEFAULT_WEEKDAY_LABELS } from '../../calendar.conf';
 import { CalendarService } from '../../services/calendar.service';
-import { TitleCasePipe } from '../../pipes/title-case.pipe';
 
 @Component({
 	selector: 'aui-test',
@@ -67,7 +66,6 @@ describe('The Calendar Month Component', () => {
 			declarations: [
 				TestComponent,
 				CalendarMonthComponent,
-				TitleCasePipe,
 			],
 			providers: [
 				{ provide: CALENDAR_WEEKDAY_LABELS, useValue: CALENDAR_DEFAULT_WEEKDAY_LABELS },
diff --git a/packages/calendar/src/lib/calendar/components/year/year.component.spec.ts b/packages/calendar/src/lib/calendar/components/year/year.component.spec.ts
index bcfe3b678..2d0f35444 100644
--- a/packages/calendar/src/lib/calendar/components/year/year.component.spec.ts
+++ b/packages/calendar/src/lib/calendar/components/year/year.component.spec.ts
@@ -1,11 +1,8 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
 import { Component, DebugElement } from '@angular/core';
 
 import { CalendarYearComponent } from './year.component';
 import { CALENDAR_MONTH_LABELS, CALENDAR_DEFAULT_MONTH_LABELS } from '../../calendar.conf';
-import { CalendarService } from '../../services/calendar.service';
-import { TitleCasePipe } from '../../pipes/title-case.pipe';
 
 @Component({
 	selector: 'aui-test',
@@ -39,7 +36,6 @@ describe('The Calendar Year Component', () => {
 			declarations: [
 				TestComponent,
 				CalendarYearComponent,
-				TitleCasePipe,
 			],
 			providers: [
 				{ provide: CALENDAR_MONTH_LABELS, useValue: CALENDAR_DEFAULT_MONTH_LABELS },
diff --git a/packages/calendar/src/lib/calendar/index.ts b/packages/calendar/src/lib/calendar/index.ts
index ad87125e2..33638bd3b 100644
--- a/packages/calendar/src/lib/calendar/index.ts
+++ b/packages/calendar/src/lib/calendar/index.ts
@@ -21,4 +21,3 @@ export {
 	CALENDAR_WEEKDAY_LABELS
 } from './calendar.conf';
 export { CalendarModule } from './calendar.module';
-export { TitleCasePipe } from './pipes/title-case.pipe';
diff --git a/packages/calendar/src/lib/calendar/pipes/index.ts b/packages/calendar/src/lib/calendar/pipes/index.ts
deleted file mode 100644
index 59c4754ed..000000000
--- a/packages/calendar/src/lib/calendar/pipes/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { TitleCasePipe } from './title-case.pipe';
-
-export const Pipes = [
-	TitleCasePipe,
-];
diff --git a/packages/calendar/src/lib/calendar/pipes/title-case.pipe.ts b/packages/calendar/src/lib/calendar/pipes/title-case.pipe.ts
deleted file mode 100644
index b0b0e0ffd..000000000
--- a/packages/calendar/src/lib/calendar/pipes/title-case.pipe.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// replace with common titlecase pipe in angular 4, mind the regex with special characters (e.g. é)
-
-import { Pipe, PipeTransform } from '@angular/core';
-
-/**
- * Helper method to transform a single word to titlecase.
- *
- * @stable
- */
-function titleCaseWord(word: string) {
-  if (!word) {
-	  return word;
-  }
-
-  return word[0].toUpperCase() + word.substr(1).toLowerCase();
-}
-
-/**
- * Transforms text to titlecase.
- *
- * @stable
- */
-@Pipe({name: 'titlecase'})
-export class TitleCasePipe implements PipeTransform {
-  transform(value: string): string {
-	if (!value || typeof value !== 'string') {
-		return value;
-	}
-
-	return value.split(/\s/g).map(word => titleCaseWord(word)).join(' ');
-  }
-}
diff --git a/styleguide/app/examples.modules.ts b/styleguide/app/examples.modules.ts
index 5ad03ff6d..e5d14bf06 100644
--- a/styleguide/app/examples.modules.ts
+++ b/styleguide/app/examples.modules.ts
@@ -1,7 +1,9 @@
 import { AvatarExamplesModule } from '@acpaas-ui/ngx-examples/avatar';
+import { CalendarExamplesModule } from '@acpaas-ui/ngx-examples/calendar';
 import { LogoExamplesModule } from '@acpaas-ui/ngx-examples/logo';
 
 export const ExamplesModules = [
 	AvatarExamplesModule,
+	CalendarExamplesModule,
 	LogoExamplesModule,
 ];
diff --git a/styleguide/app/examples.routes.ts b/styleguide/app/examples.routes.ts
index fb7209c51..96488477c 100644
--- a/styleguide/app/examples.routes.ts
+++ b/styleguide/app/examples.routes.ts
@@ -1,7 +1,9 @@
 import { AVATAR_EXAMPLES_ROUTES } from '@acpaas-ui/ngx-examples/avatar';
+import { CALENDAR_EXAMPLES_ROUTES } from '@acpaas-ui/ngx-examples/calendar';
 import { LOGO_EXAMPLES_ROUTES } from '@acpaas-ui/ngx-examples/logo';
 
 export const EXAMPLES_ROUTES = [
 	{ path: 'avatar', children: AVATAR_EXAMPLES_ROUTES },
+	{ path: 'calendar', children: CALENDAR_EXAMPLES_ROUTES },
 	{ path: 'logo', children: LOGO_EXAMPLES_ROUTES },
 ];