Feature: Kalender & Zeiterfassung

Überblick

Das Kalender-Feature ist das zentrale Planungs- und Arbeitswerkzeug der Anwendung. Es verbindet Termine, Aufgaben, Notizen und Zeiterfassung in einem klaren Tages-, Wochen- und Monatskontext. Damit wird aus einem reinen Terminmanager ein echtes Arbeitsdashboard, das den Alltag eines Teams oder Einzelnen besser organisiert.

Der Fokus liegt nicht nur auf der Darstellung von Terminen, sondern auf dem Arbeitsfluss dahinter: Was ist heute wichtig? Welcher Tag steht im Mittelpunkt? Welche Aufgaben müssen erledigt werden? Wo ist eine Notiz relevant? Welche Zeit wurde in welchem Kontext aufgezeichnet?

Für Nicht-Entwickler: Was ist das Feature?

Zweck

Das Feature hilft dabei, den Überblick zu behalten, auch wenn viele Aufgaben, Termine und Ideen gleichzeitig anfallen. Nutzer können:

• Termine und Aufgaben an einem bestimmten Datum planen
• zwischen Monat-, Wochen- und Tagesansicht wechseln
• schnell neue Einträge anlegen, ohne den aktuellen Kontext zu verlieren
• Notizen direkt zum passenden Datum hinterlegen
• Arbeitszeiten erfassen und mit Aufgaben verknüpfen

Typische Nutzungsszenarien

• Projekttermine im Überblick behalten
• Tagesplanung mit Aufgaben und Prioritäten
• Notizen zu einem konkreten Datum anlegen
• Bearbeitungszeiten erfassen
• Teammeetings und Betriebsabläufe koordinieren

Warum ist das nützlich?

Wer nur eine Terminliste nutzt, sieht meist nur die Oberfläche. Das Kalender-Feature geht einen Schritt weiter und stellt den Zeitkontext in den Mittelpunkt. Dadurch wird klarer, was an einem Tag passiert, was vorbereitet werden muss und welche Aufgaben zu einem Datum gehören.

Für Entwickler: Architektur und Funktionsprinzip

Technischer Kontext

Die UI liegt in der Blazor-Komponente:

• mkaWebCenter.Client/kApp-features/kalender/route/Kalender_RouteView.razor

Die Backend-Logik befindet sich in:

• mkaWebCenter/app_routes/api/KalenderApi.cs
• mkaWebCenter/app_data/KalenderRepository.cs

Die Daten werden in einem eigenen Kalenderkontext verwaltet, der Termine, Notizen und Zeiterfassungsdaten an ein bestimmtes Datum bindet.

Grundidee

Viele Kalender-Apps haben mir bisher nie so richtig gefallen, entweder empfand ich die Bedienbarkeit umständlich (bspw. zu viele benötigten Infos für einen einfachen Termin) oder die Darstellung zu unübersichtlich, benutzte Farben gefielen mir nicht oder oder oder :D Die Punkte hatten leider immer zur Folge, dass ich nach kurzer Zeit aufhörte Termine&Absprachen zu speichern oder meine Partnerin plötzlich den Job meiner „Kalender-Managerin“ innehatte, was sie natürlich dankend annahm ^^ Um dieser nicht ganz so Optimalen Situation entgegenzuwirken, habe ich dann einfach angefangen ein eigenes "Kalender-Modul" zu schreiben, was ich nach und nach immer erweiter, um für mich persönlich die beste Usability zu erreichen, umso lagfristig Termine auch zu speichern :D

Um bei unterschiedlichen Projekten auch nicht so schnell den Überblick zu verlieren, speicher ich neben meinen Terminen, auch erledigte oder offene Aufgaben, die ich einfach und schnell aus unterschiedlichen Teilen der Webanwendung heraus erstellen kann.

1. Monat: Überblick über den Verlauf und wichtige Termine
2. Woche: Fokus auf Planung und Detailarbeiten
3. Tag: direkte Bearbeitung und schnelle Einträge am aktuellen Arbeitstag

Diese Sichtweisen sind nicht rein kosmetisch, sondern dienen unterschiedlichen Arbeitsarten.

Kernfunktionen

• Erstellen von Terminen mit Titel, Datum und Kontext
• Öffnen und Bearbeiten von Einträchen aus der jeweiligen Ansicht
• Direktes Erstellen im aktuellen Datumsbereich
• Verknüpfung mit Notizen
• Zeiterfassung für Aufgaben oder Arbeitspausen
• responsive Darstellung für kleinere Endgeräte

Wichtige UI-Elemente

1. Monats-, Wochen- und Tagesansicht

Die zentrale Ansicht wird je nach Auswahl als Monats-, Wochen- oder Tagesansicht dargestellt. Jede Perspektive zeigt andere Details und dient einem anderen Projektziel.

@if (_viewMode == "month")
{
	<div class="month-grid">
		@foreach (var day in _calendarDays)
		{
			<div class="day-cell" @onclick="() => OnDayClick(day.Date)">
				@day.DayNumber
			</div>
		}
	</div>
}

Das macht den Kalender flexibel: Wer Überblick braucht, nutzt die Monatssicht. Wer wirklich arbeitet, nutzt die Tagesansicht.

2. Kontextbezogene Erstellung

Ein wichtiges UX-Feature ist, dass neue Termine nicht immer auf „heute“ fallen. Wenn der Nutzer in der Tagesansicht ist, wird das aktuelle Tagesdatum verwendet.

private void StartCreateTermin()
{
	var date = _currentMonth.Date;
	if (_activeView == "day")
		date = _selectedDay.Date;

	CreateNewTermin(date);
}

Das ist für die Bedienung entscheidend, weil der Nutzer nicht jedes Mal manuell auf das richtige Datum springen muss.

3. Integration mit Notizen

Die Notizfunktion ist im Kalender nicht als eigenständiges Modul isoliert, sondern wird direkt im Arbeitskontext genutzt. Ein Termin kann mit Notizen verknüpft sein, und die wichtigsten Informationen bleiben am passenden Datum verankert.

Das verbessert die Nachvollziehbarkeit und vermeidet das Problem, dass Informationen an falschen Stellen oder in getrennten Tools liegen.

4. Zeiterfassung

Ein zusätzlicher Benefit ist die Verbindung von Kalender und Zeiterfassung. Damit wird aus dem Kalender ein Mittel zur Arbeitssteuerung statt nur eine übersichtliche Tabelle.

public async Task StartTrackingAsync(int taskId)
{
	var start = DateTime.UtcNow;
	// ...
}

So können Aufgaben und Laufzeiten gezielt einer Zeitslot-Logik zugeordnet werden, ohne ein separates Tool zu benötigen.

Datenmodell und Logik

Das Feature basiert auf einer Anwendung von Datums- und Aufgabenbeziehungen. Typische Elemente sind:

• Termin / Event
• Notiz zu einem Datum
• Zeit- oder Laufzeitdaten
• Zustände für Sichtbarkeit oder Status

Wichtig ist, dass die Daten nicht nur „textlich“ gespeichert werden, sondern immer an ein konkretes Zeitfenster gebunden sind.

Das ist der Unterschied zwischen einem bloßen Planner und einem echten Arbeitskalender.

Warum das Feature im Projekt wichtig ist

Der Kalender ist nicht nur ein Komfortmerkmal, sondern ein zentraler Baustein für die gesamte Produktivität der Anwendung. Er ist dort, wo Arbeitsabläufe und Informationsfluss zusammenkommen.

Er verbindet:

• Organisation
• Priorisierung
• Dokumentation
• Zeiterfassung
• Notizen

Damit wird ein konkreter Mehrwert für jeden Nutzer sichtbar: weniger Chaos, mehr Struktur, weniger manuelle Nacharbeit.

Effektive Nutzung

Für den Nutzer bedeutet das:

• ein Termin entsteht genau dort, wo er gerade arbeitet
• ein Tag kann schnell bearbeitet werden, ohne viel Navigieren
• Notizen bleiben im richtigen Kontext
• die wichtigsten Informationen sind direkt im Kalender sichtbar

Für den Entwickler heißt das:

• gut trennbare Ansichten
• klare Logik für aktive Datumswerte
• wiederverwendbare UI-Struktur für Termin- und Notiz-Workflows
• gute Grundlage für spätere Erweiterungen wie Aufgaben, Wiederholungen oder Ressourcenplanung

Zukunftspotenzial

Das Feature lässt sich gut erweitern mit:

• Wiederholungsfunktionen (wöchentlich, monatlich) -Terminkategorien und Farbgruppen
• Team- oder Ressourcenzuordnung
• Externem Kalender-Import/Export
• arbeitsbasierte Zeit- und Leistungsübersichten

Damit könnte aus dem vorhandenen Feature langfristig ein vollständiges Projekt- und Zeitmanagementsystem entstehen.