Wir haben euch bereits unsere Applikation für SharePoint Veranstaltungs-Buchungen in einigen Blogbeiträgen vorgestellt. Diese ist bereits seit einigen Wochen im Microsoft Store verfügbar. Natürlich entwickeln wir unsere Produkte laufend weiter und gehen dabei selbstverständlich auch auf Kundenfeedback und Wünsche ein. In diesem Beitrag möchten wir euch daher gerne nähere Einblicke in unsere neueste Erweiterung in Form einer Kalenderansicht geben.
Kalenderansicht über Toggle aktivieren
Bisher haben wir die Veranstaltungen und die dazugehörigen Termine in einer Liste dargestellt. In der linken Spalte haben wir alle aktuellen Veranstaltungen angezeigt, in der rechten Spalte die dazugehörigen Termine. Durch unsere neueste Erweiterung der Applikation, hat der Benutzer nun die Möglichkeit eine Kalenderansicht über einen Toggle in der Menüleiste zu aktivieren. Alle Veranstaltungs-Termine werden in der Kalenderansicht angezeigt. Vom Benutzer gebuchte Termine werden durch einen grünen Hintergrund hervorgehoben. Dadurch erlangt der Benutzer eine gute Übersicht über alle Veranstaltungs-Termine. Standardmäßig zeigen wir die Termine in einer Wochenansicht an.
Der Benutzer kann jedoch auch zu einer Monatsansicht wechseln.
Termin-Details im Panel
Klickt ein Benutzer auf einen Termin in der Kalenderansicht, öffnen wir ein eigenes Panel auf der rechten Seite. In diesem Panel zeigen wir die Details des Termins und der dazugehörigen Veranstaltung an. Der Benutzer hat dann die Möglichkeit, sich im Panel zu dem Termin an- oder abzumelden.
Lokalisierung für den Kalender
Wir haben für die Umsetzung der Kalenderansicht das npm package „fullcalender“ verwendet. Mit diesem Package hat man die Möglichkeit die Lokalisierung als Parameter mitzugeben.
// Deutsche Lokalisierung -> z.B. Mo, Di, Mi, Do, Fr, Sa, So
<FullCalendar
locale="de" />
// Englische Localization -> e.g. Mon, Tue, Wed, Thu, Fri, Sat, Sun
<FullCalendar
locale="en" />
Je nach konfigurierter Lokalisierung werden die Überschriften des Kalenders (z.B. Tage, Monat) in Englisch oder Deutsch dargestellt. Weiters ist auch der erste Tag der Woche je nach Lokalisierung ein Montag oder Sonntag. Möchte man den ersten Tag der Woche unabhängig von der aktuellen Lokalisierung einstellen, ist dies über die Webpart-Einstellungen möglich.
Haben wir euer Interesse geweckt und hättet ihr gerne nähere Informationen zu unserer Veranstaltungs-Kalenderansicht? Dann nehmt gerne Kontakt mit uns auf.