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
  • More details and examples available in attached resources and sample application.
Anonymous
  • (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.

  • Hello,

    I am using your calendar (v7) in my appian application (v23.3) and I have a few questions:

    1. When I try to use the option: 

    month:{
    dayNames: {"MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"}
    }

    it doesn't work. Thursday is still "THURS". Am I doing something wrong here? The rest of the options work fine for me, for example month.workWeek works as intended.

    2. When I was using v6 the events in calendar were displayed with their title name, but in v7 their title is led by the time. So for example if title was previously displayed as "Title" it is now displayed as "1:00 am - Title." Is there a way to disable/format this?

    3. When I use theme: 

    {
    month:{

    dayName: {

        borderLeft: "1px solid #999999"

    }
    }
    the borders do not match the calendar horizontally. Can I fix this somehow?



    4. When I use the component on my phone as an mobile app in official appian app from the play store on android, the scrolling doesn't work. I have to place my finger outside of the component to move the page up or down. This is quite hard to do as the calendar takes up most of the screen. Is there anything I could do about this?

  • v7.1.0 Release Notes
    • v7 is a complete overhaul of the Groundswell Calendar framework, allowing for even more configuration ability to designers.
    • ToastUI library updated from 1.5.3 to 2.1.3
    • Several individual configurations removed and merged into a new "options" configuration. Now designers can use almost any number options like custom daynames, week counts
    • "theme" parameter structure has changed to be dictionary format, similar to options
    • Component height now can be adjusted to present an optimized calendar rendering

    See the attached upgrade guide, sample app, and additional documentation for more details on moving from v1-v6 --> v7!

  • That looks very good!

    One question, is there any possibility to export the calendar?

    Thanks a lot for everything!!

  • v7 of the calendar that will partially support this has been submitted to Appian, so keep an eye out for that soon. The configuration options to allow showing more events are in place, but part of that is overriden by how much space you give the calendar.

    Using a monthly view, and setting visible weeks to 1 or 2, will allow for more events to display. Sneak peak with 4 events:

  • Appian has adjusted the versions to be a range. Hopefully this resolves your team's concerns for now

  • Yes, that would be perfect; just displaying 22.3+ would be sufficient.

    I'm really sorry for the inconvenience

  • To clarify, compatible version is meant to be the minimum Appian version that is compatible, not the only version that is compatible. This is what the component submission process looks like in the back-end for this field (a single selected version):

    So, in my opinion, there is a disconnect between this policy and what the Community metadata actually means.

    That said, I can see how this isn't obvious. The best I can offer is to ask Appian if they will revert the change they just made, and then ask them to make a custom update, and set the version to 22.3+, to explicitly indicate 22.3 and up are compatible.

  • Hi,

    Thank you very much for your effort. However, due to company policy, I can't install a plugin that doesn't display the version we currently have in our environment in the compatible versions section. Our current version in the on-premise environment is 23.2, but we will soon be upgrading to 23.3. Therefore, could you please include all compatible versions in that section (23.4 and lower or 23.2, 23.3, and 23.4)?

    Thank you very much, and I apologize for any inconvenience.