diff --git a/README.md b/README.md
index 2308679..99ca79f 100644
--- a/README.md
+++ b/README.md
@@ -76,7 +76,7 @@ Following `settings` object properties can be used to configure the component.
 |defaultOpen|Boolean|false|To open the datepicker popover on load. Default is set to false.|
 |timePicker|Boolean|false|Enable time picker feature.|
 |closeOnSelect|Boolean|true|to close the popover on date select or on click of done button.|
-
+|className|String||Adds a custom class name to the parent element.|
 
 ## Callback Methods
 
diff --git a/src/app/angular2-datetimepicker/datepicker.component.html b/src/app/angular2-datetimepicker/datepicker.component.html
index 1fd2554..ab2d5d9 100644
--- a/src/app/angular2-datetimepicker/datepicker.component.html
+++ b/src/app/angular2-datetimepicker/datepicker.component.html
@@ -1,4 +1,4 @@
-<div class="winkel-calendar" (clickOutside)="closepopover()">
+<div [attr.class]="settings.className ? 'winkel-calendar ' + settings.className : 'winkel-calendar'" (clickOutside)="closepopover()">
     <span *ngIf="!settings.rangepicker">
     <input type="hidden" class="wc-input" value="{{date}}">
     <div class="wc-date-container" (click)="popover = !popover">
diff --git a/src/app/angular2-datetimepicker/interface.ts b/src/app/angular2-datetimepicker/interface.ts
index f8d08e6..9241e10 100644
--- a/src/app/angular2-datetimepicker/interface.ts
+++ b/src/app/angular2-datetimepicker/interface.ts
@@ -9,4 +9,5 @@ export interface Settings{
     cal_months_labels_short: Array<string>;
     closeOnSelect?: boolean;
     rangepicker?: boolean;
+    className?: string;
 }
\ No newline at end of file