Calendar view in grid layout

While working with scheduling applications/modules, the calendar plays a vital role as it can show the number of appointments, and various other details about the month/week. Hence, here I bring you the Appian preset for the calendar (month view) in Appian’s own grid, without any plugin.

In the code below, local!currentDate gives the date in every cell so any events on that date can be added below the variable, in the same richTextDisplayField.

Pre-requisites

• Create 2 variables
  • month -> Number (Integer)
  • year -> Number (Integer)

Code Block

/*This code has been written by Harshit Bumb and taken from AppianSpace.com */
a!localVariables(
  local!weekday: weekday(date(ri!year, ri!month, 01)),
  local!today: today(),
  local!outerLoopItems: {
    - local!weekday + 1,
    - local!weekday + 8,
    - local!weekday + 15,
    - local!weekday + 22,
    - local!weekday + 29,
    - local!weekday + 36
  },
  {
    a!gridLayout(
      headerCells: {
        a!gridLayoutHeaderCell(label: "SUNDAY"),
        a!gridLayoutHeaderCell(label: "MONDAY"),
        a!gridLayoutHeaderCell(label: "TUESDAY"),
        a!gridLayoutHeaderCell(label: "WEDNESDAY"),
        a!gridLayoutHeaderCell(label: "THURSDAY"),
        a!gridLayoutHeaderCell(label: "FRIDAY"),
        a!gridLayoutHeaderCell(label: "SATURDAY")
      },
      columnConfigs: {},
      rows: {
        a!localVariables(
          a!forEach(
            items: local!outerLoopItems,
            expression: a!gridRowLayout(
              contents: a!localVariables(
                local!outerLoopItem: fv!item,
                a!forEach(
                  items: { enumerate(7) + 1 },
                  expression: a!localVariables(
                    local!currentDate: date(
                      ri!year,
                      ri!month,
                      local!outerLoopItem + fv!item
                    ),
                    {
                      a!richTextDisplayField(
                        value: {
                          a!richTextItem(
                            text: if(
                              a!isNullOrEmpty(local!currentDate),
                              {},
                              datetext(local!currentDate, "dd")
                            ),
                            size: "MEDIUM",
                            style: if(
                              or(local!currentDate = today()),
                              "STRONG",
                              "PLAIN"
                            ),
                            color: if(
                              or(local!currentDate = today()),
                              "ACCENT",
                              "STANDARD"
                            ),
                            
                          ),
                          char(10),
                          char(10),
                          char(10),
                          
                        }
                      )
                    }
                  )
                )
              ),
              showWhen: if(
                or(
                  fv!item >= tointeger(
                    text(
                      eomonth(date(ri!year, ri!month, 1), 0),
                      "dd"
                    )
                  )
                ),
                false(),
                true()
              )
            )
          )
        )
      },
      selectionSaveInto: {},
      validations: {},
      shadeAlternateRows: false()
    )
  }
)

✍🏼Feel free to post any questions or request any presets in the comments below.