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
Parents

  • Hello,

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

  • in reply to Sandeep Kunder

    Hi can you share your code from the interface designer?

  • in reply to Sandeep Kunder

    Hi Sandeep,

    can you guide me on how this issue was resolved, I am facing similar issue with the plugin. I have copied the same code.

    Thanks

    Preeti Sinha

  • in reply to Sandeep Kunder

    Hello, I am Working on calendar events and used same Interface but i need to show the events which is saved in the DB. Can you suggest me how to to that?

  • in reply to Justin Watts

    Hi and - the plug-in has been updated!

  • in reply to Sandeep Kunder

    This is helpful - it's a locale problem I believe. What locale is Appian set to? I'm going to guess en-gb - if that's the case we can add language support for that pretty easily.

  • in reply to Justin Watts

    Sorry, my previous reply was marked as spam for some reason.

    I see this error in browser console across Chrome/firefox/safari

  • in reply to Sandeep Kunder

    That same code works for me as well, so I assume issue is related to your browser. Please provide your browser type and version, as well as any message showing up in Developer Tools console.

  • in reply to Sandeep Kunder

    Hi - I've reached out to the author to see if they can assist further.

  • in reply to April Schuppel

    I have installed correctly. This is what the same interface looks link in my designer.

  • in reply to Sandeep Kunder

    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?

  • in reply to April Schuppel

    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

Comment
  • in reply to April Schuppel

    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

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