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 Justin,

    Thanks again for your support.

    I tried in an incognito. It doesn't work.

    I look forward to your reply!

  • I've run the same test with all available versions and am getting successful results (attaching that SAIL here as well):

    Given the NaN error, I'm thinking something unexpected is happening in the JS files itself, likely a cache error. So to start, can you please try clearing browser cache or accessing this interface incognito to see if that works better?

    If not, then I'll need any Console errors from Chrome's Dev Tools (F12) , like below:

    a!localVariables(
      local!events: {
          a!map(
            id: 15,
            calendarId: 1,
            title: "El Farolito de Calahorra",
            category: "time",
            location: "La Cabina - Madrid",
            attendees: "SALVADOR ESTR" & fn!char(193) & "N GEA",
            body: "Status: Confirmada",
            start: "2023-08-25T10:30:00.000Z",
            end: "2023-08-25T12:00:00.000Z"
          ),
          a!map(
            id: 16,
            calendarId: 1,
            title: "El Farolito de Calahorra",
            category: "time",
            location: "La Cabina - Madrid",
            attendees: "JUAN BARBADILLO CLABBURN",
            body: "Status: Rechazada",
            start: "2023-08-25:00:00.000Z",
            end: "2023-08-25T12:30:00.000Z"
          )
      },
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents:{
              calendarDisplayField_v3(
                dateContext: today(),
                viewType: "DAY",
                events: local!events
              )          
            }
          ),
          a!columnLayout(
            contents:{
              calendarDisplayField_v4(
                dateContext: today(),
                viewType: "DAY",
                events: local!events
              )
            }
          ),
          a!columnLayout(
            contents:{
              calendarDisplayField_v5(
                dateContext: today(),
                viewType: "DAY",
                events: local!events
              )
            }
          )      
        }
        )
    )

  • Hi! Thanks for your response.

    It doesn't wrok with the lastest version. It only works with v2.

    I have 23.2 cloud version

  • Unfortunately, I can't replicate the issue; I was successfully with the following. I created a simple test interface with your date (altered to today's today). Hopefully this helps.

  • Hi!!

    I am having trouble displaying two events on the same day, in a calendar of type DAY.

    Can you help me?

    My events:

    {a!map(id: 15, calendarId: 1, title: "El Farolito de Calahorra", category: "time", location: "La Cabina - Madrid", attendees: "SALVADOR ESTR" & fn!char(193) & "N GEA", body: "Status: Confirmada", start: "2023-03-27T10:30:00.000Z", end: "2023-03-27T12:00:00.000Z"), a!map(id: 16, calendarId: 1, title: "El Farolito de Calahorra", category: "time", location: "La Cabina - Madrid", attendees: "JUAN BARBADILLO CLABBURN", body: "Status: Rechazada", start: "2023-03-27T12:00:00.000Z", end: "2023-03-27T12:30:00.000Z")}

  • It seems the zip uploaded is not signed version, it throws the following error at installing:

    Failed to load Plug-in 'com.groundswellcg.plugins.toastCalendar' (com.groundswellcg.plugins.toastCalendar) version 0.0: 'Component plug-in approval verification failed. Please contact Appian for approval process'

  • v5.0.3 Release Notes
    • New parameter "StartDayOfWeek" allows designer to override default week start (Sunday) to any day of the week as needed for specific locales.

  • this has been submitted as v5 of the component. I expect that will be released by next week.

  • v4.3.0 Release Notes
    • Calendar now supports Portugues [pt] and Polish [pl] locales