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'm using the plugin in Edge, Chrome, Explorer and it works properly. When I try to use the plugin into Safari I cannot see the events into calendar but only the "N more" label into the top-right of each day. I added the property to set the number of events to show but it works everywhere except for Safari. An other problem is that this "2 more" label is not clickable in Safari, it appears as disabled, but Chrome, Edge and Explorer allow to click it. Do you know why? Can you fix these bugs? I'm using v.7.3.0

  • Looking into this, we should be able to support both in the next update to this component. Current in progress version below". No official ETA on releasing this but I'd like to get it out early this month.

  • The library appears to not support that field either yet

  • Thanks a lot for your reply,
    and what about the "body" field ?

  • Unfortunately, the base library for this componenet does not currently support adding/modifying attendees from the popup. I do not know if it is on their backlog to implement.

  • Hi,
    I'm using the Calendar (7.3.0) with Appian 24.1, and I don't understand how to display Attendee and Body fields in the Edit Form ?
    In the readonly form, the fields are well displayed, but when I click on the Edit button, the 2 fields are missing :



    Regards

  • I'm not aware of any configuration in the library that allows for overriding that functionaity.

  • Is there any way to remove the "hand with finger" icon on mouse hover a calendar event on month view? I used the "readOnly: true" field yet into "options" parameter and also in all the event I loaded into "eventsValue", but the event is still clickable (I set to false also the popup from parameters 'useFormPopup' e 'useDetailPopup', but when I go hover events the basic arrow does not remain, the 'hand with finger' appears instead)

    calendarDisplayField(
      viewType: "MONTH",
      showTitle: false,
      disabled: false,
      dateContext: index(local!splittedItem, 1, "") & "/01/" & index(local!splittedItem, 2, ""),
      detailDateFormat: "DD/MM/YYYY",
      eventsValue: local!events,
      options: {
        defaultView: "month",
        useFormPopup: false,
        useDetailPopup: false,
        isReadOnly: true,
        theme: {
          common: {
            backgroundColor: "#FFFFFF",
            border: "1px solid #e5e5e5",
            dayName: {
              color: "#000000"
            },
            holiday: {
              color: "#000000"
            },
            saturday: {
              color: "#000000"
            },
          },
          month: {
            dayExceptThisMonth: {
              color: "#d3d3d3"
            },
            holidayExceptThisMonth: {
              color: "#d3d3d3"
            }
          }
        },
        month: {
          visibleEventCount: 3,
          dayNames: {"sun", "mon", "tue", "wed", "thu", "fri", "sat"},
          startDayOfWeek: 1,
          isAlways6Weeks: false
        }
      }
    )

  • v7.3.0 Release Notes
    • Bug fixes for 7.3.0:
    • Addressed issue where time of event was incorrectly timezone shifted when editing an event
    • Removed time prefix on events in Daily and Weekly view, shortened time prefix on events in Monthly view - this should now align with Google Calendar behavior

  • (1) I don't see this behavior on my end. With options configured as:

    I see the following for my Month view. I'd need more information on your configuration to provide additional feedback.

    (2) The time was added in an effort to make the events easier to track in Month view, though it also appears in Week/Daily view which was not intended. There is not currently a way to format this, but I will at the very least remove this from Week/Daily view in the next release (TBD).

    (3) I encountered a similar issue in testing. This appears to be an issue with the underlying library and I'm not currently of a way to resolve it. Some of the border capabilities in the old Toast version seem to have been removed in v2 unfortunately.

    (4) My initial thought is to consider using a narrower view (Day, for example) or try padding with a narrow column to give you more scroll space. Otherwise, I'm not aware of anyway to solve this as the component is loaded inside a frame as part of Appian's framework.