diff --git a/src/addons/calendar/calendar-common.scss b/src/addons/calendar/calendar-common.scss
index 3691d26f2..3746e7872 100644
--- a/src/addons/calendar/calendar-common.scss
+++ b/src/addons/calendar/calendar-common.scss
@@ -9,6 +9,12 @@
             color: white;
             border-radius: 50%;
             padding: 0.7rem;
+            --margin-vertical: 12px;
+            --margin-end: 12px;
+            margin-top: var(--margin-vertical);
+            margin-bottom: var(--margin-vertical);
+            @include margin-horizontal(null, var(--margin-end));
+
         }
 
         @each $category, $value in $calendar-event-category-colors {
diff --git a/src/addons/calendar/components/calendar/calendar.ts b/src/addons/calendar/components/calendar/calendar.ts
index 64cd0807d..4f984d83c 100644
--- a/src/addons/calendar/components/calendar/calendar.ts
+++ b/src/addons/calendar/components/calendar/calendar.ts
@@ -496,7 +496,6 @@ class AddonCalendarMonthSlidesItemsManagerSource extends CoreSwipeSlidesDynamicI
         const weeks = result.weeks as AddonCalendarWeek[];
         const currentDay = new Date().getDate();
         const currentTime = CoreTimeUtils.timestamp();
-        let isPast = true;
 
         const preloadedMonth: PreloadedMonth = {
             ...month,
@@ -523,8 +522,7 @@ class AddonCalendarMonthSlidesItemsManagerSource extends CoreSwipeSlidesDynamicI
 
                 if (preloadedMonth.isCurrentMonth) {
                     day.istoday = day.mday == currentDay;
-                    day.ispast = isPast && !day.istoday;
-                    isPast = day.ispast;
+                    day.ispast = preloadedMonth.isPastMonth || day.mday < currentDay;
 
                     if (day.istoday) {
                         day.eventsFormated?.forEach((event) => {