Implemented calendar category colors (closes #2368)

changelog/74_UNRELEASED_xxxx-xx-xx.md

@@ -35,7 +35,8 @@
 
 ### Calendar
 
-- xxx
+- The different event types (due products, chores, tasks and so on) can now have different colors
+  - => New button "Configure colors" on the calendar page to configure these colors (top right corner)
 
 ### Tasks
 

config-dist.php

@@ -213,6 +213,13 @@ DefaultUserSetting('batteries_due_soon_days', 5); // The "due soon" days
 // Tasks settings
 DefaultUserSetting('tasks_due_soon_days', 5); // The "due soon" days
 
+// Calendar settings
+DefaultUserSetting('calendar_color_products', '#007bff'); // The event color (hex code) for due products
+DefaultUserSetting('calendar_color_tasks', '#28a745'); // The event color (hex code) for due tasks
+DefaultUserSetting('calendar_color_chores', '#ffc107'); // The event color (hex code) for due chores
+DefaultUserSetting('calendar_color_batteries', '#17a2b8'); // The event color (hex code) for due battery charge cycles
+DefaultUserSetting('calendar_color_meal_plan', '#6c757d'); // The event color (hex code) for meal plan items
+
 // Component configuration for Quagga2 - read https://github.com/ericblade/quagga2#configobject for details
 // Below is a generic good configuration,
 // for an iPhone 7 Plus, halfsample = true, patchsize = small, frequency = 5 yields very good results

localization/strings.pot

@@ -2432,3 +2432,6 @@ msgstr ""
 
 msgid "Nothing was found for the given barcode"
 msgstr ""
+
+msgid "Configure colors"
+msgstr ""

public/viewjs/calendar.js

@@ -58,3 +58,10 @@ $(window).one("resize", function()
 		calendar.fullCalendar("changeView", "month");
 	}
 });
+
+$("#configure-colors-button").on("click", function(e)
+{
+	e.preventDefault();
+
+	$("#configure-colors-modal").modal("show");
+});

services/CalendarService.php

@@ -15,6 +15,8 @@ class CalendarService extends BaseService
 
 	public function GetEvents()
 	{
+		$usersService = $this->getUsersService();
+
 		$stockEvents = [];
 		if (GROCY_FEATURE_FLAG_STOCK_BEST_BEFORE_DATE_TRACKING)
 		{
@@ -29,7 +31,8 @@ class CalendarService extends BaseService
 						'title' => $titlePrefix . FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->name,
 						'start' => $currentStockEntry->best_before_date,
 						'date_format' => 'date',
-						'link' => $this->UrlManager->ConstructUrl('/stockoverview')
+						'link' => $this->UrlManager->ConstructUrl('/stockoverview'),
+						'color' => $usersService->GetUserSettings(GROCY_USER_ID)['calendar_color_products']
 					];
 				}
 			}
@@ -46,7 +49,8 @@ class CalendarService extends BaseService
 					'title' => $titlePrefix . $currentTaskEntry->name,
 					'start' => $currentTaskEntry->due_date,
 					'date_format' => 'date',
-					'link' => $this->UrlManager->ConstructUrl('/tasks')
+					'link' => $this->UrlManager->ConstructUrl('/tasks'),
+					'color' => $usersService->GetUserSettings(GROCY_USER_ID)['calendar_color_tasks']
 				];
 			}
 		}
@@ -73,7 +77,8 @@ class CalendarService extends BaseService
 					'start' => $currentChoreEntry->next_estimated_execution_time,
 					'date_format' => 'datetime',
 					'link' => $this->UrlManager->ConstructUrl('/choresoverview'),
-					'allDay' => $chore->track_date_only == 1
+					'allDay' => $chore->track_date_only == 1,
+					'color' => $usersService->GetUserSettings(GROCY_USER_ID)['calendar_color_chores']
 				];
 			}
 		}
@@ -90,7 +95,8 @@ class CalendarService extends BaseService
 					'title' => $titlePrefix . FindObjectInArrayByPropertyValue($batteries, 'id', $currentBatteryEntry->battery_id)->name,
 					'start' => $currentBatteryEntry->next_estimated_charge_time,
 					'date_format' => 'datetime',
-					'link' => $this->UrlManager->ConstructUrl('/batteriesoverview')
+					'link' => $this->UrlManager->ConstructUrl('/batteriesoverview'),
+					'color' => $usersService->GetUserSettings(GROCY_USER_ID)['calendar_color_batteries']
 				];
 			}
 		}
@@ -98,7 +104,7 @@ class CalendarService extends BaseService
 		$mealPlanRecipeEvents = [];
 		$mealPlanNotesEvents = [];
 		$mealPlanProductEvents = [];
-		if (GROCY_FEATURE_FLAG_RECIPES)
+		if (GROCY_FEATURE_FLAG_RECIPES_MEALPLAN)
 		{
 			$mealPlanSections = $this->getDatabase()->meal_plan_sections();
 
@@ -127,7 +133,8 @@ class CalendarService extends BaseService
 					'start' => $start,
 					'date_format' => $dateFormat,
 					'description' => $this->UrlManager->ConstructUrl('/mealplan' . '?week=' . $mealPlanDayRecipe->day),
-					'link' => $this->UrlManager->ConstructUrl('/recipes' . '?recipe=' . $mealPlanDayRecipe->recipe_id . '#fullscreen')
+					'link' => $this->UrlManager->ConstructUrl('/recipes' . '?recipe=' . $mealPlanDayRecipe->recipe_id . '#fullscreen'),
+					'color' => $usersService->GetUserSettings(GROCY_USER_ID)['calendar_color_meal_plan']
 				];
 			}
 

views/calendar.blade.php

@@ -15,13 +15,18 @@
 				data-target="#related-links">
 				<i class="fa-solid fa-ellipsis-v"></i>
 			</button>
-			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100 m-1 mt-md-0 mb-md-0 float-right"
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100 d-print-none"
 				id="related-links">
 				<a id="ical-button"
-					class="btn btn-outline-dark"
+					class="btn btn-outline-dark m-1 mt-md-0 mb-md-0 float-right"
 					href="#">
 					{{ $__t('Share/Integrate calendar (iCal)') }}
 				</a>
+				<a id="configure-colors-button"
+					class="btn btn-outline-secondary m-1 mt-md-0 mb-md-0 float-right"
+					href="#">
+					{{ $__t('Configure colors') }}
+				</a>
 			</div>
 		</div>
 	</div>
@@ -38,4 +43,97 @@
 		<div id="calendar"></div>
 	</div>
 </div>
+
+<div class="modal fade"
+	id="configure-colors-modal"
+	tabindex="-1">
+	<div class="modal-dialog">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h4 class="modal-title w-100">{{ $__t('Configure colors') }}</h4>
+			</div>
+			<div class="modal-body">
+				@if(GROCY_FEATURE_FLAG_STOCK_BEST_BEFORE_DATE_TRACKING)
+				<div class="form-group">
+					<div class="input-group">
+						<div class="input-group-prepend">
+							<span class="input-group-text">{{ $__t('Products') }}</span>
+						</div>
+						<input id="calendar_color_products"
+							data-setting-key="calendar_color_products"
+							class="form-control user-setting-control"
+							type="color"
+							value={{$userSettings['calendar_color_products']}}>
+					</div>
+				</div>
+				@endif
+
+				@if(GROCY_FEATURE_FLAG_TASKS)
+				<div class="form-group">
+					<div class="input-group">
+						<div class="input-group-prepend">
+							<span class="input-group-text">{{ $__t('Tasks') }}</span>
+						</div>
+						<input id="calendar_color_tasks"
+							data-setting-key="calendar_color_tasks"
+							class="form-control user-setting-control"
+							type="color"
+							value={{$userSettings['calendar_color_tasks']}}>
+					</div>
+				</div>
+				@endif
+
+				@if(GROCY_FEATURE_FLAG_CHORES)
+				<div class="form-group">
+					<div class="input-group">
+						<div class="input-group-prepend">
+							<span class="input-group-text">{{ $__t('Chores') }}</span>
+						</div>
+						<input id="calendar_color_chores"
+							data-setting-key="calendar_color_chores"
+							class="form-control user-setting-control"
+							type="color"
+							value={{$userSettings['calendar_color_chores']}}>
+					</div>
+				</div>
+				@endif
+
+				@if(GROCY_FEATURE_FLAG_BATTERIES)
+				<div class="form-group">
+					<div class="input-group">
+						<div class="input-group-prepend">
+							<span class="input-group-text">{{ $__t('Batteries') }}</span>
+						</div>
+						<input id="calendar_color_batteries"
+							data-setting-key="calendar_color_batteries"
+							class="form-control user-setting-control"
+							type="color"
+							value={{$userSettings['calendar_color_batteries']}}>
+					</div>
+				</div>
+				@endif
+
+				@if(GROCY_FEATURE_FLAG_RECIPES_MEALPLAN)
+				<div class="form-group">
+					<div class="input-group">
+						<div class="input-group-prepend">
+							<span class="input-group-text">{{ $__t('Meal plan') }}</span>
+						</div>
+						<input id="calendar_color_meal_plan"
+							data-setting-key="calendar_color_meal_plan"
+							class="form-control user-setting-control"
+							type="color"
+							value={{$userSettings['calendar_color_meal_plan']}}>
+					</div>
+				</div>
+				@endif
+			</div>
+			<div class="modal-footer">
+				<button type="button"
+					class="btn btn-success"
+					data-dismiss="modal">{{ $__t('OK') }}</button>
+			</div>
+		</div>
+	</div>
+</div>
 @stop