diff --git a/components/lib/calendar/style/CalendarStyle.js b/components/lib/calendar/style/CalendarStyle.js
index d05754783..e36fbee80 100644
--- a/components/lib/calendar/style/CalendarStyle.js
+++ b/components/lib/calendar/style/CalendarStyle.js
@@ -29,14 +29,12 @@ const classes = {
     group: 'p-datepicker-calendar-container',
     calendar: 'p-datepicker-calendar',
     header: 'p-datepicker-header',
-    previousButton: 'p-datepicker-navigator p-datepicker-prev p-link',
-    previousIcon: 'p-datepicker-prev-icon',
+    previousButton: 'p-datepicker-navigator p-datepicker-prev',
     title: 'p-datepicker-title',
     monthTitle: 'p-datepicker-view-month p-link',
     yearTitle: 'p-datepicker-view-year p-link',
     decadeTitle: 'p-datepicker-decade',
-    nextButton: 'p-datepicker-navigator p-datepicker-next p-link',
-    nextIcon: 'p-datepicker-next-icon',
+    nextButton: 'p-datepicker-navigator p-datepicker-next',
     grid: 'p-datepicker-day-view',
     weekHeader: 'p-datepicker-weekheader p-disabled',
     weekNumber: 'p-datepicker-weeknumber',
@@ -49,17 +47,17 @@ const classes = {
     month: ({ instance, props, month, index }) => ['p-datepicker-month', { 'p-datepicker-month-selected': instance.isMonthSelected(index), 'p-disabled': props.disabled || !month.selectable }],
     yearPicker: 'p-datepicker-year-view',
     year: ({ instance, props, year }) => ['p-datepicker-year', { 'p-datepicker-year-selected': instance.isYearSelected(year.value), 'p-disabled': props.disabled || !year.selectable }],
-    timePicker: 'p-timepicker',
-    hourPicker: 'p-hour-picker',
-    incrementButton: 'p-link',
-    decrementButton: 'p-link',
-    separatorContainer: 'p-separator',
+    timePicker: 'p-datepicker-time-picker',
+    hourPicker: 'p-datepicker-hour-picker',
+    incrementButton: 'p-datepicker-increment-button',
+    decrementButton: 'p-datepicker-decrement-button',
+    separatorContainer: 'p-datepicker-separator',
     minutePicker: 'p-minute-picker',
     secondPicker: 'p-second-picker',
     ampmPicker: 'p-ampm-picker',
     buttonbar: 'p-datepicker-buttonbar',
-    todayButton: 'p-buttonbar-button',
-    clearButton: 'p-buttonbar-button'
+    todayButton: 'p-datepicker-today-button',
+    clearButton: 'p-datepicker-clear-button'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/themes/primeone/base/calendar/index.js b/components/lib/themes/primeone/base/calendar/index.js
index accb29b96..fe86a00b4 100644
--- a/components/lib/themes/primeone/base/calendar/index.js
+++ b/components/lib/themes/primeone/base/calendar/index.js
@@ -302,7 +302,7 @@ export default {
     width: auto;
 }
 
-.p-timepicker {
+.p-datepicker-time-picker {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -315,22 +315,22 @@ export default {
     padding-top: 0.5rem;
 }
 
-.p-timepicker > div {
+.p-datepicker-time-picker > div {
     display: flex;
     align-items: center;
     flex-direction: column;
     padding: 0 0.5rem;
 }
 
-.p-timepicker button:last-child {
+.p-datepicker-time-picker button:last-child {
     margin-top: 0.2em;
 }
 
-.p-timepicker span {
+.p-datepicker-time-picker span {
     font-size: 1rem;
 }
 
-.p-datepicker-timeonly .p-timepicker {
+.p-datepicker-timeonly .p-datepicker-time-picker {
     border-top: 0 none;
 }
 `