Calendar Display Component

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 Functionality and Features
  • Display an array of events in Daily, Weekly, or Monthly format. Toggle days and weeks using an input parameter.
  • Automatic timezone shifting. All provided events display in the timezone of your browser. Datetimes must be provided to component in GMT.
  • Multiple language support. Currently supports US English (en-US) and Spanish (es).
  • Supports different date formats via a parameter.
  • Supports a detailed event pop-up of time, title, attendees, location, and event description.
  • 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.
  • More details available in attached resources and sample application
Anonymous
  • Hi - I've reached out to the author to see if they can assist further.

  • Hi  - I copied & pasted your code and it successfully displayed the interface in the Interface Designer and in a Site. Are you sure the plug-in is deployed to the site?

  • Hi

    Thanks for your quick response.

    I did initially try to use the plugin on a test interface without much success. Then imported 'GCG - AppMarket - Calendar' from the download zip. E.g. interface i have been trying to see looks like as below.

    load(
      local!viewType:"WEEK",
      local!selectedEvent,
      local!currentDate:todate("1/26/2020"),
      local!events:{
        {
          id: "2",
          calendarId: "1",
          title: "Work conference",
          category: "time",
          start: "2020-02-01T09:00:00.000Z",
          end: "2020-02-01T10:00:00.000Z",
          location: "Downtown",
          attendees: "Simple list: Mary and Joe",
          body: "Appian conference."
        },
        {
          id: "3",
          calendarId: "1",
          title: "Potluck",
          category: "time",
          start: "2020-01-27T06:30:00.000Z",
          end: "2020-01-27T13:30:00.000Z",
          location: "1234 Main Street",
          attendees:{"Array of values: ","Mary","Sue"},
          body: "Yearly potluck."
        },
        {
          id: "4",
          calendarId: "1",
          title: "Study Group",
          category: "time",
          start: "2020-01-27T01:00:00.000Z",
          end: "2020-01-28T02:00:00.000Z",
          location: "Jim's House",
          body: "Cram session for the exam."
        },
        {
          id: "5",
          calendarId: "1",
          title: "Swim Practice",
          category: "time",
          /*start: "2020-01-30T09:30:00.000Z",*/
          /*end: "2020-01-30T10:30:00.000Z"*/
          /*location: "Swimming pool",*/
          /*attendees:"Mary, John, and Sue",*/
          /*body: "Need to do 10 laps"*/
        }    
      },
      a!sectionLayout(
        contents:{
          a!columnsLayout(
            columns:{
              a!columnLayout(
                contents:{
                  a!buttonArrayLayout(
                    buttons:{
                      a!buttonWidget(
                        label:"Month",
                        value:"MONTH",
                        saveInto:local!viewType,
                        style:if(local!viewType="month","PRIMARY","SECONDARY")
                      ),
                      a!buttonWidget(
                        label:"Week",
                        value:"WEEK",
                        saveInto:local!viewType,
                        style:if(local!viewType="week","PRIMARY","SECONDARY")
                      ),
                      a!buttonWidget(
                        label:"All Day",
                        value:"DAY",
                        saveInto:{
                          local!viewType,
                          a!save(local!currentDate,today())
                        },
                        style:if(local!viewType="day","PRIMARY","SECONDARY")
                      )           
                    }
                  )             
                }
              ),
              a!columnLayout(
                contents:{
                  a!buttonArrayLayout(
                    buttons:{
                      a!buttonWidget(
                        label:"Previous Month",
                        value:-7,
                        saveInto:a!save(
                          local!currentDate,
                          eomonth(local!currentDate,-1)
                        )
                      ),
                      a!buttonWidget(
                        label:"Next Month",
                        value:7,
                        saveInto:a!save(
                          local!currentDate,
                          eomonth(local!currentDate,1)
                        )
                      )          
                    },
                    showWhen:local!viewType="month",
                    align:"END"
                  ),              
                  a!buttonArrayLayout(
                    buttons:{
                      a!buttonWidget(
                        label:"Previous Week",
                        value:-7,
                        saveInto:a!save(
                          local!currentDate,
                          local!currentDate+save!value
                        )
                      ),
                      a!buttonWidget(
                        label:"Next Week",
                        value:7,
                        saveInto:a!save(
                          local!currentDate,
                          local!currentDate+save!value
                        )
                      )          
                    },
                    showWhen:local!viewType="week",
                    align:"END"
                  ),
                  a!buttonArrayLayout(
                    buttons:{
                      a!buttonWidget(
                        label:"Previous Day",
                        value:-1,
                        saveInto:a!save(
                          local!currentDate,
                          local!currentDate+save!value
                        )
                      ),
                      a!buttonWidget(
                        label:"Next Day",
                        value:1,
                        saveInto:a!save(
                          local!currentDate,
                          local!currentDate+save!value
                        )
                      )          
                    },
                    showWhen:local!viewType="day",
                    align:"END"
                  )                
                }
              )
            }
          ),
          a!columnsLayout(
            columns:{
              a!columnLayout(
                contents:{
                  calendarDisplayField(
                    viewType:local!viewType,
                    dateContext:local!currentDate,
                    detailDateFormat:"YYYY-MM-DD",
                    useDetailPopup: true,
                    events:local!events,
                    selectedEvent: local!selectedEvent
                  )            
                }
              )
            }
          ),
          a!paragraphField(
            label:"Selected Event",
            value:local!selectedEvent,
            saveInto:local!selectedEvent
          )  
        }
      )
    )

    Let me know if you need more info.

    (Cloud platform is version 19.4)

    Thanks,

    Sandeep

  • Hi can you share your code from the interface designer?

  • Hello,

    This plugin sounds interesting. I have installed in our cloud platform to test it out. IT fails to display the calendar.