calendar/issue/4128 : Feature: added between calendars patterns on events

css/fullcalendar.scss

@@ -225,6 +225,50 @@
 			display: none;
 		}
 	}
+
+	&--diagonal-lines {
+		background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,.2) 5px, rgba(0,0,0,.2) 10px);
+	}
+
+	&--horizontal-lines {
+		background-image: repeating-linear-gradient(to right, transparent, transparent 5px, rgba(0,0,0,.2) 5px, rgba(0,0,0,.2) 10px);
+	}
+
+	&--vertical-lines {
+		background-image: repeating-linear-gradient(to bottom, transparent, transparent 5px, rgba(0,0,0,.2) 5px, rgba(0,0,0,.2) 10px);
+	}
+
+	&--dots {
+		background-image: radial-gradient(circle, rgba(0,0,0,.2) 4px, transparent 4px); 
+		background-size: 14px 14px;
+	}
+
+	&--hexagons {
+		background-image: repeating-linear-gradient(45deg, 
+			transparent 10%, 
+			rgba(0, 0, 0, 0.2) 10%, 
+			rgba(0, 0, 0, 0.2) 20%, 
+			transparent 20%, 
+			transparent 30%, 
+			rgba(0, 0, 0, 0.2) 30%, 
+			rgba(0, 0, 0, 0.2) 50%, 
+			transparent 40%);
+	}
+
+	&--triangles {
+		background-size: 15px 15px;
+    	background-image: 
+        	linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.2) 50%),
+        	linear-gradient(-45deg, transparent 50%, rgba(0, 0, 0, 0.2) 50%);
+	}
+
+	&--checkered { 
+		background-image: 
+			linear-gradient(45deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .2) 75%, rgba(0, 0, 0, .2)),
+			linear-gradient(45deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .2) 75%, rgba(0, 0, 0, .2)); 
+		background-size: 20px 20px; 
+		background-position: 0 0, 10px 10px;
+	}
 }
 
 .fc-list-empty {

src/components/AppNavigation/EditCalendarModal.vue

@@ -36,6 +36,15 @@
 					</NcColorPicker>
 				</div>
 
+				<div class="edit-calendar-modal__name-and-color__pattern">
+					<NcPatternPicker v-model="calendarPattern"
+						:advanced-fields="true"
+						@update:value="calendarPatternChanged = true">
+						<div class="edit-calendar-modal__name-and-color__pattern__dot" 
+							:class="'edit-calendar-modal__name-and-color__pattern__dot--'+calendarPattern" />
+					</NcPatternPicker> 
+				</div>
+
 				<input v-model="calendarName"
 					class="edit-calendar-modal__name-and-color__name"
 					type="text"
@@ -89,7 +98,7 @@
 </template>
 
 <script>
-import { NcModal, NcColorPicker, NcButton } from '@nextcloud/vue'
+import { NcModal, NcColorPicker, NcPatternPicker, NcButton } from '@nextcloud/vue'
 import PublishCalendar from './EditCalendarModal/PublishCalendar.vue'
 import SharingSearch from './EditCalendarModal/SharingSearch.vue'
 import ShareItem from './EditCalendarModal/ShareItem.vue'
@@ -107,6 +116,7 @@
 	components: {
 		NcModal,
 		NcColorPicker,
+		NcPatternPicker,
 		NcButton,
 		PublishCalendar,
 		SharingSearch,
@@ -121,6 +131,8 @@
 		return {
 			calendarColor: undefined,
 			calendarColorChanged: false,
+			calendarPattern: undefined,
+			calendarPatternChanged: false,
 			calendarName: undefined,
 			calendarNameChanged: false,
 		}
@@ -177,8 +189,10 @@
 
 			this.calendarName = this.calendar.displayName
 			this.calendarColor = this.calendar.color
+			this.calendarPattern = this.calendar.pattern
 			this.calendarNameChanged = false
 			this.calendarColorChanged = false
+			this.calendarPatternChanged = false
 		},
 	},
 	methods: {
@@ -207,6 +221,24 @@
 			}
 		},
 
+		/**
+		 * Save the calendar pattern.
+		 */
+		 async savePattern() {
+			try {
+				await this.$store.dispatch('changeCalendarPattern', {
+					calendar: this.calendar,
+					newPattern: this.calendarPattern,
+				})
+			} catch (error) {
+				logger.error('Failed to save calendar pattern', {
+					calendar: this.calendar,
+					newPattern: this.calendarPattern,
+				})
+				throw error
+			}
+		},
+
 		/**
 		 * Save the calendar name.
 		 */
@@ -235,6 +267,9 @@
 				if (this.calendarColorChanged) {
 					await this.saveColor()
 				}
+				if (this.calendarPatternChanged) {
+					await this.savePattern()
+				}
 				if (this.calendarNameChanged) {
 					await this.saveName()
 				}
@@ -278,6 +313,58 @@
 			}
 		}
 
+		&__pattern {
+			::v-deep &__dot {
+				width: 24px;
+				height: 24px;
+				border-radius: 12px;
+
+				&--diagonal-lines {
+					background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,.2) 5px, rgba(0,0,0,.2) 10px);
+				}
+
+				&--horizontal-lines {
+					background-image: repeating-linear-gradient(to right, transparent, transparent 5px, rgba(0,0,0,.2) 5px, rgba(0,0,0,.2) 10px);
+				}
+
+				&--vertical-lines {
+					background-image: repeating-linear-gradient(to bottom, transparent, transparent 5px, rgba(0,0,0,.2) 5px, rgba(0,0,0,.2) 10px);
+				}
+
+				&--dots {
+					background-image: radial-gradient(circle, rgba(0,0,0,.2) 4px, transparent 4px); 
+					background-size: 14px 14px;
+				}
+
+				&--hexagons {
+					background-image: repeating-linear-gradient(45deg, 
+						transparent 10%, 
+						rgba(0, 0, 0, 0.2) 10%, 
+						rgba(0, 0, 0, 0.2) 20%, 
+						transparent 20%, 
+						transparent 30%, 
+						rgba(0, 0, 0, 0.2) 30%, 
+						rgba(0, 0, 0, 0.2) 50%, 
+						transparent 40%);
+				}
+
+				&--triangles {
+					background-size: 15px 15px;
+					background-image: 
+						linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.2) 50%),
+						linear-gradient(-45deg, transparent 50%, rgba(0, 0, 0, 0.2) 50%);
+				}
+
+				&--checkered { 
+					background-image: 
+						linear-gradient(45deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .2) 75%, rgba(0, 0, 0, .2)),
+						linear-gradient(45deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .2) 75%, rgba(0, 0, 0, .2)); 
+					background-size: 20px 20px; 
+					background-position: 0 0, 10px 10px;
+				}
+			}	
+		}
+
 		&__name {
 			flex: 1 auto;
 		}

src/fullcalendar/eventSources/eventSource.js

@@ -39,6 +39,7 @@ export default function(store) {
 			id: calendar.id,
 			// coloring
 			backgroundColor: calendar.color,
+			className: 'fc-event--'+calendar.pattern,
 			borderColor: calendar.color,
 			textColor: generateTextColorForHex(calendar.color),
 			// html foo

src/models/calendar.js

@@ -35,6 +35,8 @@ const getDefaultCalendarObject = (props = {}) => Object.assign({}, {
 	displayName: '',
 	// Color of the calendar
 	color: uidToHexColor(''),
+	// Pattern of the calendar
+	pattern: '',
 	// Whether or not the calendar is visible in the grid
 	enabled: true,
 	// Whether or not the calendar is loading events at the moment
@@ -92,6 +94,11 @@ const mapDavCollectionToCalendar = (calendar, currentUserPrincipal) => {
 		color = uidToHexColor(displayName)
 	}
 
+	let pattern = calendar.pattern
+	if (!pattern) {
+		pattern = 'diagonal-lines'
+	}
+
 	const supportsEvents = calendar.components.includes('VEVENT')
 	const supportsJournals = calendar.components.includes('VJOURNAL')
 	const supportsTasks = calendar.components.includes('VTODO')
@@ -143,6 +150,7 @@ const mapDavCollectionToCalendar = (calendar, currentUserPrincipal) => {
 		id,
 		displayName,
 		color,
+		pattern,
 		order,
 		url,
 		enabled,

src/store/calendars.js

@@ -215,6 +215,18 @@ const mutations = {
 		state.calendarsById[calendar.id].color = newColor
 	},
 
+	/**
+	 * Changes calendar's pattern
+	 *
+	 * @param {object} state the store mutations
+	 * @param {object} data destructuring object
+	 * @param {object} data.calendar the calendar to rename
+	 * @param {string} data.newPattern the new pattern of the calendar
+	 */
+	changeCalendarPattern(state, { calendar, newPattern }) {
+		state.calendarsById[calendar.id].pattern = newPattern
+	},
+
 	/**
 	 * Changes calendar's order
 	 *
@@ -936,6 +948,22 @@ const actions = {
 		await calendar.dav.update()
 		context.commit('changeCalendarColor', { calendar, newColor })
 	},
+
+	/**
+	 * Change a calendar's pattern
+  	 *
+	 * @param {object} context the store mutations Current context
+	 * @param {object} data destructuring object
+	 * @param {object} data.calendar the calendar to modify
+	 * @param {string} data.newPattern the new pattern of the calendar
+	 * @return {Promise}
+	 */
+	async changeCalendarPattern(context, { calendar, newPattern }) {
+		calendar.dav.pattern = newPattern
+
+		await calendar.dav.update()
+		context.commit('changeCalendarPattern', { calendar, newPattern })
+	},
 
 	/**
 	 * Share calendar with User or Group