diff --git a/components/calendar/mediaExample.ts b/components/calendar/mediaExample.ts
new file mode 100644
index 000000000..acdbc0352
--- /dev/null
+++ b/components/calendar/mediaExample.ts
@@ -0,0 +1,408 @@
+export const medias = [
+  {
+    title: 'Doctor Strange in the Multiverse of Madness',
+    originalTitle: 'Doctor Strange in the Multiverse of Madness',
+    originalLanguage: {
+      id: 1,
+      name: 'English',
+    },
+    alternateTitles: [
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doctor Strange 2',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 1,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Доктор Стрэндж 2',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 11,
+          name: 'Russian',
+        },
+        id: 2,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doutor Estranho 2',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 3,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doctor Strange v multivesmíre šialenstva',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 4,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doctor Strange 2: El multiverso de la locura',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 3,
+          name: 'Spanish',
+        },
+        id: 5,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doktor Strange Deliliğin Çoklu Evreninde',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 17,
+          name: 'Turkish',
+        },
+        id: 6,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'মহাবিশ্বের পাগলামিতে অদ্ভুত চিকিৎসক',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 7,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'จอมเวทย์มหากาฬ ในมัลติเวิร์สมหาภัย',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 28,
+          name: 'Thai',
+        },
+        id: 8,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: "Marvel Studios' Doctor Strange in the Multiverse of Madness",
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 9,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doctor Strange en el Multiverso de la Locura de Marvel Studios',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 3,
+          name: 'Spanish',
+        },
+        id: 10,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doktors Streindžs neprāta multivisumā',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 11,
+      },
+    ],
+    secondaryYearSourceId: 0,
+    sortTitle: 'doctor strange in multiverse madness',
+    sizeOnDisk: 0,
+    status: 'announced',
+    overview:
+      'Doctor Strange, with the help of mystical allies both old and new, traverses the mind-bending and dangerous alternate realities of the Multiverse to confront a mysterious new adversary.',
+    inCinemas: '2022-05-04T00:00:00Z',
+    images: [
+      {
+        coverType: 'poster',
+        url: 'https://image.tmdb.org/t/p/original/wRnbWt44nKjsFPrqSmwYki5vZtF.jpg',
+      },
+      {
+        coverType: 'fanart',
+        url: 'https://image.tmdb.org/t/p/original/ndCSoasjIZAMMDIuMxuGnNWu4DU.jpg',
+      },
+    ],
+    website: 'https://www.marvel.com/movies/doctor-strange-in-the-multiverse-of-madness',
+    year: 2022,
+    hasFile: false,
+    youTubeTrailerId: 'aWzlQ2N6qqg',
+    studio: 'Marvel Studios',
+    path: '/config/Doctor Strange in the Multiverse of Madness (2022)',
+    qualityProfileId: 1,
+    monitored: true,
+    minimumAvailability: 'announced',
+    isAvailable: true,
+    folderName: '/config/Doctor Strange in the Multiverse of Madness (2022)',
+    runtime: 126,
+    cleanTitle: 'doctorstrangeinmultiversemadness',
+    imdbId: 'tt9419884',
+    tmdbId: 453395,
+    titleSlug: '453395',
+    certification: 'PG-13',
+    genres: ['Fantasy', 'Action', 'Adventure'],
+    tags: [],
+    added: '2022-04-29T20:52:33Z',
+    ratings: {
+      tmdb: {
+        votes: 0,
+        value: 0,
+        type: 'user',
+      },
+    },
+    collection: {
+      name: 'Doctor Strange Collection',
+      tmdbId: 618529,
+      images: [],
+    },
+    id: 1,
+  },
+  {
+    title: 'Doctor Strange in the Multiverse of Madness',
+    originalTitle: 'Doctor Strange in the Multiverse of Madness',
+    originalLanguage: {
+      id: 1,
+      name: 'English',
+    },
+    alternateTitles: [
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doctor Strange 2',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 1,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Доктор Стрэндж 2',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 11,
+          name: 'Russian',
+        },
+        id: 2,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doutor Estranho 2',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 3,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doctor Strange v multivesmíre šialenstva',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 4,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doctor Strange 2: El multiverso de la locura',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 3,
+          name: 'Spanish',
+        },
+        id: 5,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doktor Strange Deliliğin Çoklu Evreninde',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 17,
+          name: 'Turkish',
+        },
+        id: 6,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'মহাবিশ্বের পাগলামিতে অদ্ভুত চিকিৎসক',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 7,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'จอมเวทย์มหากาฬ ในมัลติเวิร์สมหาภัย',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 28,
+          name: 'Thai',
+        },
+        id: 8,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: "Marvel Studios' Doctor Strange in the Multiverse of Madness",
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 9,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doctor Strange en el Multiverso de la Locura de Marvel Studios',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 3,
+          name: 'Spanish',
+        },
+        id: 10,
+      },
+      {
+        sourceType: 'tmdb',
+        movieId: 1,
+        title: 'Doktors Streindžs neprāta multivisumā',
+        sourceId: 0,
+        votes: 0,
+        voteCount: 0,
+        language: {
+          id: 1,
+          name: 'English',
+        },
+        id: 11,
+      },
+    ],
+    secondaryYearSourceId: 0,
+    sortTitle: 'doctor strange in multiverse madness',
+    sizeOnDisk: 0,
+    status: 'announced',
+    overview:
+      'Doctor Strange, with the help of mystical allies both old and new, traverses the mind-bending and dangerous alternate realities of the Multiverse to confront a mysterious new adversary.',
+    inCinemas: '2022-05-05T00:00:00Z',
+    images: [
+      {
+        coverType: 'poster',
+        url: 'https://image.tmdb.org/t/p/original/wRnbWt44nKjsFPrqSmwYki5vZtF.jpg',
+      },
+      {
+        coverType: 'fanart',
+        url: 'https://image.tmdb.org/t/p/original/ndCSoasjIZAMMDIuMxuGnNWu4DU.jpg',
+      },
+    ],
+    website: 'https://www.marvel.com/movies/doctor-strange-in-the-multiverse-of-madness',
+    year: 2022,
+    hasFile: false,
+    youTubeTrailerId: 'aWzlQ2N6qqg',
+    studio: 'Marvel Studios',
+    path: '/config/Doctor Strange in the Multiverse of Madness (2022)',
+    qualityProfileId: 1,
+    monitored: true,
+    minimumAvailability: 'announced',
+    isAvailable: true,
+    folderName: '/config/Doctor Strange in the Multiverse of Madness (2022)',
+    runtime: 126,
+    cleanTitle: 'doctorstrangeinmultiversemadness',
+    imdbId: 'tt9419884',
+    tmdbId: 453395,
+    titleSlug: '453395',
+    certification: 'PG-13',
+    genres: ['Fantasy', 'Action', 'Adventure'],
+    tags: [],
+    added: '2022-04-29T20:52:33Z',
+    ratings: {
+      tmdb: {
+        votes: 0,
+        value: 0,
+        type: 'user',
+      },
+    },
+    collection: {
+      name: 'Doctor Strange Collection',
+      tmdbId: 618529,
+      images: [],
+    },
+    id: 2,
+  },
+];