diff --git a/projects/lib-workspace/src/app/content/showcase-calendar-panels/showcase-calendar-panels.component.ts b/projects/lib-workspace/src/app/content/showcase-calendar-panels/showcase-calendar-panels.component.ts
index 642fe73..b5a0ae3 100644
--- a/projects/lib-workspace/src/app/content/showcase-calendar-panels/showcase-calendar-panels.component.ts
+++ b/projects/lib-workspace/src/app/content/showcase-calendar-panels/showcase-calendar-panels.component.ts
@@ -1,5 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { CalendarEvent, CalendarPanels } from 'projects/ng-mat-components/src/public-api';
+import { CalendarEvent, CalendarExtendedDay, CalendarPanels, CalendarPanelsConfig } from 'projects/ng-mat-components/src/public-api';
+
+interface CustomTestObj {
+  id: number;
+  name: string;
+}
 
 @Component({
   selector: 'app-showcase-calendar-panels',
@@ -26,47 +31,54 @@ export class ShowcaseCalendarPanelsComponent implements OnInit {
   // monthsBefore = new FormControl(1);
   // monthsAfter = new FormControl(1);
 
-  dataSource: CalendarPanels = {
-    config: {
-      renderMode: 'monthly', // 'annual' | 'monthly'
-      selectMode: 'range', // 'click' | 'range'
-      displayYear: true,
-      firstDayOfWeekMonday: true,
-      calendarWeek: true,
-      switches: true,
-      panelWidth: '300px',
-      bluredDays: false, // default: false
-      markWeekend: true, // default: true
+  calendarConfig: CalendarPanelsConfig = {
+    renderMode: 'monthly', // 'annual' | 'monthly'
+    selectMode: 'range', // 'click' | 'range'
+    displayYear: true,
+    firstDayOfWeekMonday: true,
+    calendarWeek: true,
+    switches: true,
+    panelWidth: '300px',
+    bluredDays: false, // default: false
+    markWeekend: true, // default: true
+  };
+
+  calendarData: CalendarExtendedDay<CustomTestObj>[] = [
+    {
+      date: new Date(this.today.getFullYear(), this.today.getMonth(), 3),
+      colors: {
+        backgroundColor: '#0167c7',
+      },
+      toolTip: 'Test ToolTip First',
     },
-    data: [
-      {
-        date: new Date(this.today.getFullYear(), this.today.getMonth(), 3),
-        colors: {
-          backgroundColor: '#0167c7',
-        },
-        toolTip: 'Test ToolTip First',
+    {
+      date: new Date(this.today.getFullYear(), this.today.getMonth(), 3),
+      colors: {
+        backgroundColor: 'rgb(6, 182, 0)',
       },
-      {
-        date: new Date(this.today.getFullYear(), this.today.getMonth(), 3),
-        colors: {
-          backgroundColor: 'rgb(6, 182, 0)',
-        },
-        toolTip: 'Test ToolTip Second',
+      toolTip: 'Test ToolTip Second',
+    },
+    {
+      date: new Date(this.today.getFullYear(), this.today.getMonth(), 13),
+      colors: {
+        backgroundColor: 'rgb(6, 182, 0)',
       },
-      {
-        date: new Date(this.today.getFullYear(), this.today.getMonth(), 12),
-        colors: {
-          backgroundColor: 'rgb(6, 182, 0)',
-        },
-        toolTip: 'Test ToolTip 2',
+      toolTip: 'Test ToolTip 2',
+      customData: {
+        id: 1,
+        name: 'test',
       },
-      {
-        date: new Date(this.today.getFullYear(), this.today.getMonth(), 25),
-        colors: {
-          backgroundColor: 'lightblue',
-        },
+    },
+    {
+      date: new Date(this.today.getFullYear(), this.today.getMonth(), 25),
+      colors: {
+        backgroundColor: 'lightblue',
       },
-    ],
+    },
+  ];
+  dataSource: CalendarPanels<CustomTestObj> = {
+    config: this.calendarConfig,
+    data: this.calendarData,
   };
 
   constructor() {}
diff --git a/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.ts b/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.ts
index d7f01cb..51db02b 100644
--- a/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.ts
+++ b/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.ts
@@ -12,7 +12,7 @@ import { FsCalendarService } from '../services/fs-calendar.service';
   },
 })
 export class FsCalendarPanelsComponent implements OnInit {
-  private _dataSource: CalendarPanels = {
+  private _dataSource: CalendarPanels<any> = {
     config: {
       renderMode: 'monthly',
       selectMode: 'click',
@@ -34,9 +34,9 @@ export class FsCalendarPanelsComponent implements OnInit {
 
   calendar: CalendarPanelSum | undefined;
   today = new Date();
-  selectedDayStart: Date | undefined;
-  selectedDayBetween: Date[] = [];
-  selectedDayEnd: Date | undefined;
+  selectedDayStart: CalendarExtendedDay<any> | undefined;
+  selectedDayBetween: CalendarExtendedDay<any>[] = [];
+  selectedDayEnd: CalendarExtendedDay<any> | undefined;
   markWeekend = this._dataSource.config.markWeekend;
   bluredDays = this._dataSource.config.bluredDays;
   isLoading = true;
@@ -44,7 +44,7 @@ export class FsCalendarPanelsComponent implements OnInit {
 
   weekendColor = 'rgba(0, 0, 0, .25)';
 
-  get dataSource(): CalendarPanels {
+  get dataSource(): CalendarPanels<any> {
     return this._dataSource;
   }
   get month(): number {
@@ -61,7 +61,7 @@ export class FsCalendarPanelsComponent implements OnInit {
   }
 
   @Input()
-  set dataSource(data: CalendarPanels) {
+  set dataSource(data: CalendarPanels<any>) {
     this._dataSource = data;
     this.generateCal();
   }
@@ -105,25 +105,34 @@ export class FsCalendarPanelsComponent implements OnInit {
     this.isLoading = false;
   }
 
-  onClick(day: CalendarExtendedDay, type: string) {
+  onClick(day: CalendarExtendedDay<any>, type: string) {
     if (type === 'date' && this._dataSource.config.selectMode === 'range') {
       if (this.selectedDayStart != undefined && this.selectedDayEnd != undefined) {
         this.selectedDayBetween = [];
         this.selectedDayStart = undefined;
         this.selectedDayEnd = undefined;
       }
-      if (dateFns.isBefore(day.date, this.selectedDayStart as Date) || this.selectedDayStart === undefined) {
-        this.selectedDayStart = day.date;
+      if (dateFns.isBefore(day.date, this.selectedDayStart?.date as Date) || this.selectedDayStart === undefined) {
+        this.selectedDayStart = day;
       } else {
-        this.selectedDayEnd = day.date;
+        this.selectedDayEnd = day;
 
-        let daysBetween: number = dateFns.differenceInDays(this.selectedDayStart, this.selectedDayEnd);
-        let daysAffected: Date[] = [];
+        let daysBetween: number = dateFns.differenceInDays(this.selectedDayStart.date, this.selectedDayEnd.date);
+        let daysAffected: CalendarExtendedDay<any>[] = [];
 
         daysAffected.push(this.selectedDayStart);
         if (daysBetween < 0) {
+          console.log(this.dataSource.data);
           for (let index = 1; index < daysBetween * -1 + 1; index++) {
-            daysAffected.push(dateFns.addDays(this.selectedDayStart, index));
+            let newGeneratedDay = this.calendarService.generateDay(dateFns.addDays(this.selectedDayStart.date, index), []);
+            let i = this.dataSource.data.findIndex(sd => dateFns.isSameDay(sd.date, newGeneratedDay.date));
+            console.log('index:', i, newGeneratedDay.date);
+            if (i != -1) {
+              console.log('found one match');
+              daysAffected.push(this.dataSource.data[i]);
+            } else {
+              daysAffected.push(newGeneratedDay);
+            }
           }
         }
 
@@ -137,7 +146,7 @@ export class FsCalendarPanelsComponent implements OnInit {
     } else {
       this.selection.emit({
         type: 'click',
-        date: day.date,
+        date: day,
       });
     }
   }
@@ -146,7 +155,7 @@ export class FsCalendarPanelsComponent implements OnInit {
     if (this.calendar != undefined) {
       if (this.selectedDayStart != undefined && this.selectedDayEnd == undefined) {
         this.selectedDayBetween = this.calendar.daysAbsolute.filter(date => {
-          return dateFns.isAfter(date, this.selectedDayStart as Date) && dateFns.isBefore(date, dateComp);
+          return dateFns.isAfter(date.date, this.selectedDayStart?.date as Date) && dateFns.isBefore(date.date, dateComp);
         });
       }
     }
@@ -154,7 +163,7 @@ export class FsCalendarPanelsComponent implements OnInit {
 
   getAmIBetween(date: Date): boolean {
     const fIndex = this.selectedDayBetween.findIndex(selDate => {
-      return dateFns.isSameDay(selDate, date);
+      return dateFns.isSameDay(selDate.date, date);
     });
     if (fIndex != -1) {
       return true;
@@ -165,17 +174,17 @@ export class FsCalendarPanelsComponent implements OnInit {
 
   isSelectedDayStart(date: Date): boolean {
     if (this.selectedDayStart) {
-      return dateFns.isSameDay(this.selectedDayStart, date);
+      return dateFns.isSameDay(this.selectedDayStart.date, date);
     } else {
       return false;
     }
   }
   isSelectedDayEnd(date: Date): boolean {
     if (this.selectedDayEnd) {
-      return dateFns.isSameDay(this.selectedDayEnd, date);
+      return dateFns.isSameDay(this.selectedDayEnd.date, date);
     } else {
       if (this.selectedDayBetween.length > 0) {
-        if (dateFns.isSameDay(dateFns.addDays(this.selectedDayBetween[this.selectedDayBetween.length - 1], 1), date)) {
+        if (dateFns.isSameDay(this.calendarService.addDays(this.selectedDayBetween[this.selectedDayBetween.length - 1], 1).date, date)) {
           return true;
         }
       }
@@ -190,9 +199,9 @@ export class FsCalendarPanelsComponent implements OnInit {
   getCanIBeHighlighted(date: Date) {
     if (this.selectedDayEnd) {
       if (
-        (!dateFns.isSameDay(this.selectedDayStart as Date, date) && !dateFns.isSameDay(this.selectedDayEnd, date) && this.getAmIBetween(date)) ||
-        (dateFns.isSameDay(this.selectedDayEnd, date) && this.selectedDayEnd != undefined) ||
-        (dateFns.isSameDay(this.selectedDayStart as Date, date) && this.selectedDayStart != undefined)
+        (!dateFns.isSameDay(this.selectedDayStart?.date as Date, date) && !dateFns.isSameDay(this.selectedDayEnd?.date, date) && this.getAmIBetween(date)) ||
+        (dateFns.isSameDay(this.selectedDayEnd?.date, date) && this.selectedDayEnd != undefined) ||
+        (dateFns.isSameDay(this.selectedDayStart?.date as Date, date) && this.selectedDayStart != undefined)
       ) {
         return true;
       } else {
diff --git a/projects/ng-mat-components/src/fs-calendar/calendar.models.ts b/projects/ng-mat-components/src/fs-calendar/calendar.models.ts
index f924994..24a8725 100644
--- a/projects/ng-mat-components/src/fs-calendar/calendar.models.ts
+++ b/projects/ng-mat-components/src/fs-calendar/calendar.models.ts
@@ -1,7 +1,7 @@
 export interface CalendarPanelSum {
   year: number;
   dayNames: String[];
-  daysAbsolute: Date[];
+  daysAbsolute: CalendarExtendedDay[];
   calendarPanels: CalendarPanel[];
 }
 
@@ -26,11 +26,11 @@ export interface CalendarMonth {
  * @param {string}    start                   first day of selected range
  * @param {string}    end                     last day of selected range
  */
-export interface CalendarSelectedRange {
+export interface CalendarSelectedRange<T = void> {
   type: 'range';
-  start: Date;
-  end: Date;
-  affectedDays: Date[];
+  start: CalendarExtendedDay<T>;
+  end: CalendarExtendedDay<T>;
+  affectedDays: CalendarExtendedDay<T>[];
 }
 
 /**
@@ -38,11 +38,11 @@ export interface CalendarSelectedRange {
  * @param {string}    type                    type of event, in this case 'click'
  * @param {string}    date                    selected date
  */
-export interface CalendarSelectedDate {
+export interface CalendarSelectedDate<T = void> {
   type: 'click';
-  date: Date;
+  date: CalendarExtendedDay<T>;
 }
-export type CalendarEvent = CalendarSelectedRange | CalendarSelectedDate;
+export type CalendarEvent<T = void> = CalendarSelectedRange<T> | CalendarSelectedDate<T>;
 
 export interface DayX {
   dayNumber: string;
@@ -64,9 +64,9 @@ export interface DayX {
  * @param {string}    config                  configurate your calendar panels
  * @param {string}    data                    set custom days CalendarExtendedDay[]
  */
-export interface CalendarPanels {
+export interface CalendarPanels<T = void> {
   config: CalendarPanelsConfig;
-  data: CalendarExtendedDay[];
+  data: CalendarExtendedDay<T>[];
 }
 
 /**
@@ -125,7 +125,7 @@ export interface CalendarTableEntry {
  * @param {string}   badge.badgeIcon          if badgeMode == 'icon', set Icon (Material-Icons)
  * @param {Object}   _meta                    can be ignored
  */
-export interface CalendarExtendedDay {
+export interface CalendarExtendedDay<T = void> {
   date: Date;
   char?: string;
   colors?: {
@@ -138,11 +138,15 @@ export interface CalendarExtendedDay {
     badgeInt?: number;
     badgeIcon?: string;
   };
-  _meta?: {
-    kw: number;
-    type: 'cw' | 'plHolder' | 'day';
-    dayNumber: string;
-    dayOfWeek: number;
-    isWeekendDay: boolean;
-  };
+  _meta?: CalendarExtendedDayMeta;
+  customData?: T;
+}
+
+export type CalendarExtendedDayMetaType = 'cw' | 'plHolder' | 'day';
+export interface CalendarExtendedDayMeta {
+  kw: number;
+  type: CalendarExtendedDayMetaType;
+  dayNumber: string;
+  dayOfWeek: number;
+  isWeekendDay: boolean;
 }
diff --git a/projects/ng-mat-components/src/fs-calendar/services/fs-calendar.service.ts b/projects/ng-mat-components/src/fs-calendar/services/fs-calendar.service.ts
index dbe1286..661ecc4 100644
--- a/projects/ng-mat-components/src/fs-calendar/services/fs-calendar.service.ts
+++ b/projects/ng-mat-components/src/fs-calendar/services/fs-calendar.service.ts
@@ -1,6 +1,8 @@
 import { Inject, Injectable } from '@angular/core';
 import * as dateFns from 'date-fns';
-import { CalendarExtendedDay, CalendarMonth, CalendarPanel, CalendarPanelSum } from '../calendar.models';
+import { CalendarExtendedDay, CalendarExtendedDayMeta, CalendarExtendedDayMetaType, CalendarMonth, CalendarPanel, CalendarPanelSum } from '../calendar.models';
+
+type StartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
 
 @Injectable({
   providedIn: 'root',
@@ -8,19 +10,22 @@ import { CalendarExtendedDay, CalendarMonth, CalendarPanel, CalendarPanelSum } f
 export class FsCalendarService {
   dayNames: string[] = this.getWeekDayNames();
   oneYearOfMonths: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+  weekStartsOn: StartsOn = 1;
+  kwStartsOn: StartsOn = 4;
 
   constructor(@Inject('FS_DATE_LOCALE') private appLocale: dateFns.Locale) {}
 
   generateMatrix(
     mode: 'monthly' | 'annual',
     calendarWeek: boolean,
-    customDays: CalendarExtendedDay[],
+    customDays: CalendarExtendedDay<any>[],
     year: number,
     currMonth: number,
     monthsBefore: number,
     monthsAfter: number
   ): CalendarPanelSum {
     let cal: CalendarPanelSum;
+    let daysAbsolute: CalendarExtendedDay<any>[] = [];
 
     monthsAfter = monthsAfter ? parseInt(monthsAfter.toString(), 10) : monthsAfter;
     monthsBefore = monthsBefore ? parseInt(monthsBefore.toString(), 10) : monthsBefore;
@@ -43,10 +48,9 @@ export class FsCalendarService {
         calendarPanels.push(this.generatePanel(actualYear, actualMonth, calendarWeek, customDays));
       }
 
-      let daysAbsolute: Date[] = [];
       calendarPanels.forEach(panel => {
         panel.days.forEach(day => {
-          daysAbsolute.push(day.date);
+          daysAbsolute.push(day);
         });
       });
       cal = {
@@ -58,10 +62,9 @@ export class FsCalendarService {
     } else {
       // Calendar is a full year
       let calendarPanels = this.generatePanels(year, this.oneYearOfMonths, calendarWeek, customDays);
-      let daysAbsolute: Date[] = [];
       calendarPanels.forEach(panel => {
         panel.days.forEach(day => {
-          daysAbsolute.push(day.date);
+          daysAbsolute.push(day);
         });
       });
       cal = {
@@ -74,7 +77,7 @@ export class FsCalendarService {
     return cal;
   }
 
-  generatePanels(year: number, months: number[], calendarWeek: boolean, customDays: CalendarExtendedDay[]): CalendarPanel[] {
+  generatePanels(year: number, months: number[], calendarWeek: boolean, customDays: CalendarExtendedDay<any>[]): CalendarPanel[] {
     let tmpPanels: CalendarPanel[] = [];
     months.forEach(month => {
       tmpPanels.push(this.generatePanel(year, month, calendarWeek, customDays));
@@ -82,7 +85,7 @@ export class FsCalendarService {
     return tmpPanels;
   }
 
-  generatePanel(year: number, month: number, calendarWeek: boolean, customDays: CalendarExtendedDay[]): CalendarPanel {
+  generatePanel(year: number, month: number, calendarWeek: boolean, customDays: CalendarExtendedDay<any>[]): CalendarPanel {
     const filtedCustomDays = customDays.filter(day => {
       return dateFns.isSameMonth(new Date(year, month, 1), day.date);
     });
@@ -94,7 +97,7 @@ export class FsCalendarService {
       days: tmpMonth.days,
       render: [[]],
     };
-    let tmpPreRender: CalendarExtendedDay[] = tmpMonth.days;
+    let tmpPreRender: CalendarExtendedDay<any>[] = tmpMonth.days;
     let firstDayOfMonth = tmpMonth.days[0].date;
     let dayOfWeek = dateFns.getISODay(firstDayOfMonth);
     let nextMonth = dateFns.addMonths(firstDayOfMonth, 1);
@@ -131,40 +134,24 @@ export class FsCalendarService {
     return tmpMonthRenderer;
   }
 
-  generatePlaceholder(date: Date): CalendarExtendedDay {
+  generatePlaceholder(date: Date): CalendarExtendedDay<any> {
     return {
       date: date,
-      _meta: {
-        kw: dateFns.getWeek(date, { weekStartsOn: 4 }),
-        type: 'plHolder',
-        dayNumber: dateFns.format(date, 'd', {
-          locale: this.appLocale,
-        }),
-        dayOfWeek: dateFns.getISODay(date),
-        isWeekendDay: dateFns.isWeekend(date),
-      },
+      _meta: this.generateMetaForCalExtDay(date, 'plHolder'),
     };
   }
 
-  generateWeekNumber(date: Date): CalendarExtendedDay {
+  generateWeekNumber(date: Date): CalendarExtendedDay<any> {
     return {
       date: date,
-      _meta: {
-        kw: dateFns.getWeek(date, { weekStartsOn: 4 }),
-        type: 'cw',
-        dayNumber: dateFns.format(date, 'd', {
-          locale: this.appLocale,
-        }),
-        dayOfWeek: dateFns.getISODay(date),
-        isWeekendDay: dateFns.isWeekend(date),
-      },
+      _meta: this.generateMetaForCalExtDay(date, 'cw'),
     };
   }
 
-  generateMonth(year: number, month: number, customDays: CalendarExtendedDay[]): CalendarMonth {
+  generateMonth(year: number, month: number, customDays: CalendarExtendedDay<any>[]): CalendarMonth {
     const firstDayInMonth = new Date(year, month, 1);
     const daysInMonth = dateFns.getDaysInMonth(firstDayInMonth);
-    const days: CalendarExtendedDay[] = [];
+    const days: CalendarExtendedDay<any>[] = [];
 
     for (let index = 0; index < daysInMonth; index++) {
       const date = new Date(year, month, index + 1);
@@ -182,19 +169,11 @@ export class FsCalendarService {
     };
   }
 
-  generateDay(dateToGenerate: Date, customDays: CalendarExtendedDay[]): CalendarExtendedDay {
+  generateDay(dateToGenerate: Date, customDays: CalendarExtendedDay<any>[]): CalendarExtendedDay<any> {
     if (customDays.length == 0) {
       return {
         date: dateToGenerate,
-        _meta: {
-          kw: dateFns.getWeek(dateToGenerate, { weekStartsOn: 4 }),
-          type: 'day',
-          dayNumber: dateFns.format(dateToGenerate, 'd', {
-            locale: this.appLocale,
-          }),
-          dayOfWeek: dateFns.getISODay(dateToGenerate),
-          isWeekendDay: dateFns.isWeekend(dateToGenerate),
-        },
+        _meta: this.generateMetaForCalExtDay(dateToGenerate, 'day'),
       };
     } else {
       let backgroundColor = '';
@@ -237,24 +216,42 @@ export class FsCalendarService {
           color: customDays[0].colors?.color,
         },
         toolTip: toolTip,
-        _meta: {
-          kw: dateFns.getWeek(dateToGenerate, { weekStartsOn: 4 }),
-          type: 'day',
-          dayNumber: dateFns.format(dateToGenerate, 'd', {
-            locale: this.appLocale,
-          }),
-          dayOfWeek: dateFns.getISODay(dateToGenerate),
-          isWeekendDay: dateFns.isWeekend(dateToGenerate),
-        },
+        customData: customDays[0].customData,
+        _meta: this.generateMetaForCalExtDay(dateToGenerate, 'day'),
       };
     }
   }
 
+  addDays(orig: CalendarExtendedDay<any>, ammount: number): CalendarExtendedDay<any> {
+    let newDate = dateFns.addDays(orig.date, ammount);
+    return {
+      date: newDate,
+      badge: orig.badge,
+      char: orig.char,
+      colors: orig.colors,
+      customData: orig.customData,
+      toolTip: orig.toolTip,
+      _meta: this.generateMetaForCalExtDay(newDate, 'day'),
+    };
+  }
+
+  generateMetaForCalExtDay(date: Date, type: CalendarExtendedDayMetaType): CalendarExtendedDayMeta {
+    return {
+      kw: dateFns.getWeek(date, { weekStartsOn: this.kwStartsOn }),
+      type: type,
+      dayNumber: dateFns.format(date, 'd', {
+        locale: this.appLocale,
+      }),
+      dayOfWeek: dateFns.getISODay(date),
+      isWeekendDay: dateFns.isWeekend(date),
+    };
+  }
+
   getWeekDayNames(): string[] {
     let now = new Date();
     let arr = dateFns.eachDayOfInterval({
-      start: dateFns.startOfWeek(now, { weekStartsOn: 1 }),
-      end: dateFns.endOfWeek(now, { weekStartsOn: 1 }),
+      start: dateFns.startOfWeek(now, { weekStartsOn: this.weekStartsOn }),
+      end: dateFns.endOfWeek(now, { weekStartsOn: this.weekStartsOn }),
     });
     let arrOfDays: string[] = [];
     arr.map(a => arrOfDays.push(dateFns.format(a, 'EEEEEE', { locale: this.appLocale })));