Calendar Display Component

Overview

The Groundswell Calendar Display, powered by ToastUI, gives designers the ability to quickly have a modern calendar display in their sites and dashboards with the simplicity of a single component. The dense, versatile display supports different calendar views with styling matching your site’s accent color. Example interfaces and utility rules are attached, which demonstrate usage and features of the component.

Key Features & Functionality

Display an array of events in Daily, Weekly, or Monthly format. Toggle days and weeks using an input parameter.
Automatic timezone shifting. By default, all provided events display in the timezone of your browser, but this can be overridden by providing TZ names ("America/Los_Angeles") OR a timezone code (EDT,CST,etc).
Multiple language support. Currently supports US English (en-US), UK English (en-GB), Spanish (es), Italian (it), Polish (pl), and Portuguese (pt).
Supports different date formats via a parameter.
Supports a detailed event pop-up of time, title, attendees, location, and event description.
Supports custom colors, font sizes, borders, and other attributes via applying custom themes.
Support for visible weeks, weekend display, and start of week for specific locale needs.
Allows event selection, should you want to edit an event or display details in addition to, or in lieu of, the detailed pop-up view.
Allows events to be "rescheduled" via drag and drop or through a modal
Allows events to be created and deleted directly from the calendar
Supports multiple calendars
More details and examples available in attached resources and sample application.

Parents

stevenk048330 5 days ago

Hi, I'd love to see German language support added to this plugin!

I've already prepared both translation files, here's what I put together:

calendar-i18n.js

'de' : {
  month0: 'Januar',
  month1: 'Februar',
  month2: 'März',
  month3: 'April',
  month4: 'Mai',
  month5: 'Juni',
  month6: 'Juli',
  month7: 'August',
  month8: 'September',
  month9: 'Oktober',
  month10: 'November',
  month11: 'Dezember',
  monthShortNames: ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'],
  day0: 'So',
  day1: 'Mo',
  day2: 'Di',
  day3: 'Mi',
  day4: 'Do',
  day5: 'Fr',
  day6: 'Sa',
  allDay:'Ganztägig',
  dayFullNames:['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
  milestone:'Meilenstein',
  task:'Aufgabe',
  exceedHeader:'mehr',
  createTitlePlaceholder:'Titel',
  createLocationPlaceholder:'Ort',
  startDatePlaceholder:'Startdatum',
  endDatePlaceholder:'Enddatum',
  bodyPlaceholder:'Inhalt',
  attendeesPlaceholder:'Teilnehmer',
  free:'Verfügbar',
  busy:'Beschäftigt',
  detailAttendees: 'Teilnehmer: ',
  detailLocation: 'Ort: ',
  detailRecurrence: 'Wiederholung: ',
  validationView:'Ungültige Ansicht. Gültige Werte sind "DAY","WEEK","MONTH"',
  validationWeekend:'Ungültige Wochenendansicht. Gültige Werte sind "FULL","NARROW","NONE"',
  validationVisibleWeeks:'Sichtbare Wochen müssen größer als 0 sein',
  edit:'Bearbeiten',
  delete:'Löschen',
  update:'Änderungen speichern',
  save:'Speichern',
  pickerConfig:{
  titleFormat: 'MMMM yyyy',
  todayFormat: '\\Heute: DD, MMMM d, yyyy',
  time: 'Uhrzeit',
  date: 'Datum'
 }
}

calendarDisplayField_de

name=Kalenderanzeige
description=Diese Komponente zeigt einen Ereigniskalender an und unterstützt mehrere Ansichtstypen sowie ein Popup mit Ereignisdetails.
parameter.title.name=Titel
parameter.title.description=Titelanzeige des Kalenders. Standard ist Monat Jahr (z.B. Januar 2021).
parameter.showTitle.name=Titel anzeigen
parameter.showTitle.description=Legt fest, ob der Titel angezeigt wird. Standard ist true.
parameter.viewType.name=Aktuelle Ansicht
parameter.viewType.description=Legt den Kalenderansichtstyp fest. Gültige Werte: DAY, WEEK (Standard) und MONTH.
parameter.dateContext.name=Kontextdatum
parameter.dateContext.description=Legt das Datum für die Ansicht fest. Wenn leer, wird das heutige Datum verwendet.
parameter.detailDateFormat.name=Datumsformat (Detail)
parameter.detailDateFormat.description=Format für Datumsangaben im Detail-Popup. Beispiel: DD.MM.YYYY. Standard: MM/DD/YYYY.
parameter.events.name=Aktuelle Ereignisse
parameter.events.description=Liste der in der aktuellen Ansicht anzuzeigenden Ereignisse.
parameter.selectedEvent.name=Ausgewähltes Ereignis
parameter.selectedEvent.description=Wert eines im Kalender ausgewählten Ereignisses.
parameter.options.name=Kalenderoptionen
parameter.options.description=Kalenderoptionen. Siehe ToastUI-Dokumentation für Beispiele.
parameter.theme.name=Kalender-Theme
parameter.theme.description=Kalender-Theme. Siehe ToastUI-Dokumentation für Beispiele.
parameter.timezone.name=Zeitzone
parameter.timezone.description=Zeitzone im tz-Format, z.B. "Europe/Berlin".
parameter.calendars.name=Kalender
parameter.calendars.description=Kalender, die Ereignisse enthalten können. Standardkalender (id: "1") verwendet die Akzentfarbe.

Comment

stevenk048330 5 days ago

Hi, I'd love to see German language support added to this plugin!

I've already prepared both translation files, here's what I put together:

calendar-i18n.js

'de' : {
  month0: 'Januar',
  month1: 'Februar',
  month2: 'März',
  month3: 'April',
  month4: 'Mai',
  month5: 'Juni',
  month6: 'Juli',
  month7: 'August',
  month8: 'September',
  month9: 'Oktober',
  month10: 'November',
  month11: 'Dezember',
  monthShortNames: ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'],
  day0: 'So',
  day1: 'Mo',
  day2: 'Di',
  day3: 'Mi',
  day4: 'Do',
  day5: 'Fr',
  day6: 'Sa',
  allDay:'Ganztägig',
  dayFullNames:['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
  milestone:'Meilenstein',
  task:'Aufgabe',
  exceedHeader:'mehr',
  createTitlePlaceholder:'Titel',
  createLocationPlaceholder:'Ort',
  startDatePlaceholder:'Startdatum',
  endDatePlaceholder:'Enddatum',
  bodyPlaceholder:'Inhalt',
  attendeesPlaceholder:'Teilnehmer',
  free:'Verfügbar',
  busy:'Beschäftigt',
  detailAttendees: 'Teilnehmer: ',
  detailLocation: 'Ort: ',
  detailRecurrence: 'Wiederholung: ',
  validationView:'Ungültige Ansicht. Gültige Werte sind "DAY","WEEK","MONTH"',
  validationWeekend:'Ungültige Wochenendansicht. Gültige Werte sind "FULL","NARROW","NONE"',
  validationVisibleWeeks:'Sichtbare Wochen müssen größer als 0 sein',
  edit:'Bearbeiten',
  delete:'Löschen',
  update:'Änderungen speichern',
  save:'Speichern',
  pickerConfig:{
  titleFormat: 'MMMM yyyy',
  todayFormat: '\\Heute: DD, MMMM d, yyyy',
  time: 'Uhrzeit',
  date: 'Datum'
 }
}

calendarDisplayField_de

name=Kalenderanzeige
description=Diese Komponente zeigt einen Ereigniskalender an und unterstützt mehrere Ansichtstypen sowie ein Popup mit Ereignisdetails.
parameter.title.name=Titel
parameter.title.description=Titelanzeige des Kalenders. Standard ist Monat Jahr (z.B. Januar 2021).
parameter.showTitle.name=Titel anzeigen
parameter.showTitle.description=Legt fest, ob der Titel angezeigt wird. Standard ist true.
parameter.viewType.name=Aktuelle Ansicht
parameter.viewType.description=Legt den Kalenderansichtstyp fest. Gültige Werte: DAY, WEEK (Standard) und MONTH.
parameter.dateContext.name=Kontextdatum
parameter.dateContext.description=Legt das Datum für die Ansicht fest. Wenn leer, wird das heutige Datum verwendet.
parameter.detailDateFormat.name=Datumsformat (Detail)
parameter.detailDateFormat.description=Format für Datumsangaben im Detail-Popup. Beispiel: DD.MM.YYYY. Standard: MM/DD/YYYY.
parameter.events.name=Aktuelle Ereignisse
parameter.events.description=Liste der in der aktuellen Ansicht anzuzeigenden Ereignisse.
parameter.selectedEvent.name=Ausgewähltes Ereignis
parameter.selectedEvent.description=Wert eines im Kalender ausgewählten Ereignisses.
parameter.options.name=Kalenderoptionen
parameter.options.description=Kalenderoptionen. Siehe ToastUI-Dokumentation für Beispiele.
parameter.theme.name=Kalender-Theme
parameter.theme.description=Kalender-Theme. Siehe ToastUI-Dokumentation für Beispiele.
parameter.timezone.name=Zeitzone
parameter.timezone.description=Zeitzone im tz-Format, z.B. "Europe/Berlin".
parameter.calendars.name=Kalender
parameter.calendars.description=Kalender, die Ereignisse enthalten können. Standardkalender (id: "1") verwendet die Akzentfarbe.

Children

No Data