Calendar Display Component

Hello,

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

Hello,

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

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

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?

Hi and Justin Watts - the plug-in has been updated!

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.

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

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

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.

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

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

Hi sandeepk101 - 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 April Schuppel

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