From d57b254f5ed94078788032e36973188b9c915413 Mon Sep 17 00:00:00 2001
From: Georg Ehrke <developer@georgehrke.com>
Date: Tue, 5 May 2020 11:52:07 +0200
Subject: [PATCH] Use nc/dialogs instead of ocp.toast

Signed-off-by: Georg Ehrke <developer@georgehrke.com>
---
 .../CalendarList/CalendarListItem.vue         | 17 +++++++-----
 .../CalendarListItemSharingPublishItem.vue    | 22 +++++++++-------
 .../CalendarListItemSharingShareItem.vue      |  7 +++--
 .../CalendarList/CalendarListNew.vue          | 11 +++++---
 .../CalendarList/PublicCalendarListItem.vue   |  8 ++++--
 .../AppNavigation/EmbedTopNavigation.vue      |  8 ++++--
 src/components/AppNavigation/Settings.vue     | 26 +++++++++++--------
 .../Settings/SettingsImportSection.vue        | 15 +++++++----
 .../Settings/SettingsTimezoneSelect.vue       |  5 +++-
 .../Editor/Invitees/InviteesList.vue          |  8 ++++--
 src/components/Shared/DatePicker.vue          |  7 +++--
 src/main.js                                   |  1 -
 src/utils/illustration.js                     |  2 +-
 src/views/Calendar.vue                        |  8 ++++--
 14 files changed, 95 insertions(+), 50 deletions(-)

diff --git a/src/components/AppNavigation/CalendarList/CalendarListItem.vue b/src/components/AppNavigation/CalendarList/CalendarListItem.vue
index 1756e9453b..bdcc825e59 100644
--- a/src/components/AppNavigation/CalendarList/CalendarListItem.vue
+++ b/src/components/AppNavigation/CalendarList/CalendarListItem.vue
@@ -144,6 +144,11 @@ import ActionText from '@nextcloud/vue/dist/Components/ActionText'
 import AppNavigationIconBullet from '@nextcloud/vue/dist/Components/AppNavigationIconBullet'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import ClickOutside from 'vue-click-outside'
+import {
+	showInfo,
+	showSuccess,
+	showError,
+} from '@nextcloud/dialogs'
 import {
 	generateRemoteUrl,
 } from '@nextcloud/router'
@@ -313,7 +318,7 @@ export default {
 		toggleEnabled() {
 			this.$store.dispatch('toggleCalendarEnabled', { calendar: this.calendar })
 				.catch((error) => {
-					this.$toast.error(this.$t('calendar', 'An error occurred, unable to change visibility of the calendar.'))
+					showError(this.$t('calendar', 'An error occurred, unable to change visibility of the calendar.'))
 					console.error(error)
 				})
 		},
@@ -332,7 +337,7 @@ export default {
 				try {
 					await this.$store.dispatch('deleteCalendar', { calendar: this.calendar })
 				} catch (error) {
-					this.$toast.error(this.$t('calendar', 'An error occurred, unable to delete the calendar.'))
+					showError(this.$t('calendar', 'An error occurred, unable to delete the calendar.'))
 					console.error(error)
 				} finally {
 					clearInterval(this.deleteInterval)
@@ -394,10 +399,10 @@ export default {
 
 			try {
 				await this.$copyText(url)
-				this.$toast.success(this.$t('calendar', 'Calendar link copied to clipboard.'))
+				showSuccess(this.$t('calendar', 'Calendar link copied to clipboard.'))
 			} catch (error) {
 				console.debug(error)
-				this.$toast.error(this.$t('calendar', 'Calendar link could not be copied to clipboard.'))
+				showError(this.$t('calendar', 'Calendar link could not be copied to clipboard.'))
 			}
 		},
 		/**
@@ -432,7 +437,7 @@ export default {
 				this.showRenameInput = false
 				this.showRenameSaving = false
 			} catch (error) {
-				this.$toast(this.$t('calendar', 'An error occurred, unable to rename the calendar.'))
+				showInfo(this.$t('calendar', 'An error occurred, unable to rename the calendar.'))
 				console.error(error)
 
 				this.showRenameLabel = false
@@ -472,7 +477,7 @@ export default {
 				this.showColorInput = false
 				this.showColorSaving = false
 			} catch (error) {
-				this.$toast(this.$t('calendar', 'An error occurred, unable to change the calendar\'s color.'))
+				showInfo(this.$t('calendar', 'An error occurred, unable to change the calendar\'s color.'))
 				console.error(error)
 
 				this.showColorLabel = false
diff --git a/src/components/AppNavigation/CalendarList/CalendarListItemSharingPublishItem.vue b/src/components/AppNavigation/CalendarList/CalendarListItemSharingPublishItem.vue
index b01aa92dcb..42aa1caf81 100644
--- a/src/components/AppNavigation/CalendarList/CalendarListItemSharingPublishItem.vue
+++ b/src/components/AppNavigation/CalendarList/CalendarListItemSharingPublishItem.vue
@@ -145,6 +145,10 @@ import {
 	generateUrl,
 	linkTo,
 } from '@nextcloud/router'
+import {
+	showSuccess,
+	showError,
+} from '@nextcloud/dialogs'
 import HttpClient from '@nextcloud/axios'
 
 export default {
@@ -205,7 +209,7 @@ export default {
 				await this.$store.dispatch('publishCalendar', { calendar: this.calendar })
 			} catch (error) {
 				console.debug(error)
-				this.$toast.error(this.$t('calendar', 'An error occurred, unable to publish calendar.'))
+				showError(this.$t('calendar', 'An error occurred, unable to publish calendar.'))
 			} finally {
 				this.publishingCalendar = false
 			}
@@ -233,7 +237,7 @@ export default {
 				})
 			} catch (error) {
 				console.error(error)
-				this.$toast.error(this.$t('calendar', 'An error occurred, unable to send email.'))
+				showError(this.$t('calendar', 'An error occurred, unable to send email.'))
 			} finally {
 				this.showEMailLabel = true
 				this.showEMailInput = false
@@ -251,10 +255,10 @@ export default {
 			// copy link for calendar to clipboard
 			try {
 				await this.$copyText(url)
-				this.$toast.success(this.$t('calendar', 'Calendar link copied to clipboard.'))
+				showSuccess(this.$t('calendar', 'Calendar link copied to clipboard.'))
 			} catch (error) {
 				console.debug(error)
-				this.$toast.error(this.$t('calendar', 'Calendar link could not be copied to clipboard.'))
+				showError(this.$t('calendar', 'Calendar link could not be copied to clipboard.'))
 			} finally {
 				this.showCopyPublicLinkLabel = true
 				this.showCopyPublicLinkSpinner = false
@@ -279,7 +283,7 @@ export default {
 				this.showCopySubscriptionLinkSuccess = true
 				this.showCopySubscriptionLinkError = false
 
-				this.$toast.success(this.$t('calendar', 'Calendar link copied to clipboard.'))
+				showSuccess(this.$t('calendar', 'Calendar link copied to clipboard.'))
 			} catch (error) {
 				console.debug(error)
 				this.menuOpen = true
@@ -288,7 +292,7 @@ export default {
 				this.showCopySubscriptionLinkSuccess = false
 				this.showCopySubscriptionLinkError = true
 
-				this.$toast.error(this.$t('calendar', 'Calendar link could not be copied to clipboard.'))
+				showError(this.$t('calendar', 'Calendar link could not be copied to clipboard.'))
 			} finally {
 				setTimeout(() => {
 					this.showCopySubscriptionLinkLabel = true
@@ -320,7 +324,7 @@ export default {
 				this.showCopyEmbedCodeLinkSuccess = true
 				this.showCopyEmbedCodeLinkError = false
 
-				this.$toast.success(this.$t('calendar', 'Embed code copied to clipboard.'))
+				showSuccess(this.$t('calendar', 'Embed code copied to clipboard.'))
 			} catch (error) {
 				console.debug(error)
 				this.menuOpen = true
@@ -329,7 +333,7 @@ export default {
 				this.showCopyEmbedCodeLinkSuccess = false
 				this.showCopyEmbedCodeLinkError = true
 
-				this.$toast.error(this.$t('calendar', 'Embed code could not be copied to clipboard.'))
+				showError(this.$t('calendar', 'Embed code could not be copied to clipboard.'))
 			} finally {
 				setTimeout(() => {
 					this.showCopyEmbedCodeLinkLabel = true
@@ -349,7 +353,7 @@ export default {
 			} catch (error) {
 				console.debug(error)
 				this.unpublishingCalendar = false
-				this.$toast.error(this.$t('calendar', 'Unpublishing calendar failed'))
+				showError(this.$t('calendar', 'Unpublishing calendar failed'))
 			}
 		},
 
diff --git a/src/components/AppNavigation/CalendarList/CalendarListItemSharingShareItem.vue b/src/components/AppNavigation/CalendarList/CalendarListItemSharingShareItem.vue
index 9b2b4ed2be..b554205abd 100644
--- a/src/components/AppNavigation/CalendarList/CalendarListItemSharingShareItem.vue
+++ b/src/components/AppNavigation/CalendarList/CalendarListItemSharingShareItem.vue
@@ -53,6 +53,9 @@ import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import {
+	showInfo,
+} from '@nextcloud/dialogs'
 
 export default {
 	name: 'CalendarListItemSharingShareItem',
@@ -98,7 +101,7 @@ export default {
 				this.updatingSharee = false
 			} catch (error) {
 				console.error(error)
-				this.$toast(this.$t('calendar', 'An error occurred, unable to change the unshare the calendar.'))
+				showInfo(this.$t('calendar', 'An error occurred, unable to change the unshare the calendar.'))
 
 				this.updatingSharee = false
 			}
@@ -118,7 +121,7 @@ export default {
 				this.updatingSharee = false
 			} catch (error) {
 				console.error(error)
-				this.$toast(this.$t('calendar', 'An error occurred, unable to change the permission of the share.'))
+				showInfo(this.$t('calendar', 'An error occurred, unable to change the permission of the share.'))
 
 				this.updatingSharee = false
 			}
diff --git a/src/components/AppNavigation/CalendarList/CalendarListNew.vue b/src/components/AppNavigation/CalendarList/CalendarListNew.vue
index a9f4c81f40..2d26cf2126 100644
--- a/src/components/AppNavigation/CalendarList/CalendarListNew.vue
+++ b/src/components/AppNavigation/CalendarList/CalendarListNew.vue
@@ -87,6 +87,9 @@ import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
 import ActionText from '@nextcloud/vue/dist/Components/ActionText'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import {
+	showError,
+} from '@nextcloud/dialogs'
 
 import { uidToHexColor } from '../../../utils/color.js'
 
@@ -192,7 +195,7 @@ export default {
 				})
 			} catch (error) {
 				console.debug(error)
-				this.$toast.error(this.$t('calendar', 'An error occurred, unable to create the calendar.'))
+				showError(this.$t('calendar', 'An error occurred, unable to create the calendar.'))
 			} finally {
 				this.showCreateCalendarSaving = false
 				this.showCreateCalendarLabel = true
@@ -219,7 +222,7 @@ export default {
 				})
 			} catch (error) {
 				console.debug(error)
-				this.$toast.error(this.$t('calendar', 'An error occurred, unable to create the calendar.'))
+				showError(this.$t('calendar', 'An error occurred, unable to create the calendar.'))
 			} finally {
 				this.showCreateCalendarTaskListSaving = false
 				this.showCreateCalendarTaskListLabel = true
@@ -244,7 +247,7 @@ export default {
 				hostname = url.hostname
 			} catch (error) {
 				console.error(error)
-				this.$toast.error(this.$t('calendar', 'Please enter a valid link (starting with http://, https://, webcal://, or webcals://)'))
+				showError(this.$t('calendar', 'Please enter a valid link (starting with http://, https://, webcal://, or webcals://)'))
 				return
 			}
 
@@ -256,7 +259,7 @@ export default {
 				})
 			} catch (error) {
 				console.debug(error)
-				this.$toast.error(this.$t('calendar', 'An error occurred, unable to create the calendar.'))
+				showError(this.$t('calendar', 'An error occurred, unable to create the calendar.'))
 			} finally {
 				this.showCreateSubscriptionSaving = false
 				this.showCreateSubscriptionLabel = true
diff --git a/src/components/AppNavigation/CalendarList/PublicCalendarListItem.vue b/src/components/AppNavigation/CalendarList/PublicCalendarListItem.vue
index abce1d85b6..cc8869b8f4 100644
--- a/src/components/AppNavigation/CalendarList/PublicCalendarListItem.vue
+++ b/src/components/AppNavigation/CalendarList/PublicCalendarListItem.vue
@@ -83,6 +83,10 @@ import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import {
 	generateRemoteUrl,
 } from '@nextcloud/router'
+import {
+	showSuccess,
+	showError,
+} from '@nextcloud/dialogs'
 
 export default {
 	name: 'PublicCalendarListItem',
@@ -167,7 +171,7 @@ export default {
 				this.showCopySubscriptionLinkSuccess = true
 				this.showCopySubscriptionLinkError = false
 
-				this.$toast.success(this.$t('calendar', 'Calendar link copied to clipboard.'))
+				showSuccess(this.$t('calendar', 'Calendar link copied to clipboard.'))
 			} catch (error) {
 				console.debug(error)
 				this.menuOpen = true
@@ -176,7 +180,7 @@ export default {
 				this.showCopySubscriptionLinkSuccess = false
 				this.showCopySubscriptionLinkError = true
 
-				this.$toast.error(this.$t('calendar', 'Calendar link could not be copied to clipboard.'))
+				showError(this.$t('calendar', 'Calendar link could not be copied to clipboard.'))
 			} finally {
 				setTimeout(() => {
 					this.showCopySubscriptionLinkLabel = true
diff --git a/src/components/AppNavigation/EmbedTopNavigation.vue b/src/components/AppNavigation/EmbedTopNavigation.vue
index 8cc3f4fa92..7912dfbce7 100644
--- a/src/components/AppNavigation/EmbedTopNavigation.vue
+++ b/src/components/AppNavigation/EmbedTopNavigation.vue
@@ -40,6 +40,10 @@ import {
 	mapGetters,
 } from 'vuex'
 import { generateRemoteUrl } from '@nextcloud/router'
+import {
+	showSuccess,
+	showError,
+} from '@nextcloud/dialogs'
 
 import AppNavigationHeaderDatePicker from './AppNavigationHeader/AppNavigationHeaderDatePicker.vue'
 import AppNavigationHeaderTodayButton from './EmbedHeader/EmbedHeaderTodayButton.vue'
@@ -75,10 +79,10 @@ export default {
 			// copy link for calendar to clipboard
 			try {
 				await this.$copyText(url)
-				this.$toast.success(this.$t('calendar', 'Calendar link copied to clipboard.'))
+				showSuccess(this.$t('calendar', 'Calendar link copied to clipboard.'))
 			} catch (error) {
 				console.debug(error)
-				this.$toast.error(this.$t('calendar', 'Calendar link could not be copied to clipboard.'))
+				showError(this.$t('calendar', 'Calendar link could not be copied to clipboard.'))
 			}
 		},
 	},
diff --git a/src/components/AppNavigation/Settings.vue b/src/components/AppNavigation/Settings.vue
index 032673574a..d493ca3693 100644
--- a/src/components/AppNavigation/Settings.vue
+++ b/src/components/AppNavigation/Settings.vue
@@ -108,6 +108,10 @@ import {
 	mapState,
 } from 'vuex'
 import moment from '@nextcloud/moment'
+import {
+	showSuccess,
+	showError,
+} from '@nextcloud/dialogs'
 
 import SettingsImportSection from './Settings/SettingsImportSection.vue'
 import SettingsTimezoneSelect from './Settings/SettingsTimezoneSelect.vue'
@@ -210,7 +214,7 @@ export default {
 				this.savingBirthdayCalendar = false
 			} catch (error) {
 				console.error(error)
-				this.$toast.error(this.$t('calendar', 'New setting was not saved successfully.'))
+				showError(this.$t('calendar', 'New setting was not saved successfully.'))
 				this.savingBirthdayCalendar = false
 			}
 		},
@@ -222,7 +226,7 @@ export default {
 				this.savingEventLimit = false
 			} catch (error) {
 				console.error(error)
-				this.$toast.error(this.$t('calendar', 'New setting was not saved successfully.'))
+				showError(this.$t('calendar', 'New setting was not saved successfully.'))
 				this.savingEventLimit = false
 			}
 		},
@@ -234,7 +238,7 @@ export default {
 				this.savingTasks = false
 			} catch (error) {
 				console.error(error)
-				this.$toast.error(this.$t('calendar', 'New setting was not saved successfully.'))
+				showError(this.$t('calendar', 'New setting was not saved successfully.'))
 				this.savingTasks = false
 			}
 		},
@@ -246,7 +250,7 @@ export default {
 				this.savingPopover = false
 			} catch (error) {
 				console.error(error)
-				this.$toast.error(this.$t('calendar', 'New setting was not saved successfully.'))
+				showError(this.$t('calendar', 'New setting was not saved successfully.'))
 				this.savingPopover = false
 			}
 		},
@@ -258,7 +262,7 @@ export default {
 				this.savingWeekend = false
 			} catch (error) {
 				console.error(error)
-				this.$toast.error(this.$t('calendar', 'New setting was not saved successfully.'))
+				showError(this.$t('calendar', 'New setting was not saved successfully.'))
 				this.savingWeekend = false
 			}
 		},
@@ -273,7 +277,7 @@ export default {
 				this.savingWeekNumber = false
 			} catch (error) {
 				console.error(error)
-				this.$toast.error(this.$t('calendar', 'New setting was not saved successfully.'))
+				showError(this.$t('calendar', 'New setting was not saved successfully.'))
 				this.savingWeekNumber = false
 			}
 		},
@@ -297,7 +301,7 @@ export default {
 				this.savingSlotDuration = false
 			} catch (error) {
 				console.error(error)
-				this.$toast.error(this.$t('calendar', 'New setting was not saved successfully.'))
+				showError(this.$t('calendar', 'New setting was not saved successfully.'))
 				this.savingSlotDuration = false
 			}
 		},
@@ -307,10 +311,10 @@ export default {
 		async copyPrimaryCalDAV() {
 			try {
 				await this.$copyText(generateRemoteUrl('dav'))
-				this.$toast.success(this.$t('calendar', 'CalDAV link copied to clipboard.'))
+				showSuccess(this.$t('calendar', 'CalDAV link copied to clipboard.'))
 			} catch (error) {
 				console.debug(error)
-				this.$toast.error(this.$t('calendar', 'CalDAV link could not be copied to clipboard.'))
+				showError(this.$t('calendar', 'CalDAV link could not be copied to clipboard.'))
 			}
 
 		},
@@ -324,10 +328,10 @@ export default {
 
 			try {
 				await this.$copyText(url)
-				this.$toast.success(this.$t('calendar', 'CalDAV link copied to clipboard.'))
+				showSuccess(this.$t('calendar', 'CalDAV link copied to clipboard.'))
 			} catch (error) {
 				console.debug(error)
-				this.$toast.error(this.$t('calendar', 'CalDAV link could not be copied to clipboard.'))
+				showError(this.$t('calendar', 'CalDAV link could not be copied to clipboard.'))
 			}
 		},
 		/**
diff --git a/src/components/AppNavigation/Settings/SettingsImportSection.vue b/src/components/AppNavigation/Settings/SettingsImportSection.vue
index 8f267d0638..1dc04e7ee3 100644
--- a/src/components/AppNavigation/Settings/SettingsImportSection.vue
+++ b/src/components/AppNavigation/Settings/SettingsImportSection.vue
@@ -55,6 +55,11 @@ import {
 import { getParserManager } from 'calendar-js'
 import ImportScreen from './ImportScreen.vue'
 import { readFileAsText } from '../../../services/readFileAsTextService.js'
+import {
+	showSuccess,
+	showWarning,
+	showError,
+} from '@nextcloud/dialogs'
 
 export default {
 	name: 'SettingsImportSection',
@@ -177,7 +182,7 @@ export default {
 				// Make sure the user didn't select
 				// files of a different file-type
 				if (!this.supportedFileTypes.includes(type)) {
-					this.$toast.error(this.$t('calendar', '{filename} is an unsupported file-type', {
+					showError(this.$t('calendar', '{filename} is an unsupported file-type', {
 						filename: name,
 					}))
 					continue
@@ -196,7 +201,7 @@ export default {
 					parser.parse(contents)
 				} catch (error) {
 					console.error(error)
-					this.$toast.error(this.$t('calendar', '{filename} could not be parsed', {
+					showError(this.$t('calendar', '{filename} could not be parsed', {
 						filename: name,
 					}))
 					continue
@@ -214,7 +219,7 @@ export default {
 			}
 
 			if (!addedFiles) {
-				this.$toast.error(this.$t('calendar', 'No valid files found, aborting import'))
+				showError(this.$t('calendar', 'No valid files found, aborting import'))
 				this.$store.commit('removeAllFiles')
 				this.$store.commit('resetState')
 				return
@@ -230,9 +235,9 @@ export default {
 			await this.$store.dispatch('importEventsIntoCalendar')
 
 			if (this.total === this.accepted) {
-				this.$toast.success(this.$n('calendar', 'Successfully imported %n event', 'Successfully imported %n events.', this.total))
+				showSuccess(this.$n('calendar', 'Successfully imported %n event', 'Successfully imported %n events.', this.total))
 			} else {
-				this.$toast.warning(this.$t('calendar', 'Import partially failed. Imported {accepted} out of {total}.', {
+				showWarning(this.$t('calendar', 'Import partially failed. Imported {accepted} out of {total}.', {
 					accepted: this.accepted,
 					total: this.total,
 				}))
diff --git a/src/components/AppNavigation/Settings/SettingsTimezoneSelect.vue b/src/components/AppNavigation/Settings/SettingsTimezoneSelect.vue
index a078fabc55..fa6c763115 100644
--- a/src/components/AppNavigation/Settings/SettingsTimezoneSelect.vue
+++ b/src/components/AppNavigation/Settings/SettingsTimezoneSelect.vue
@@ -35,6 +35,9 @@ import {
 
 import TimezoneSelect from '../../Shared/TimezoneSelect.vue'
 import detectTimezone from '../../../services/timezoneDetectionService.js'
+import {
+	showInfo,
+} from '@nextcloud/dialogs'
 
 export default {
 	name: 'SettingsTimezoneSelect',
@@ -76,7 +79,7 @@ export default {
 			this.$store.dispatch('setTimezone', { timezoneId })
 				.catch((error) => {
 					console.error(error)
-					this.$toast(this.$t('calendar', 'New setting was not saved successfully.'))
+					showInfo(this.$t('calendar', 'New setting was not saved successfully.'))
 				})
 		},
 	},
diff --git a/src/components/Editor/Invitees/InviteesList.vue b/src/components/Editor/Invitees/InviteesList.vue
index 73a1aef670..56a4ad05e4 100644
--- a/src/components/Editor/Invitees/InviteesList.vue
+++ b/src/components/Editor/Invitees/InviteesList.vue
@@ -75,6 +75,10 @@ import NoInviteesView from './NoInviteesView.vue'
 import OrganizerNoEmailError from './OrganizerNoEmailError.vue'
 import { createTalkRoom, doesDescriptionContainTalkLink } from '../../../services/talkService.js'
 import FreeBusy from '../FreeBusy/FreeBusy.vue'
+import {
+	showSuccess,
+	showError,
+} from '@nextcloud/dialogs'
 
 export default {
 	name: 'InviteesList',
@@ -232,9 +236,9 @@ export default {
 					description: newDescription,
 				})
 
-				this.$toast.success(this.$t('calendar', 'Successfully appended link to talk room to description.'))
+				showSuccess(this.$t('calendar', 'Successfully appended link to talk room to description.'))
 			} catch (error) {
-				this.$toast.error(this.$t('calendar', 'Error creating Talk room'))
+				showError(this.$t('calendar', 'Error creating Talk room'))
 			} finally {
 				this.creatingTalkRoom = false
 			}
diff --git a/src/components/Shared/DatePicker.vue b/src/components/Shared/DatePicker.vue
index 7e75098d15..5f682a01b1 100644
--- a/src/components/Shared/DatePicker.vue
+++ b/src/components/Shared/DatePicker.vue
@@ -89,6 +89,9 @@ import {
 } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { mapState } from 'vuex'
+import {
+	showError,
+} from '@nextcloud/dialogs'
 
 import TimezoneSelect from './TimezoneSelect'
 
@@ -329,7 +332,7 @@ export default {
 				const matches = value.match(regex)
 
 				if (!matches) {
-					this.$toast.error(this.$t('calendar', 'Please enter a valid date'))
+					showError(this.$t('calendar', 'Please enter a valid date'))
 					// Just return the previous date
 					return this.date
 				}
@@ -373,7 +376,7 @@ export default {
 				const timeMatches = value.match(timeRegex)
 
 				if (!dateMatches || !timeMatches) {
-					this.$toast.error(this.$t('calendar', 'Please enter a valid date and time'))
+					showError(this.$t('calendar', 'Please enter a valid date and time'))
 					// Just return the previous date
 					return this.date
 				}
diff --git a/src/main.js b/src/main.js
index 2387420f98..54005ae650 100644
--- a/src/main.js
+++ b/src/main.js
@@ -58,7 +58,6 @@ sync(store, router)
 
 Vue.prototype.$t = translate
 Vue.prototype.$n = translatePlural
-Vue.prototype.$toast = OCP.Toast // eslint-disable-line no-undef
 
 // The nextcloud-vue package does currently rely on t and n
 Vue.prototype.t = translate
diff --git a/src/utils/illustration.js b/src/utils/illustration.js
index fd2376186b..5d49a51b38 100644
--- a/src/utils/illustration.js
+++ b/src/utils/illustration.js
@@ -491,7 +491,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'conference_call',
-	]
+	],
 }, {
 	strings: [
 		'Call',
diff --git a/src/views/Calendar.vue b/src/views/Calendar.vue
index 22e02390c6..d1d4b35ff0 100644
--- a/src/views/Calendar.vue
+++ b/src/views/Calendar.vue
@@ -131,6 +131,10 @@ import eventLimitText from '../fullcalendar/eventLimitText.js'
 import windowResize from '../fullcalendar/windowResize.js'
 import dayRender from '../fullcalendar/dayRender.js'
 import { loadState } from '@nextcloud/initial-state'
+import {
+	showWarning,
+} from '@nextcloud/dialogs'
+import '@nextcloud/dialogs/styles/toast.scss'
 
 export default {
 	name: 'Calendar',
@@ -351,13 +355,13 @@ export default {
 	async mounted() {
 		if (this.timezone === 'automatic' && this.timezoneId === 'UTC') {
 			const { toastElement }
-				= this.$toast.warning(this.$t('calendar', 'The automatic timezone detection determined your timezone to be UTC.\nThis is most likely the result of security measures of your web browser.\nPlease set your timezone manually in the calendar settings.'), { timeout: 60 })
+				= showWarning(this.$t('calendar', 'The automatic timezone detection determined your timezone to be UTC.\nThis is most likely the result of security measures of your web browser.\nPlease set your timezone manually in the calendar settings.'), { timeout: 60 })
 
 			toastElement.classList.add('toast-calendar-multiline')
 		}
 		if (getTimezoneManager().getTimezoneForId(this.timezoneId) === null) {
 			const { toastElement }
-				= this.$toast.warning(this.$t('calendar', 'Your configured timezone ({timezoneId}) was not found. Falling back to UTC.\nPlease change your timezone in the settings and report this issue.', { timezoneId: this.timezoneId }), { timeout: 60 })
+				= showWarning(this.$t('calendar', 'Your configured timezone ({timezoneId}) was not found. Falling back to UTC.\nPlease change your timezone in the settings and report this issue.', { timezoneId: this.timezoneId }), { timeout: 60 })
 
 			toastElement.classList.add('toast-calendar-multiline')
 		}