Simple calendar support

References:
#121, #136 and #411

src/js/components/VoteTable/VoteCalendarLink.vue

@@ -0,0 +1,31 @@
+<script>
+
+export default {
+	name: 'VoteCalendarLink',
+
+	methods: {
+		newEvent(option) {
+			const dateTimeStart = option.timestamp
+			const dateTimeEnd = moment.unix(dateTimeStart).add(1, 'hour').unix()
+
+			const protocol = window.location.protocol + '//'
+			const host = window.location.host
+			// Useful if the current pathname is '/index.php/apps/...'
+			const pathname = window.location.pathname.match('^(.*?/apps)/.*$')
+			const appsRoot = pathname ? pathname[1] : '/apps'
+
+			const calendarRoot = appsRoot + '/calendar'
+			const calendarView = 'timeGridWeek' // timeGridDay, 'timeGridWeek' or 'dayGridMonth'
+			const calendarTimeRange = moment.unix(dateTimeStart).format('Y-MM-DD') // 'now' or 'yyyy-mm-dd'
+			const calendarAction = 'new'
+			const calendarMode = 'sidebar' // 'popover' or 'sidebar'
+			const calendarIsAllDay = '0'
+
+			const calendarUrl = protocol + host + calendarRoot + '/' + calendarView + '/' + calendarTimeRange + '/' + calendarAction + '/' + calendarMode + '/' + calendarIsAllDay + '/' + dateTimeStart + '/' + dateTimeEnd
+
+			return calendarUrl
+		}
+	}
+}
+
+</script>

src/js/components/VoteTable/VoteList.vue

@@ -31,6 +31,12 @@
 			<PollItemText v-if="poll.type === 'textPoll'" :option="option" />
 			<PollItemDate v-if="poll.type === 'datePoll'" :option="option" />
 
+			<div v-if="acl.allowEdit && poll.type === 'datePoll'" class="new-event">
+				<a class="button icon-calendar-000"
+					:title="t('polls', 'Add a calendar event')"
+					:href="newCalendarEventLink(option)" />
+			</div>
+
 			<div class="counter">
 				<div v-if="yesVotes(option.pollOptionText)" class="yes" :style="{ flex: yesVotes(option.pollOptionText) }">
 					<span> {{ yesVotes(option.pollOptionText) }} </span>
@@ -51,6 +57,7 @@
 <script>
 import PollItemText from '../Base/PollItemText'
 import PollItemDate from '../Base/PollItemDate'
+import VoteCalendarLink from './VoteCalendarLink'
 import VoteTableItem from './VoteTableItem'
 import { mapState, mapGetters } from 'vuex'
 
@@ -116,6 +123,10 @@ export default {
 				.then(() => {
 					// this.$emit('voteSaved')
 				})
+		},
+
+		newCalendarEventLink(option) {
+			return VoteCalendarLink.methods.newEvent(option)
 		}
 	}
 }
@@ -180,6 +191,14 @@ export default {
 				flex: 0;
 			}
 
+			.new-event {
+				display: flex;
+
+				.button {
+					padding: 15px;
+				}
+			}
+
 			> li {
 				display: flex;
 				align-items: center;

src/js/components/VoteTable/VoteTableHeader.vue

@@ -41,6 +41,17 @@
 			</div>
 		</div>
 
+		<div v-if="acl.allowEdit && poll.type === 'datePoll'" class="new-event">
+			<a class="button"
+				:class="{
+					primary: isWinner,
+					'icon-calendar': isWinner,
+					'icon-calendar-000': !isWinner
+				}"
+				:title="t('polls', 'Add a calendar event')"
+				:href="newCalendarEventLink(option)" />
+		</div>
+
 		<div class="counter">
 			<div class="yes">
 				<span> {{ yesVotes }} </span>
@@ -54,6 +65,7 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
+import VoteCalendarLink from './VoteCalendarLink'
 
 export default {
 	name: 'VoteTableHeader',
@@ -80,7 +92,8 @@ export default {
 	computed: {
 		...mapState({
 			poll: state => state.poll,
-			votes: state => state.votes.list
+			votes: state => state.votes.list,
+			acl: state => state.acl
 		}),
 		...mapGetters([
 			'votesRank',
@@ -119,6 +132,12 @@ export default {
 				}).maybe
 			)
 		}
+	},
+
+	methods: {
+		newCalendarEventLink(option) {
+			return VoteCalendarLink.methods.newEvent(option)
+		}
 	}
 }
 
@@ -133,6 +152,16 @@ export default {
 		font-weight: bold;
 		color: #49bc49;
 	}
+
+	.new-event {
+		align-items: center;
+		display: flex;
+		justify-content: center;
+
+		.button {
+			padding: 15px;
+		}
+	}
 }
 
 .counter {