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.
Anonymous
  • 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.
  • v7.13.0 Release Notes

    • Address: CVE-2026-0540, CVE-2025-15599
  • Hi Team , 

    How can I remove the scroll bar component from the Date and All Day sections for week and day views of the calendar as highlighted in the below screenshot ? Thanks

  • Hello, there doesnt seem to be an option to export this nicely. Any advice?

  • v7.12.0 Release Notes
    • Bug fix: Correctly supporting isAllday parameter on events
  • This looks like a plugin caching issue within Appian itself, where it looks like the system is confused as "v7" technically no longer exists. We tested deployment of this on several sites and unfortunately are not seeing the same issue - once we rename the expression to just "calendarDisplayField" all functionality is as expected.

    For next steps, I would suggest trying to uninstall the component fully then reinstalling, and if that does not work, your site might need a restart.

    As noted below, an older version of the plugin is attached if you need to rollback.

  • Hi team,

    I write here because, like other previous comments, since the last version we have not been able to use the component in Appian. When writing calendarDisplayField() it is still recognized as a function and even throws an error as if we were calling calendardisplayfield_v7, and no.



    We are currently using it with several clients if we could solve it, it would be great.

  • com.groundswellcg.plugins.toastCalendar_7.10.0_signed.zip

    v7.10 attached if truly needed but the function call for 7.11 and going forward will be just calendarDisplayField(). This is an unfortunate side effect of removing support for all pre-v7 versions of this plugin to make maintenance significantly easier.

  • Hi team, we upgraded to 7.11.0 and the component is no longer recognized by Appian 25.2


    Furthermore, we cannot rollback to the previous plugin version because it is more than 3 months old. This is an issue. Please advise.

  • v7.11.0 Release Notes
    • Bug fix: Correctly removing time for multiday events where start date falls on same day of the week.