Information
  • Author: Groundswell
  • Type: Plug-in (Component)
  • Support: This plug-in or utility is not supported by the author. The content is free to use with a licensed product, but it is made available as-is and Community supported.
  • Industry: All Industries
  • Compatible Version(s): 24.2
  • First Released:
  • Last Updated:
  • Cost: Free
Resources
Share
Home » AppMarket » Calendar Display Component

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
  • in reply to Miriam

    Yes that can be done with the next release.

    As a preview for that, we are looking into revamping the configuration to support *any* option that is documented by Toast rather than many individual inputs. This would look similar to how themes work now. Some of those configurations may not play nicely with Appian but I think in general it'll give you and others on here the more granular control you are looking for

  • in reply to Justin Watts

    Thank you very much for the response.

    I also take this opportunity to mention something else. Could the part about compatible versions of the plugin be updated? Currently, it only states that this plugin is compatible with version 22.3, but we are using it in version 23.2, and it works without any issues.

    Thank you for the assistance.

  • in reply to Miriam

    This option is only supported fully in a newer version of the underlying JS library. Upgrading to that version is a substantial effort. This is something we can put on our internal backlog but it is unlikely to occur soon.

  • in reply to Miriam

    I've seen that the component itself has an option to choose how many events you want to display: visibleEventCount

    Is it possible to add this option to the plugin?

    https://github.com/nhn/tui.calendar/blob/main/docs/en/apis/options.md

    Thanks

  • Hi,

    Is there a possibility for displaying all events of the same day in the monthly calendar?

    When there are more than 2 events, it does not show all of them:

    Thanks in advance

  • v6.2.0 Release Notes
    • If a calendar is not readonly, the calendar now supports in-line creation, update, and delete. Previously, only drag/drop update was possible.

  • in reply to Hemnath Soundarrajan

    No I'm talking about the "customStyle" property

  • Hi, I am facing an issue with the styling of the events.
    If the calendar ID is set to 1 as given in the documentation, the component is not rendering the given styling input, but if the calendar ID is set as an invalid value then the event is rendered in the expected styling.

    Also found a few differences as highlighted in the screenshot.

    Is this behavior expected?


    Also, is there a way to alter the background color of a particular weekday(Ex. Monday, Tuesday) instead of weekends and weekdays in general? - This tag for example - 'month.weekend.backgroundColor': 'inherit',

  • in reply to marcore95

    Are you talking about the font size and font style of the popup that opens on clicking an event?
    If so, I can't see any options given to alter those values.

    However, there is an option to alter the font size of the day number that is displayed on the component.
    That can be configured as follows

  • Hi, I need to customize the events into the month visualization. I found the property "customStyle" that I think can help me to change the fontStyle, size and so on but i can't understand how to modify it. Into the documentation I found about this parameter "The style to apply to the event element. A JavaScript object with CSS properties in camelCase." but after a lot of test I can't find a solution.
    Can anyone help me to customize the customStyle event property? Have anyone some examples of customization using this property?
    Thank you a lot

© 2024 Appian. All rights reserved.
We want to hear from you! Submit a review on Gartner or G2.