diff --git a/src/addon/calendar/components/calendar/addon-calendar-calendar.html b/src/addon/calendar/components/calendar/addon-calendar-calendar.html
index 5872e86d0..bf5c29422 100644
--- a/src/addon/calendar/components/calendar/addon-calendar-calendar.html
+++ b/src/addon/calendar/components/calendar/addon-calendar-calendar.html
@@ -1,6 +1,6 @@
 
 <!-- Add buttons to the nav bar. -->
-<core-navbar-buttons end>
+<core-navbar-buttons end prepend>
     <button [hidden]="!canNavigate || isCurrentMonth || !displayNavButtons" ion-button icon-only clear (click)="goToCurrentMonth()">
         <core-icon  name="fa-calendar-times-o"></core-icon>
     </button>
@@ -8,8 +8,8 @@
 
 <core-loading [hideUntil]="loaded" class="core-loading-center">
     <!-- Period name and arrows to navigate. -->
-    <ion-grid padding-top>
-        <ion-row>
+    <ion-grid no-padding class="addon-calendar-navigation">
+        <ion-row align-items-center>
             <ion-col text-start *ngIf="canNavigate">
                 <a ion-button icon-only clear (click)="loadPrevious()" [title]="'core.previous' | translate">
                     <ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
@@ -31,15 +31,15 @@
         <!-- List of days. -->
         <ion-row>
             <ion-col text-center *ngFor="let day of weekDays" class="addon-calendar-weekday">
-                <p>{{ day.shortname | translate }}</p>
+                {{ day.shortname | translate }}
             </ion-col>
         </ion-row>
 
         <!-- 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.scss b/src/addon/calendar/components/calendar/calendar.scss
index f96cba14d..278e56bcf 100644
--- a/src/addon/calendar/components/calendar/calendar.scss
+++ b/src/addon/calendar/components/calendar/calendar.scss
@@ -10,6 +10,10 @@ $calendar-border-color: $gray !default;
 
 ion-app.app-root addon-calendar-calendar {
 
+    .addon-calendar-navigation {
+        @include padding(5px, 10px, null, 10px);
+    }
+
     .addon-calendar-months {
         background-color: white;
         padding: 0;
@@ -19,7 +23,7 @@ ion-app.app-root addon-calendar-calendar {
         border-bottom: 1px solid $calendar-border-color;
         @include border-end(1px, solid, $calendar-border-color);
         overflow: hidden;
-        min-height: 70px;
+        min-height: 60px;
 
         &:first-child {
             @include padding(null, null, null, 10px);
@@ -64,7 +68,7 @@ ion-app.app-root addon-calendar-calendar {
         }
 
         .addon-calendar-dot-types {
-            @include margin(0.6em, null, 0.6em, null);
+            margin: 0;
         }
     }
 
@@ -125,6 +129,7 @@ ion-app.app-root addon-calendar-calendar {
         @include margin-horizontal(1px, 1px);
         width: 16px;
         height: 16px;
-        display: inline;
+        display: inline-block;
+        vertical-align: middle;
     }
 }
\ No newline at end of file
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();
     }
 
     /**
diff --git a/src/addon/calendar/pages/day/day.html b/src/addon/calendar/pages/day/day.html
index 0ef39ef72..cec0955ac 100644
--- a/src/addon/calendar/pages/day/day.html
+++ b/src/addon/calendar/pages/day/day.html
@@ -2,12 +2,12 @@
     <ion-navbar core-back-button>
         <ion-title>{{ 'addon.calendar.calendarevents' | translate }}</ion-title>
         <ion-buttons end>
-            <button *ngIf="courses && courses.length" ion-button icon-only (click)="openCourseFilter($event)" [attr.aria-label]="'core.courses.filter' | translate">
-                <ion-icon name="funnel"></ion-icon>
-            </button>
             <button *ngIf="!isCurrentDay" ion-button icon-only clear (click)="goToCurrentDay()">
                 <core-icon name="fa-calendar-times-o"></core-icon>
             </button>
+            <button *ngIf="courses && courses.length" ion-button icon-only (click)="openCourseFilter($event)" [attr.aria-label]="'core.courses.filter' | translate">
+                <ion-icon name="funnel"></ion-icon>
+            </button>
             <core-context-menu>
                 <core-context-menu-item [hidden]="!loaded || !hasOffline || !isOnline"  [priority]="400" [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(null, $event, true)" [iconAction]="syncIcon" [closeOnClick]="false"></core-context-menu-item>
             </core-context-menu>
@@ -38,37 +38,39 @@
         </ion-row>
     </ion-grid>
 
-    <!-- There is data to be synchronized -->
-    <ion-card class="core-warning-card" icon-start *ngIf="hasOffline">
-        <ion-icon name="warning"></ion-icon> {{ 'core.hasdatatosync' | translate:{$a: 'core.day' | translate} }}
-    </ion-card>
+    <core-loading [hideUntil]="loaded">
+        <!-- There is data to be synchronized -->
+        <ion-card class="core-warning-card" icon-start *ngIf="hasOffline">
+            <ion-icon name="warning"></ion-icon> {{ 'core.hasdatatosync' | translate:{$a: 'core.day' | translate} }}
+        </ion-card>
 
-    <core-empty-box *ngIf="!filteredEvents || !filteredEvents.length" icon="calendar" [message]="'addon.calendar.noevents' | translate">
-    </core-empty-box>
+        <core-empty-box *ngIf="!filteredEvents || !filteredEvents.length" icon="calendar" [message]="'addon.calendar.noevents' | translate">
+        </core-empty-box>
 
-    <ion-list *ngIf="filteredEvents && filteredEvents.length" no-margin>
-        <ng-container *ngFor="let event of filteredEvents">
-            <a ion-item text-wrap [title]="event.name" (click)="gotoEvent(event.id)" [class.core-split-item-selected]="event.id == eventId">
-                <img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" item-start class="core-module-icon">
-                <core-icon *ngIf="event.icon && !event.moduleIcon" [name]="event.icon" item-start></core-icon>
-                <h2><core-format-text [text]="event.name"></core-format-text></h2>
-                <p><core-format-text [text]="event.formattedtime"></core-format-text></p>
-                <ion-note *ngIf="event.offline && !event.deleted" item-end>
-                    <ion-icon name="time"></ion-icon>
-                    <span text-wrap>{{ 'core.notsent' | translate }}</span>
-                </ion-note>
-                <ion-note *ngIf="event.deleted" item-end>
-                    <ion-icon name="trash"></ion-icon>
-                    <span text-wrap>{{ 'core.deletedoffline' | translate }}</span>
-                </ion-note>
-            </a>
-        </ng-container>
-    </ion-list>
+        <ion-list *ngIf="filteredEvents && filteredEvents.length" no-margin>
+            <ng-container *ngFor="let event of filteredEvents">
+                <a ion-item text-wrap [title]="event.name" (click)="gotoEvent(event.id)">
+                    <img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" item-start class="core-module-icon">
+                    <core-icon *ngIf="event.icon && !event.moduleIcon" [name]="event.icon" item-start></core-icon>
+                    <h2><core-format-text [text]="event.name"></core-format-text></h2>
+                    <p><core-format-text [text]="event.formattedtime"></core-format-text></p>
+                    <ion-note *ngIf="event.offline && !event.deleted" item-end>
+                        <ion-icon name="time"></ion-icon>
+                        <span text-wrap>{{ 'core.notsent' | translate }}</span>
+                    </ion-note>
+                    <ion-note *ngIf="event.deleted" item-end>
+                        <ion-icon name="trash"></ion-icon>
+                        <span text-wrap>{{ 'core.deletedoffline' | translate }}</span>
+                    </ion-note>
+                </a>
+            </ng-container>
+        </ion-list>
 
-    <!-- Create a calendar event. -->
-    <ion-fab core-fab bottom end *ngIf="canCreate">
-        <button ion-fab (click)="openEdit()" [attr.aria-label]="'addon.calendar.newevent' | translate">
-            <ion-icon name="add"></ion-icon>
-        </button>
-    </ion-fab>
+        <!-- Create a calendar event. -->
+        <ion-fab core-fab bottom end *ngIf="canCreate">
+            <button ion-fab (click)="openEdit()" [attr.aria-label]="'addon.calendar.newevent' | translate">
+                <ion-icon name="add"></ion-icon>
+            </button>
+        </ion-fab>
+    </core-loading>
 </ion-content>
diff --git a/src/addon/calendar/providers/helper.ts b/src/addon/calendar/providers/helper.ts
index 1a83ac4fe..00005972a 100644
--- a/src/addon/calendar/providers/helper.ts
+++ b/src/addon/calendar/providers/helper.ts
@@ -274,7 +274,7 @@ export class AddonCalendarHelperProvider {
         }
 
         // Show the event if it is from site home or if it matches the selected course.
-        return event.courseid === this.sitesProvider.getSiteHomeId() || event.courseid == courseId;
+        return event.course && (event.course.id == this.sitesProvider.getCurrentSiteHomeId() || event.course.id == courseId);
     }
 
     /**
diff --git a/src/components/navbar-buttons/navbar-buttons.ts b/src/components/navbar-buttons/navbar-buttons.ts
index 7f4ae239b..c38931322 100644
--- a/src/components/navbar-buttons/navbar-buttons.ts
+++ b/src/components/navbar-buttons/navbar-buttons.ts
@@ -25,6 +25,8 @@ import { CoreContextMenuComponent } from '../context-menu/context-menu';
  * If this component indicates a position (start/end), the buttons will only be added if the header has some buttons in that
  * position. If no start/end is specified, then the buttons will be added to the first <ion-buttons> found in the header.
  *
+ * If this component has a "prepend" attribute, the buttons will be added before other existing buttons in the header.
+ *
  * You can use the [hidden] input to hide all the inner buttons if a certain condition is met.
  *
  * IMPORTANT: Do not use *ngIf in the buttons inside this component, it can cause problems. Please use [hidden] instead.
@@ -92,7 +94,8 @@ export class CoreNavBarButtonsComponent implements OnInit, OnDestroy {
                 if (buttonsContainer) {
                     this.mergeContextMenus(buttonsContainer);
 
-                    this.movedChildren = this.domUtils.moveChildren(this.element, buttonsContainer);
+                    const prepend = this.element.hasAttribute('prepend');
+                    this.movedChildren = this.domUtils.moveChildren(this.element, buttonsContainer, prepend);
                     this.showHideAllElements();
 
                 } else {
diff --git a/src/providers/utils/dom.ts b/src/providers/utils/dom.ts
index d67c7fb90..e0a99c94c 100644
--- a/src/providers/utils/dom.ts
+++ b/src/providers/utils/dom.ts
@@ -795,16 +795,18 @@ export class CoreDomUtilsProvider {
      *
      * @param {HTMLElement} oldParent The old parent.
      * @param {HTMLElement} newParent The new parent.
+     * @param {boolean} [prepend] If true, adds the children to the beginning of the new parent.
      * @return {Node[]} List of moved children.
      */
-    moveChildren(oldParent: HTMLElement, newParent: HTMLElement): Node[] {
+    moveChildren(oldParent: HTMLElement, newParent: HTMLElement, prepend?: boolean): Node[] {
         const movedChildren: Node[] = [];
+        const referenceNode = prepend ? newParent.firstChild : null;
 
         while (oldParent.childNodes.length > 0) {
             const child = oldParent.childNodes[0];
             movedChildren.push(child);
 
-            newParent.appendChild(child);
+            newParent.insertBefore(child, referenceNode);
         }
 
         return movedChildren;