diff --git a/package.json b/package.json
index c4989976..81385c29 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,6 @@
     "gh-pages": "^6.1.1",
     "givens": "^1.3.9",
     "husky": "^9.0.9",
-    "intl": "^1.2.5",
     "jest": "^29.7.0",
     "jest-expo": "^49.0.0",
     "jest-plugin-context": "^2.9.0",
diff --git a/packages/CalendarCarousel/CalendarItem/DateItem.tsx b/packages/CalendarCarousel/CalendarItem/DateItem.tsx
new file mode 100644
index 00000000..eddf664c
--- /dev/null
+++ b/packages/CalendarCarousel/CalendarItem/DateItem.tsx
@@ -0,0 +1,131 @@
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {Text, TouchableOpacity, View} from 'react-native';
+import {useTheme} from '@dooboo-ui/theme';
+import {css} from '@emotion/native';
+
+import type {DateObject} from '.';
+
+export type DateItemStyles = {
+  container?: StyleProp<ViewStyle>;
+  text?: TextStyle;
+  selectedContainer?: ViewStyle;
+  selectedText?: TextStyle;
+  event?: ViewStyle;
+  prevContainer?: ViewStyle;
+  prevText?: TextStyle;
+  nextContainer?: ViewStyle;
+  nextText?: TextStyle;
+  weekendContainer?: ViewStyle;
+  weekendText?: TextStyle;
+};
+
+export type DateItemProp = {
+  isEvent?: boolean;
+  dateObject: DateObject;
+  calendarWidth: number;
+  showPrevDates: boolean;
+  showNextDates: boolean;
+  onPress?: (date: DateObject) => void;
+  selected?: boolean;
+  styles?: DateItemStyles;
+};
+
+export default function DateItem({
+  isEvent,
+  dateObject,
+  calendarWidth,
+  onPress,
+  selected = false,
+  styles,
+  showNextDates = true,
+  showPrevDates = true,
+}: DateItemProp): JSX.Element {
+  const {theme} = useTheme();
+
+  const {isNextMonth, isPrevMonth} = dateObject;
+  const dateWidth = calendarWidth - 24;
+  const dayHeight = dateWidth / 7;
+  const dayWidth = Math.floor(dateWidth / 7);
+
+  if ((!!isNextMonth && !showNextDates) || (!!isPrevMonth && !showPrevDates)) {
+    return (
+      <View
+        style={css`
+          width: ${dayWidth + 'px'};
+          height: ${dayHeight + 'px'};
+        `}
+      />
+    );
+  }
+
+  return (
+    <TouchableOpacity
+      disabled={!onPress}
+      onPress={() => {
+        onPress?.(dateObject);
+      }}
+      style={[
+        css`
+          width: ${dayWidth + 'px'};
+          height: ${dayHeight + 'px'};
+
+          justify-content: center;
+          align-items: center;
+        `,
+        styles?.container,
+        !!isNextMonth && {
+          ...styles?.nextContainer,
+        },
+        !!isPrevMonth && {
+          ...styles?.prevContainer,
+        },
+        selected && {
+          ...css`
+            background-color: ${theme.role.accent};
+            border-radius: 99px;
+          `,
+          ...styles?.selectedContainer,
+        },
+        isEvent && styles?.event,
+      ]}
+      testID={
+        isPrevMonth
+          ? 'prev-dateItem'
+          : isNextMonth
+            ? 'next-dateItem'
+            : 'dateItem'
+      }
+    >
+      <Text
+        numberOfLines={1}
+        style={[
+          styles?.text,
+          css`
+            font-size: 18px;
+            color: ${theme.text.basic};
+          `,
+          !!isNextMonth && {
+            ...css`
+              color: ${theme.text.disabled};
+            `,
+            ...styles?.nextText,
+          },
+          !!isPrevMonth && {
+            ...css`
+              color: ${theme.text.disabled};
+            `,
+            ...styles?.prevText,
+          },
+          selected && {
+            ...css`
+              color: #1b1b1b;
+            `,
+            ...styles?.selectedText,
+          },
+        ]}
+      >
+        {dateObject.date.getDate()}
+      </Text>
+    </TouchableOpacity>
+  );
+}
diff --git a/packages/CalendarCarousel/CalendarItem/index.tsx b/packages/CalendarCarousel/CalendarItem/index.tsx
new file mode 100644
index 00000000..c07be885
--- /dev/null
+++ b/packages/CalendarCarousel/CalendarItem/index.tsx
@@ -0,0 +1,93 @@
+import {View} from 'react-native';
+import styled, {css} from '@emotion/native';
+import {isSameDay, isWeekend} from 'date-fns';
+
+import type {DateItemStyles} from './DateItem';
+import DateItem from './DateItem';
+
+const Container = styled.View<{width: number}>`
+  width: ${(props) => props.width + 'px'};
+`;
+
+export type DateObject = {
+  date: Date;
+  isPrevMonth?: boolean;
+  isNextMonth?: boolean;
+};
+
+interface CalendarItemProp {
+  dateObjects: DateObject[];
+  events?: Date[];
+  width: number;
+  showPrevDates?: boolean;
+  showNextDates?: boolean;
+  selectedDateObject?: DateObject;
+  styles?: DateItemStyles;
+  onDatePress?: (date: DateObject) => void;
+  renderDate?: (props: {
+    date: Date;
+    selected?: boolean;
+    isPrev?: boolean;
+    isNext?: boolean;
+    isWeekend?: boolean;
+  }) => JSX.Element;
+}
+
+export default function CalendarItem({
+  dateObjects,
+  selectedDateObject,
+  width,
+  events,
+  showPrevDates = false,
+  showNextDates = false,
+  styles,
+  onDatePress,
+  renderDate,
+}: CalendarItemProp): JSX.Element {
+  const onPressDateItem = (date: DateObject): void => {
+    onDatePress?.(date);
+  };
+
+  return (
+    <Container width={width}>
+      <View
+        style={css`
+          flex-direction: row;
+          align-items: center;
+          flex-wrap: wrap;
+          gap: 4px;
+        `}
+      >
+        {dateObjects.map((dateObj, i) => {
+          const selected =
+            selectedDateObject &&
+            isSameDay(selectedDateObject.date, dateObj.date);
+
+          if (renderDate) {
+            return renderDate({
+              date: dateObj.date,
+              selected,
+              isNext: dateObj.isNextMonth,
+              isPrev: dateObj.isPrevMonth,
+              isWeekend: isWeekend(dateObj.date),
+            });
+          }
+
+          return (
+            <DateItem
+              calendarWidth={width}
+              dateObject={dateObj}
+              isEvent={events?.includes(dateObj.date)}
+              key={`${dateObj}-${i}`}
+              onPress={onPressDateItem}
+              selected={selected}
+              showNextDates={showNextDates}
+              showPrevDates={showPrevDates}
+              styles={styles}
+            />
+          );
+        })}
+      </View>
+    </Container>
+  );
+}
diff --git a/packages/CalendarCarousel/MonthHeader.tsx b/packages/CalendarCarousel/MonthHeader.tsx
new file mode 100644
index 00000000..c36afaa9
--- /dev/null
+++ b/packages/CalendarCarousel/MonthHeader.tsx
@@ -0,0 +1,72 @@
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {Text, TouchableOpacity} from 'react-native';
+import {useTheme} from '@dooboo-ui/theme';
+import styled, {css} from '@emotion/native';
+
+import {getNextMonth, getPreviousMonth} from './utils';
+
+interface Prop {
+  date: Date;
+  onChange: (date: Date) => void;
+  iconLeft?: JSX.Element;
+  iconRight?: JSX.Element;
+  styles?: {
+    container?: StyleProp<ViewStyle>;
+    text?: StyleProp<TextStyle>;
+  };
+}
+
+const Container = styled.View`
+  padding: 10px;
+
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export default function MonthHeader({
+  date,
+  onChange,
+  styles,
+  iconLeft,
+  iconRight,
+}: Prop): JSX.Element {
+  const {theme} = useTheme();
+
+  return (
+    <Container style={styles?.container}>
+      <TouchableOpacity
+        onPress={() => {
+          const previous = getPreviousMonth(date);
+          onChange(previous);
+        }}
+        testID="month-header-prev-btn"
+      >
+        {iconLeft || null}
+      </TouchableOpacity>
+
+      <Text
+        style={[
+          css`
+            color: ${theme.text.basic};
+            font-weight: bold;
+            font-size: 20px;
+          `,
+          styles?.text,
+        ]}
+        testID="month-header-title"
+      >
+        {date.getFullYear()}년 {date.getMonth() + 1}월
+      </Text>
+      <TouchableOpacity
+        onPress={() => {
+          const next = getNextMonth(date);
+          onChange(next);
+        }}
+        testID="month-header-next-btn"
+      >
+        {iconRight || null}
+      </TouchableOpacity>
+    </Container>
+  );
+}
diff --git a/packages/CalendarCarousel/WeekdayItem.tsx b/packages/CalendarCarousel/WeekdayItem.tsx
new file mode 100644
index 00000000..4f15ae90
--- /dev/null
+++ b/packages/CalendarCarousel/WeekdayItem.tsx
@@ -0,0 +1,67 @@
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {Text, View} from 'react-native';
+import {useTheme} from '@dooboo-ui/theme';
+import {css} from '@emotion/native';
+
+interface Prop {
+  locale?: Locale;
+  width?: number;
+  styles?: {
+    container?: StyleProp<ViewStyle>;
+    text?: StyleProp<TextStyle>;
+    weekendContainer?: StyleProp<ViewStyle>;
+    weekendText?: StyleProp<TextStyle>;
+  };
+}
+
+export default function WeekdayItem({
+  width = 350,
+  locale,
+  styles,
+}: Prop): JSX.Element {
+  const {theme} = useTheme();
+  const weekdays = [...Array(7).keys()].map((i) =>
+    locale?.localize?.day(i, {width: 'abbreviated'}),
+  );
+
+  return (
+    <View
+      style={css`
+        width: ${width + 'px'};
+        flex-direction: row;
+        justify-content: space-between;
+        padding: 10px 0;
+      `}
+    >
+      {weekdays.map((item, index) => {
+        return (
+          <View
+            key={index}
+            style={[
+              css`
+                flex: 1;
+                align-items: center;
+              `,
+              styles?.container,
+              (index === 0 || index === 6) && styles?.weekendContainer,
+            ]}
+            testID="weekday"
+          >
+            <Text
+              style={[
+                css`
+                  font-size: 16px;
+                  color: ${theme.text.basic};
+                `,
+                styles?.text,
+                (index === 0 || index === 6) && styles?.weekendText,
+              ]}
+            >
+              {item}
+            </Text>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
diff --git a/packages/CalendarCarousel/index.tsx b/packages/CalendarCarousel/index.tsx
index 1cd3d7cc..a45c2a4d 100644
--- a/packages/CalendarCarousel/index.tsx
+++ b/packages/CalendarCarousel/index.tsx
@@ -1,493 +1,199 @@
-import 'intl';
-import 'intl/locale-data/jsonp/en';
-
-import type {PropsWithChildren} from 'react';
-import React, {useRef, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 import type {
-  NativeScrollEvent,
-  NativeSyntheticEvent,
+  FlatListProps,
+  StyleProp,
   TextStyle,
   ViewStyle,
 } from 'react-native';
-import {
-  FlatList,
-  SafeAreaView,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {useTheme} from '@dooboo-ui/theme';
-
-interface Style {
-  wrapperContainer: ViewStyle;
-  calendarContainer: ViewStyle;
-  headerStyle: ViewStyle;
-  arrowText: TextStyle;
-  titleContainer: ViewStyle;
-  titleText: TextStyle;
-  yearText: TextStyle;
-  rowContainer: ViewStyle;
-  weekdayText: TextStyle;
-  dayContainer: ViewStyle;
-  defaultView: ViewStyle;
-  otherDaysText: TextStyle;
-  currentDayView: ViewStyle;
-  currentDayText: TextStyle;
-  inactiveText: TextStyle;
-  activeView: ViewStyle;
-  activeText: TextStyle;
-  mark: ViewStyle;
-  eventContainer: ViewStyle;
-  eventText: TextStyle;
-  eventDate: TextStyle;
-}
-
-const styles = StyleSheet.create<Style>({
-  wrapperContainer: {
-    paddingTop: 40,
-    width: 332,
-    height: 470,
-    paddingBottom: 40,
-  },
-  calendarContainer: {
-    height: 390,
-  },
-  dayContainer: {
-    width: 330,
-    height: 350,
-  },
-  headerStyle: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    paddingBottom: 28,
-  },
-  arrowText: {
-    color: 'royalblue',
-    fontSize: 30,
-  },
-  titleContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  titleText: {
-    fontSize: 20,
-    textAlign: 'center',
-    justifyContent: 'center',
-    width: 300,
-  },
-  yearText: {
-    fontSize: 12,
-    textAlign: 'center',
-    justifyContent: 'center',
-  },
-  rowContainer: {
-    flexDirection: 'row',
-  },
-  weekdayText: {
-    textAlign: 'center',
-    color: '#4F4F4F',
-    fontSize: 20,
-  },
-  defaultView: {
-    width: 47,
-    height: 47,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  otherDaysText: {
-    color: 'lightgray',
-    textAlign: 'center',
-  },
-  currentDayView: {
-    width: 47,
-    height: 47,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 50,
-    backgroundColor: '#109CF1',
-  },
-  activeView: {
-    width: 47,
-    height: 47,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 50,
-    backgroundColor: '#F0F8FD',
-  },
-  currentDayText: {
-    color: 'white',
-    textAlign: 'center',
-  },
-  inactiveText: {
-    textAlign: 'center',
-  },
-  activeText: {
-    color: '#109CF1',
-    textAlign: 'center',
-  },
-  mark: {
-    width: 4,
-    height: 4,
-    borderRadius: 50,
-    backgroundColor: '#109CF1',
-  },
-  eventContainer: {
-    width: 320,
-    height: 50,
-    backgroundColor: '#109CF1',
-    borderRadius: 30,
-    paddingTop: 15,
-    flexDirection: 'row',
-  },
-  eventText: {
-    color: 'white',
-    fontWeight: 'bold',
-    paddingLeft: 30,
-    fontSize: 14,
-  },
-  eventDate: {
-    fontWeight: '900',
-    paddingLeft: 25,
-    color: 'white',
-  },
-});
-
-interface Props {
+import {FlatList, View} from 'react-native';
+import {css} from '@emotion/native';
+import type {Locale} from 'date-fns';
+import {addMonths, subMonths} from 'date-fns';
+
+import type {DateItemStyles} from './CalendarItem/DateItem';
+import type {DateObject} from './CalendarItem';
+import CalendarItem from './CalendarItem';
+import MonthHeader from './MonthHeader';
+import {getDatesInMonths as getDatesInMonths} from './utils';
+import WeekdayItem from './WeekdayItem';
+
+type CalendarCarouselProps = {
+  initialSelectedDate?: Date;
+  locale?: Locale;
+  width?: number;
+  headerIconLeft?: JSX.Element;
+  headerIconRight?: JSX.Element;
   date?: Date;
-  onDateChanged?: (date: Date) => void;
-  selectedDate?: Date;
-  selectDate?: (date: Date) => void;
-  markedDayEvents?: Record<string, any>[];
-  monthFormatter?: {format: (date: Date) => string};
-}
-function CalendarCarousel({
-  date = new Date(),
-  onDateChanged,
-  selectDate,
-  selectedDate,
-  markedDayEvents = [],
-  monthFormatter = new Intl.DateTimeFormat('en', {month: 'long'}),
-}: PropsWithChildren<Props>): JSX.Element {
-  const {theme} = useTheme();
-  const scrollRef = useRef<ScrollView>(null);
-  const [layoutWidth, setLayoutWidth] = useState(330);
-  const [eventDay, setEventDay] = useState(0);
-  const [currentDate, setCurrentDate] = useState<Date>(date);
-
-  const prevMonth = new Date(
-    currentDate.getFullYear(),
-    currentDate.getMonth() - 1,
-    currentDate.getDate(),
-  );
-
-  const nextMonth = new Date(
-    currentDate.getFullYear(),
-    currentDate.getMonth() + 1,
-    currentDate.getDate(),
-  );
-
-  const scrollToMiddleCalendar = (): void => {
-    scrollRef.current?.scrollTo({
-      x: Math.floor(layoutWidth),
-      animated: false,
-    });
+  showPrevDates?: boolean;
+  showNextDates?: boolean;
+  events?: Date[];
+  onChangeMonth?: (date: Date) => void;
+  onSelectDate?: (date: Date) => void;
+  style?: Omit<ViewStyle, 'width'>;
+  styles?: {
+    container?: ViewStyle;
+    date?: DateItemStyles;
+    header?: {
+      container?: StyleProp<ViewStyle>;
+      text?: StyleProp<TextStyle>;
+      startIcon?: ViewStyle;
+      endIcon?: ViewStyle;
+    };
+    weekday?: {
+      container?: StyleProp<ViewStyle>;
+      text?: StyleProp<TextStyle>;
+      weekendContainer?: StyleProp<ViewStyle>;
+      weekendText?: StyleProp<TextStyle>;
+    };
   };
+  renderHeader?: (date: Date) => JSX.Element;
+  renderWeekday?: (date: Date) => JSX.Element;
+  renderDate?: (props: {
+    date: Date;
+    selected?: boolean;
+    isPrev?: boolean;
+    isNext?: boolean;
+    isWeekend?: boolean;
+  }) => JSX.Element;
+};
 
-  const scrollEffect = (e: NativeSyntheticEvent<NativeScrollEvent>): void => {
-    const xValue = Math.floor(e.nativeEvent.contentOffset.x);
-    const maxLayoutFloor = Math.floor(layoutWidth) * 2;
-
-    if (!layoutWidth || layoutWidth === 1) {
-      return;
+function CalendarCarousel({
+  locale,
+  style,
+  width = 300,
+  date,
+  events,
+  headerIconLeft,
+  headerIconRight,
+  showNextDates,
+  showPrevDates,
+  styles,
+  initialSelectedDate,
+  onSelectDate,
+  renderHeader,
+  onChangeMonth,
+  renderWeekday,
+  renderDate,
+}: CalendarCarouselProps): JSX.Element {
+  const [index, setIndex] = useState(1);
+  const [selectedDateObject, setSelectedDateObject] = useState<
+    DateObject | undefined
+  >(undefined);
+
+  const [currentDate, setCurrentDate] = useState(date ? date : new Date());
+  const flatListRef = useRef<FlatList<any>>(null);
+  const dates = getDatesInMonths({
+    year: currentDate.getFullYear(),
+    month: currentDate.getMonth(),
+  });
+
+  useEffect(() => {
+    flatListRef.current?.scrollToIndex({index: 1, animated: false});
+
+    if (initialSelectedDate) {
+      setSelectedDateObject({date: initialSelectedDate});
     }
-
-    if (xValue === 0) {
-      if (scrollRef && scrollRef.current) {
-        scrollToMiddleCalendar();
-        setCurrentDate(prevMonth);
-      }
-    } else if (xValue === maxLayoutFloor) {
-      if (scrollRef && scrollRef.current) {
-        scrollToMiddleCalendar();
-        setCurrentDate(nextMonth);
+  }, [initialSelectedDate]);
+
+  const onViewableItemsChanged: FlatListProps<any>['onViewableItemsChanged'] =
+    ({viewableItems}) => {
+      switch (viewableItems[0].index) {
+        case 0:
+          setIndex(0);
+          break;
+        case 2:
+          setIndex(2);
+          break;
       }
-    }
-  };
-
-  const changeMonth = (toPrevMonth?: boolean): void => {
-    if (toPrevMonth) {
-      const update = prevMonth;
-
-      setCurrentDate(update);
-
-      return onDateChanged?.(update);
-    }
-
-    const update = nextMonth;
-
-    setCurrentDate(update);
-
-    return onDateChanged?.(update);
-  };
-
-  const renderCalendars = (): JSX.Element => {
-    const renderCalendar = (displayDate: Date): JSX.Element => {
-      const monthName = monthFormatter.format(displayDate);
-      const year = displayDate.getFullYear();
-      const month = displayDate.getMonth();
-
-      const lastDate = new Date(year, month + 1, 0).getDate();
-      const firstWeekday = new Date(year, month, 1).getDay();
-      const lastWeekday = new Date(year, month, lastDate).getDay();
-
-      const weekdays: JSX.Element[] = [];
-
-      for (let idx = 0; idx <= 6; idx++) {
-        const matchMonth = new Date(2020, 5, idx);
-
-        const weekDay = matchMonth.toLocaleString('default', {
-          weekday: 'narrow',
-        });
-
-        weekdays.push(
-          <View style={{width: 47.14}}>
-            <Text style={styles.weekdayText}>{weekDay}</Text>
-          </View>,
-        );
-      }
-
-      const prevDates: Date[] = [];
-
-      for (let idx = 0; idx < firstWeekday; idx++) {
-        // eslint-disable-next-line @typescript-eslint/no-shadow
-        const date = new Date(year, month, 0);
-
-        date.setDate(date.getDate() - idx);
-        prevDates.unshift(date);
-      }
-
-      const dates: Date[] = [];
-
-      for (let idx = 1; idx <= lastDate; idx++) {
-        dates.push(new Date(year, month, idx));
-      }
-
-      const nextDates: Date[] = [];
-
-      if (6 - lastWeekday >= 1) {
-        for (let idx = 1; idx <= 6 - lastWeekday; idx++) {
-          nextDates.push(new Date(year, month + 1, idx));
-        }
-      }
-
-      const calendarDates: Date[] = [...prevDates, ...dates, ...nextDates];
-
-      const markedDates = markedDayEvents.map((eventDates) =>
-        eventDates.selectedEventDate.getDate(),
-      );
-
-      const markedMonths = markedDayEvents.map(
-        (eventMonths) => eventMonths.selectedEventDate.getMonth() - 1,
-      );
-
-      const markedYears = markedDayEvents.map((eventYears) =>
-        eventYears.selectedEventDate.getFullYear(),
-      );
-
-      const renderDates = (dateItem: Date): JSX.Element => {
-        const itemYear = dateItem.getFullYear();
-        const itemMonth = dateItem.getMonth();
-        const itemDay = dateItem.getDate();
-        const itemDate = new Date(itemYear, itemMonth, itemDay);
-
-        // eslint-disable-next-line @typescript-eslint/no-shadow
-        const isToday = (dateItem: Date): boolean => {
-          const today = new Date();
-
-          return (
-            dateItem.getDate() === today.getDate() &&
-            dateItem.getMonth() === today.getMonth() &&
-            dateItem.getFullYear() === today.getFullYear()
-          );
-        };
-
-        const hasEvent = (): boolean => {
-          return (
-            markedDates.includes(itemDay) &&
-            markedMonths.includes(itemMonth) &&
-            markedYears.includes(itemYear)
-          );
-        };
-
-        // eslint-disable-next-line @typescript-eslint/no-shadow
-        const isSelected = (dateItem: Date): boolean => {
-          return (
-            dateItem.getDate() === selectedDate?.getDate() &&
-            dateItem.getMonth() === selectedDate?.getMonth() &&
-            dateItem.getFullYear() === selectedDate?.getFullYear()
-          );
-        };
-
-        if (itemMonth !== month) {
-          return (
-            <View key={`${itemMonth}-${itemDay}`} style={styles.defaultView}>
-              <Text
-                style={[styles.otherDaysText, {color: theme.text.disabled}]}
-              >{`${itemDay}`}</Text>
-            </View>
-          );
-        } else if (isToday(dateItem)) {
-          return (
-            <View key={`${itemMonth}-${itemDay}`} style={styles.currentDayView}>
-              <Text style={styles.currentDayText}>{`${itemDay}`}</Text>
-            </View>
-          );
-        } else if (hasEvent() && isSelected(dateItem)) {
-          return (
-            <TouchableOpacity
-              key={`${itemMonth}-${itemDay}`}
-              onPress={(): void => {
-                selectDate?.(itemDate);
-                setEventDay(itemDay);
-              }}
-            >
-              <View style={styles.activeView}>
-                <Text style={styles.activeText}>{`${itemDay}`}</Text>
-                <View style={styles.mark} />
-              </View>
-            </TouchableOpacity>
-          );
-        } else if (hasEvent()) {
-          return (
-            <TouchableOpacity
-              key={`${itemMonth}-${itemDay}`}
-              onPress={(): void => selectDate?.(itemDate)}
-            >
-              <View style={styles.defaultView}>
-                <Text style={[styles.inactiveText]}>{`${itemDay}`}</Text>
-                <View style={styles.mark} />
-              </View>
-            </TouchableOpacity>
-          );
-        } else if (isSelected(dateItem)) {
-          return (
-            <TouchableOpacity
-              key={`${itemMonth}-${itemDay}`}
-              onPress={(): void => selectDate?.(itemDate)}
-            >
-              <View
-                style={[styles.activeView, {backgroundColor: theme.bg.paper}]}
-              >
-                <Text
-                  style={[styles.activeText, {color: theme.text.basic}]}
-                >{`${itemDay}`}</Text>
-              </View>
-            </TouchableOpacity>
-          );
-        }
-
-        return (
-          <TouchableOpacity
-            key={`${itemMonth}-${itemDay}`}
-            onPress={(): void => selectDate?.(itemDate)}
-          >
-            <View style={styles.defaultView}>
-              <Text
-                style={[styles.inactiveText, {color: theme.text.basic}]}
-              >{`${itemDay}`}</Text>
-            </View>
-          </TouchableOpacity>
-        );
-      };
-
-      const renderEvent = (): JSX.Element[] => {
-        return markedDayEvents.map((markedDayEvent, i) => {
-          if (
-            markedDates[i] === eventDay &&
-            markedMonths.includes(month) &&
-            markedYears.includes(year)
-          ) {
-            return (
-              <View key={`${eventDay}-${i}`} style={styles.eventContainer}>
-                <Text style={styles.eventDate}>
-                  {markedDayEvents[i].selectedEventDate.getDate()}
-                </Text>
-                <Text style={styles.eventText}>
-                  {markedDayEvents[i].events}
-                </Text>
-              </View>
-            );
-          }
-
-          return <View key="none" />;
-        });
-      };
-
-      return (
-        <View key={`${year}-${monthName}`} style={styles.calendarContainer}>
-          <View style={styles.headerStyle}>
-            <TouchableOpacity onPress={(): void => changeMonth(true)}>
-              <Text style={[styles.arrowText, {color: theme.role.primary}]}>
-                {' '}
-                &#8249;
-              </Text>
-            </TouchableOpacity>
-            <View style={styles.titleContainer}>
-              <Text style={[styles.titleText, {color: theme.text.basic}]}>
-                {monthName}
-              </Text>
-              <Text style={[styles.yearText, {color: theme.text.basic}]}>
-                {year}
-              </Text>
-            </View>
-            <TouchableOpacity onPress={(): void => changeMonth(false)}>
-              <Text style={styles.arrowText}>&#8250;</Text>
-            </TouchableOpacity>
-          </View>
-          <View style={styles.rowContainer}>{weekdays}</View>
-          <FlatList
-            data={calendarDates}
-            keyExtractor={(item, id) => `${item}-${id}`}
-            numColumns={7}
-            renderItem={({item}) => renderDates(item)}
-            scrollEnabled={false}
-            style={styles.dayContainer}
-          />
-          {renderEvent()}
-        </View>
-      );
     };
 
-    return (
-      <View style={styles.rowContainer}>
-        {renderCalendar(prevMonth)}
-        {renderCalendar(currentDate)}
-        {renderCalendar(nextMonth)}
-      </View>
-    );
-  };
+  // https://github.com/facebook/react-native/issues/30171#issuecomment-820833606
+  const viewabilityConfigCallbackPairs = useRef([
+    {
+      viewabilityConfig: {
+        itemVisiblePercentThreshold: 50,
+      },
+      onViewableItemsChanged,
+    },
+  ]);
 
   return (
-    <SafeAreaView
-      onLayout={(e): void => {
-        setLayoutWidth(e.nativeEvent.layout.width);
-        scrollToMiddleCalendar();
-      }}
-      style={styles.wrapperContainer}
+    <View
+      style={[
+        css`
+          width: ${width + 'px'};
+        `,
+        style,
+      ]}
     >
-      <ScrollView
-        contentOffset={{x: layoutWidth, y: 0}}
+      {renderHeader ? renderHeader(currentDate) : null}
+      {!renderHeader ? (
+        <MonthHeader
+          date={currentDate}
+          iconLeft={headerIconLeft}
+          iconRight={headerIconRight}
+          onChange={(monthDate: Date) => {
+            setCurrentDate(monthDate);
+            flatListRef.current?.scrollToIndex({index: 1, animated: false});
+            onChangeMonth?.(monthDate);
+          }}
+          styles={styles?.header}
+        />
+      ) : null}
+
+      {renderWeekday ? renderWeekday(currentDate) : null}
+      {!renderWeekday ? (
+        <WeekdayItem locale={locale} styles={styles?.weekday} width={width} />
+      ) : null}
+      <FlatList
+        data={dates}
         horizontal
-        onMomentumScrollEnd={scrollEffect}
+        keyExtractor={(_, i) => `calendar-${i}`}
+        onScrollToIndexFailed={() => {
+          const wait = new Promise((resolve) => setTimeout(resolve, 500));
+          wait.then(() => {
+            flatListRef.current?.scrollToIndex({index: 1, animated: false});
+          });
+        }}
         pagingEnabled
-        ref={scrollRef}
+        ref={flatListRef}
+        renderItem={({item}) => (
+          <CalendarItem
+            events={events}
+            onDatePress={(selectedDateObj) => {
+              onSelectDate?.(selectedDateObj.date);
+              setSelectedDateObject(selectedDateObj);
+
+              if (selectedDateObj.isNextMonth || selectedDateObj.isPrevMonth) {
+                setCurrentDate(selectedDateObj.date);
+                flatListRef.current?.scrollToIndex({index: 1, animated: false});
+              }
+            }}
+            dateObjects={item}
+            width={width}
+            selectedDateObject={selectedDateObject}
+            showNextDates={showNextDates}
+            showPrevDates={showPrevDates}
+            renderDate={renderDate}
+            styles={styles?.date}
+          />
+        )}
         scrollEventThrottle={16}
-      >
-        {renderCalendars()}
-      </ScrollView>
-    </SafeAreaView>
+        onScrollEndDrag={() => {
+          if (index !== 1) {
+            setCurrentDate(
+              index === 0
+                ? subMonths(currentDate, 1)
+                : addMonths(currentDate, 1),
+            );
+            flatListRef.current?.scrollToIndex({index: 1, animated: false});
+          }
+        }}
+        // https://stackoverflow.com/a/60320726/8841562
+        showsHorizontalScrollIndicator={false}
+        viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
+      />
+    </View>
   );
 }
 
diff --git a/packages/CalendarCarousel/package.json b/packages/CalendarCarousel/package.json
index 351f8143..fb9c2ed4 100644
--- a/packages/CalendarCarousel/package.json
+++ b/packages/CalendarCarousel/package.json
@@ -23,8 +23,8 @@
   },
   "homepage": "https://github.com/dooboolab-community/dooboo-ui#readme",
   "dependencies": {
-    "dooboolab-welcome": "^1.3.2",
-    "intl": "^1.2.5"
+    "date-fns": "^2.30.0",
+    "dooboolab-welcome": "^1.3.2"
   },
   "devDependencies": {
     "@emotion/native": "^11.0.0",
@@ -32,11 +32,12 @@
     "typescript": "^5.0.0"
   },
   "peerDependencies": {
-    "react": ">=16.9",
-    "react-native": ">=0.58",
     "@dooboo-ui/theme": ">=0.9.5",
+    "@emotion/native": ">=11",
     "@emotion/react": ">=11",
-    "@emotion/native": ">=11"
+    "react": ">=16.9",
+    "react-native": ">=0.58",
+    "date-fns": "*"
   },
   "publishConfig": {
     "access": "public",
@@ -49,4 +50,4 @@
     "dooboo-ui/native",
     "dooboolab"
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/CalendarCarousel/utils.ts b/packages/CalendarCarousel/utils.ts
new file mode 100644
index 00000000..c64bb2e2
--- /dev/null
+++ b/packages/CalendarCarousel/utils.ts
@@ -0,0 +1,89 @@
+import {
+  addDays,
+  addMonths,
+  eachDayOfInterval,
+  endOfMonth,
+  getDay,
+  isSaturday,
+  isSunday,
+  startOfMonth,
+  subDays,
+  subMonths,
+} from 'date-fns';
+
+import type {DateObject} from './CalendarItem';
+
+// Get dates in single month
+function getDatesWithDate(date: Date = new Date()): DateObject[] {
+  const startOfMonthDate = startOfMonth(date);
+  const endOfMonthDate = endOfMonth(date);
+
+  const firstWeekday = getDay(startOfMonthDate);
+  const lastWeekday = getDay(endOfMonthDate);
+
+  let prevDates: DateObject[] = [];
+  if (!isSunday(startOfMonthDate)) {
+    for (let idx = 0; idx < firstWeekday; idx++) {
+      prevDates.unshift({
+        date: subDays(startOfMonthDate, idx + 1),
+        isPrevMonth: true,
+      });
+    }
+  }
+
+  let nextDates: DateObject[] = [];
+  if (!isSaturday(endOfMonthDate)) {
+    for (let idx = 1; idx <= 6 - lastWeekday; idx++) {
+      nextDates.push({
+        date: addDays(endOfMonthDate, idx),
+        isNextMonth: true,
+      });
+    }
+  }
+
+  const dates = eachDayOfInterval({
+    start: startOfMonthDate,
+    end: endOfMonthDate,
+  }).map((el) => ({date: el}));
+
+  return [...prevDates, ...dates, ...nextDates];
+}
+
+// Get dates in 3 months (prev, current, next)
+export function getDatesInMonths({
+  year = new Date().getFullYear(),
+  month = new Date().getMonth(),
+}: {
+  year?: number;
+  month?: number;
+}): [DateObject[], DateObject[], DateObject[]] {
+  const currentDate = new Date(year, month, 1);
+
+  const prevMonthDates = getDatesWithDate(subMonths(currentDate, 1));
+  const currentMonthDates = getDatesWithDate(currentDate);
+  const nextMonthDates = getDatesWithDate(addMonths(currentDate, 1));
+
+  return [prevMonthDates, currentMonthDates, nextMonthDates];
+}
+
+export function getPreviousMonth(date: Date): Date {
+  const month = date.getMonth();
+  const year = date.getFullYear();
+
+  if (month === 1) {
+    return new Date(year - 1, 12, 10);
+  } else {
+    return new Date(year, month - 1, 10);
+  }
+}
+
+export function getNextMonth(date: Date): Date {
+  const month = date.getMonth();
+  const year = date.getFullYear();
+
+  if (month === 12) {
+    return new Date(year + 1, 1, 10);
+  } else {
+    return new Date(year, month + 1, 10);
+  }
+}
diff --git a/packages/__tests__/CalendarCarousel.test.tsx b/packages/__tests__/CalendarCarousel.test.tsx
index d1c7d3ba..f42164e3 100644
--- a/packages/__tests__/CalendarCarousel.test.tsx
+++ b/packages/__tests__/CalendarCarousel.test.tsx
@@ -1,20 +1,168 @@
-import 'react-native';
+import '@testing-library/jest-native/extend-expect';
 
-// import Calendar from '../CalendarCarousel';
-// import {createComponent} from '../../test/testUtils';
-// import renderer from 'react-test-renderer';
+import type {ComponentProps} from 'react';
+import React from 'react';
+import type {TextStyle} from 'react-native';
+import {Text} from 'react-native';
+import type {RenderAPI} from '@testing-library/react-native';
+import {fireEvent, render, within} from '@testing-library/react-native';
+import {ko} from 'date-fns/locale';
 
-// let props: any;
+import {createComponent, createTestProps} from '../../test/testUtils';
+import CalendarCarousel from '../CalendarCarousel';
 
-// const component = (): JSX.Element => {
-//   return <Calendar {...props} />;
-// };
+let props: ComponentProps<typeof CalendarCarousel>;
+let component: JSX.Element;
+let testingLib: RenderAPI;
 
-describe('[Calendar]', () => {
-  it('should render without crashing', () => {
-    expect(1).toBeTruthy();
-    // const rendered = renderer.create(createComponent(component()));
+describe('[Calendar] render test', () => {
+  it('renders without crashing', () => {
+    props = createTestProps({});
+    component = createComponent(<CalendarCarousel {...props} />);
+    testingLib = render(component);
 
-    // expect(rendered).toBeTruthy();
+    const json = testingLib.toJSON();
+    expect(json).toBeTruthy();
+  });
+});
+
+describe('[Calendar-WeekdayItem] render', () => {
+  it('change with ko locale', () => {
+    props = createTestProps({locale: ko});
+    component = createComponent(<CalendarCarousel {...props} />);
+    testingLib = render(component);
+
+    const json = testingLib.toJSON();
+    expect(json).toBeTruthy();
+  });
+});
+
+describe('[Calendar-MonthHeader] render', () => {
+  it('renders without crashing', () => {
+    const today = new Date();
+
+    props = createTestProps({});
+    component = createComponent(<CalendarCarousel {...props} />);
+    testingLib = render(component);
+
+    const monthHeader = testingLib.getByTestId('month-header-title');
+
+    const renderedText = within(monthHeader).getByText(
+      `${today.getFullYear()}년 ${today.getMonth() + 1}월`,
+    );
+
+    expect(renderedText).toBeTruthy();
+  });
+
+  it('should render the correct previous month when the previous button is clicked', () => {
+    const today = new Date();
+
+    props = createTestProps({});
+    component = createComponent(<CalendarCarousel {...props} />);
+    testingLib = render(component);
+
+    const monthHeaderPrevBtn = testingLib.getByTestId('month-header-prev-btn');
+    fireEvent.press(monthHeaderPrevBtn);
+
+    const monthHeaderLabel = testingLib.getByTestId('month-header-title');
+
+    const renderedText = within(monthHeaderLabel).getByText(
+      `${today.getFullYear()}년 ${
+        today.getMonth() === 0 ? 12 : today.getMonth()
+      }월`,
+    );
+
+    expect(renderedText).toBeTruthy();
+  });
+
+  it('render MonthHeader with another component', () => {
+    props = createTestProps({
+      renderHeader: (value: Date) => (
+        <Text testID="test-render-header">{value.toString()}</Text>
+      ),
+    });
+
+    component = createComponent(<CalendarCarousel {...props} />);
+    testingLib = render(component);
+
+    const changeHeader = testingLib.getByTestId('test-render-header');
+    expect(changeHeader).toBeTruthy();
+  });
+});
+
+describe('[Calendar-CalendarItem] render', () => {
+  it('should hide prev date item', () => {
+    props = createTestProps({showPrevDates: false});
+    component = createComponent(<CalendarCarousel {...props} />);
+    testingLib = render(component);
+
+    const prevDates = testingLib.queryAllByTestId('prev-dateItem');
+
+    expect(prevDates.length).toBe(0);
+  });
+
+  it('should hide next date item', () => {
+    props = createTestProps({showNextPrevDates: false});
+    component = createComponent(<CalendarCarousel {...props} />);
+    testingLib = render(component);
+
+    const nextDates = testingLib.queryAllByTestId('next-dateItem');
+
+    expect(nextDates.length).toBe(0);
+  });
+});
+
+describe('[Calendar-style] render', () => {
+  it('check if the styles of the MonthHeader component have been updated', () => {
+    props = createTestProps({
+      styles: {
+        header: {text: {fontSize: 27}},
+      },
+    });
+
+    component = createComponent(<CalendarCarousel {...props} />);
+    testingLib = render(component);
+
+    const {getByTestId} = testingLib;
+    const monthHeaderLabel = getByTestId('month-header-title');
+    const expectedStyle: TextStyle = {fontSize: 27};
+
+    expect(monthHeaderLabel).toHaveStyle(expectedStyle);
+  });
+
+  it('check if the styles of the WeekDayItem component have been updated', () => {
+    props = createTestProps({
+      styles: {
+        weekday: {
+          container: {backgroundColor: 'red'},
+        },
+      },
+    });
+
+    component = createComponent(<CalendarCarousel {...props} />);
+    testingLib = render(component);
+
+    const {queryAllByTestId} = testingLib;
+    const weekdayItem = queryAllByTestId('weekday')[0];
+    const expectedStyles = {backgroundColor: 'red'};
+
+    expect(weekdayItem).toHaveStyle(expectedStyles);
+  });
+
+  it('check if the styles of the DateItem component have been updated', () => {
+    props = createTestProps({
+      styles: {
+        date: {container: {backgroundColor: 'red'}},
+      },
+    });
+
+    component = createComponent(<CalendarCarousel {...props} />);
+    testingLib = render(component);
+
+    const {queryAllByTestId} = testingLib;
+    const dateItem = queryAllByTestId('dateItem')[0];
+    const expectedStyles = {backgroundColor: 'red'};
+
+    expect(dateItem).toHaveStyle(expectedStyles);
   });
 });
diff --git a/stories/packages/CalendarCarousel.stories.tsx b/stories/packages/CalendarCarousel.stories.tsx
index e3105079..674fae2f 100644
--- a/stories/packages/CalendarCarousel.stories.tsx
+++ b/stories/packages/CalendarCarousel.stories.tsx
@@ -1,6 +1,3 @@
-import 'intl';
-import 'intl/locale-data/jsonp/en';
-
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import {withActions} from '@storybook/addon-actions';
diff --git a/stories/packages/CalendarCarouselStories/CalendarCarouselBasicStory.tsx b/stories/packages/CalendarCarouselStories/CalendarCarouselBasicStory.tsx
index fc3c02c8..3ef26825 100644
--- a/stories/packages/CalendarCarouselStories/CalendarCarouselBasicStory.tsx
+++ b/stories/packages/CalendarCarouselStories/CalendarCarouselBasicStory.tsx
@@ -1,50 +1,58 @@
-import 'intl';
-import 'intl/locale-data/jsonp/en';
-
 // Caveat: Expo web needs React to be imported
-import React, {useState} from 'react';
-import styled from '@emotion/native';
+import React from 'react';
+import {useTheme} from '@dooboo-ui/theme';
+import styled, {css} from '@emotion/native';
+import {ko} from 'date-fns/locale';
 
-import CalendarCarousel from '../../../packages/CalendarCarousel/lib';
+import {Icon} from '../../../main/uis/Icon';
+import CalendarCarousel from '../../../packages/CalendarCarousel';
 
 const Container = styled.SafeAreaView`
   flex: 1;
   align-self: stretch;
-  justify-content: center;
+
   align-items: center;
 `;
 
-const date = new Date();
-
 function CalendarCarouselBasicStory(): JSX.Element {
-  const [currentDate, setCurrentDate] = useState<Date>(date);
-  const [selectedDate, setSelectedDate] = useState<Date>();
-  const monthFormatter = new Intl.DateTimeFormat('default', {month: 'long'});
-
-  const markedDayEvents = [
-    {
-      selectedEventDate: new Date(2020, 7, 7),
-      events: 'Walk Dog with Neighbor',
-    },
-    {
-      selectedEventDate: new Date(2020, 7, 17),
-      events: 'Birthday Party for Jessie',
-    },
-    {
-      selectedEventDate: new Date(2020, 7, 27),
-      events: 'Cooking for Mom',
-    },
-  ];
+  const {theme} = useTheme();
+
+  //TODO: Add more detailed example for CalendarCarousel
+  // const [currentDate, setCurrentDate] = useState<Date>(date);
+  // const [selectedDate, setSelectedDate] = useState<Date>();
+  // const monthFormatter = new Intl.DateTimeFormat('default', {month: 'long'});
+  // const markedDayEvents = [
+  //   {
+  //     selectedEventDate: new Date(2020, 7, 7),
+  //     events: 'Walk Dog with Neighbor',
+  //   },
+  //   {
+  //     selectedEventDate: new Date(2020, 7, 17),
+  //     events: 'Birthday Party for Jessie',
+  //   },
+  //   {
+  //     selectedEventDate: new Date(2020, 7, 27),
+  //     events: 'Cooking for Mom',
+  //   },
+  // ];
 
   return (
     <Container>
       <CalendarCarousel
-        date={currentDate}
-        markedDayEvents={markedDayEvents}
-        monthFormatter={monthFormatter}
-        onDateChanged={(dateProp: Date): void => setCurrentDate(dateProp)}
-        selectDate={(dateProp: Date): void => setSelectedDate(dateProp)}
-        selectedDate={selectedDate}
+        headerIconLeft={
+          <Icon color={theme.text.basic} name="ArrowCircleLeft" size={18} />
+        }
+        headerIconRight={
+          <Icon color={theme.text.basic} name="ArrowCircleRight" size={18} />
+        }
+        initialSelectedDate={new Date(2024, 11, 4)}
+        locale={ko}
+        showNextDates={true}
+        showPrevDates={true}
+        style={css`
+          margin-top: 80px;
+        `}
+        width={350}
       />
     </Container>
   );
diff --git a/yarn.lock b/yarn.lock
index d699da07..038994cb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1549,6 +1549,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.21.0":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
+  integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.4.4", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6":
   version "7.23.8"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.8.tgz#8ee6fe1ac47add7122902f257b8ddf55c898f650"
@@ -8093,6 +8100,13 @@ data-urls@^3.0.2:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^11.0.0"
 
+date-fns@^2.30.0:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 dateformat@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
@@ -11146,11 +11160,6 @@ interpret@^2.2.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9"
   integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
 
-intl@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/intl/-/intl-1.2.5.tgz#82244a2190c4e419f8371f5aa34daa3420e2abde"
-  integrity sha512-rK0KcPHeBFBcqsErKSpvZnrOmWOj+EmDkyJ57e90YWaQNqbcivcqmKDlHEeNprDWOsKzPsh1BfSpPQdDvclHVw==
-
 invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"