diff --git a/src/addon/calendar/components/calendar/addon-calendar-calendar.html b/src/addon/calendar/components/calendar/addon-calendar-calendar.html
index 5872e86d0..073811937 100644
--- a/src/addon/calendar/components/calendar/addon-calendar-calendar.html
+++ b/src/addon/calendar/components/calendar/addon-calendar-calendar.html
@@ -38,8 +38,8 @@
         <!-- Weeks. -->
         <ion-row *ngFor="let week of weeks" class="addon-calendar-week">
             <ion-col *ngFor="let value of week.prepadding" class="dayblank addon-calendar-day"></ion-col> <!-- Empty slots (first week). -->
-            <ion-col text-center *ngFor="let day of week.days" [ngClass]='{"hasevents": day.hasevents, "today": day.istoday, "weekend": day.isweekend, "duration_finish": day.haslastdayofevent}' class="addon-calendar-day">
-                <p class="addon-calendar-day-number" (click)="dayClicked(day.mday)">{{ day.mday }}</p>
+            <ion-col text-center *ngFor="let day of week.days"  (click)="dayClicked(day.mday)" [ngClass]='{"hasevents": day.hasevents, "today": day.istoday, "weekend": day.isweekend, "duration_finish": day.haslastdayofevent}' class="addon-calendar-day">
+                <p class="addon-calendar-day-number">{{ day.mday }}</p>
 
                 <!-- In phone, display some dots to indicate the type of events. -->
                 <p class="hidden-tablet addon-calendar-dot-types"><span *ngFor="let type of day.calendareventtypes" class="calendar_event_type calendar_event_{{type}}"></span></p>
@@ -47,7 +47,7 @@
                 <!-- In tablet, display list of events. -->
                 <div class="hidden-phone addon-calendar-day-events">
                     <ng-container *ngFor="let event of day.filteredEvents | slice:0:4; let index = index">
-                        <p *ngIf="index < 3 || day.filteredEvents.length == 4" class="addon-calendar-event" (click)="eventClicked(event)">
+                        <p *ngIf="index < 3 || day.filteredEvents.length == 4" class="addon-calendar-event" (click)="eventClicked(event, $event)">
                             <span class="calendar_event_type calendar_event_{{event.formattedType}}"></span>
                             <ion-icon *ngIf="event.offline && !event.deleted" name="time"></ion-icon>
                             <ion-icon *ngIf="event.deleted" name="trash"></ion-icon>
@@ -56,7 +56,7 @@
                             <span class="addon-calendar-event-name">{{event.name}}</span>
                         </p>
                     </ng-container>
-                    <p *ngIf="day.filteredEvents.length > 4" class="addon-calendar-day-more" (click)="dayClicked(day.mday)"><b>{{ 'core.nummore' | translate:{$a: day.filteredEvents.length - 3} }}</b></p>
+                    <p *ngIf="day.filteredEvents.length > 4" class="addon-calendar-day-more"><b>{{ 'core.nummore' | translate:{$a: day.filteredEvents.length - 3} }}</b></p>
                 </div>
             </ion-col>
             <ion-col *ngFor="let value of week.postpadding" class="dayblank addon-calendar-day"></ion-col> <!-- Empty slots (last week). -->
diff --git a/src/addon/calendar/components/calendar/calendar.ts b/src/addon/calendar/components/calendar/calendar.ts
index dcdb412b1..5507a389f 100644
--- a/src/addon/calendar/components/calendar/calendar.ts
+++ b/src/addon/calendar/components/calendar/calendar.ts
@@ -305,10 +305,12 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
     /**
      * An event was clicked.
      *
-     * @param {any} event Event.
+     * @param {any} calendarEvent Calendar event..
+     * @param {MouseEvent} event Mouse event.
      */
-    eventClicked(event: any): void {
-        this.onEventClicked.emit(event.id);
+    eventClicked(calendarEvent: any, event: MouseEvent): void {
+        this.onEventClicked.emit(calendarEvent.id);
+        event.stopPropagation();
     }
 
     /**