How to create Calendar component using Card layout and display the Attendance marked, Leaves taken and current date in different color coding?

Without any details, the only thing I can say is, that there seems to be a problem in the logic of how you determine the style for these card layouts.

https://stackoverflow.com/help/how-to-ask

codeblog.jonskeet.uk/.../

Hi Stefan,

Sorry for my delayed response. Here are the code snippet I am using.

a!localVariables(
local!monthnames: {"JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"},
local!week: {"S","M","T","W","T","F","S"},
local!month: month(today()),
local!year: year(today()),
local!blank: a!forEach(
items: enumerate(
weekday(date(local!year, local!month, 1)) - 1
),
expression: " "
),
local!dates: append(
local!blank,
enumerate(daysinmonth(local!month, local!year)) + 1
),
local!select,

{
a!sectionLayout(
label: "",
contents: {
/*a!cardLayout(*/
/*contents: {*/
/*a!richTextDisplayField(*/
/*labelPosition: "COLLAPSED",*/
/*value: {*/
/*a!richTextItem(*/
/*text: {*/
/*a!richTextIcon(*/
/*icon: "calendar"*/
/*),*/
/*"CALENDAR"*/
/*},*/
/*color: "ACCENT",*/
/*size: "LARGE",*/
/*style: {*/
/*"EMPHASIS"*/
/*}*/
/*)*/
/*},*/
/*preventWrapping: false,*/
/*align: "CENTER",*/
/*marginAbove: "STANDARD",*/
/*marginBelow: "STANDARD"*/
/*)*/
/*},*/
/*height: "AUTO",*/
/*style: "#efefef",*/
/*shape: "",*/
/*marginBelow: "STANDARD",*/
/*showBorder: false,*/
/*showShadow: true*/
/*),*/
a!cardLayout(
contents: {
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!richTextDisplayField(
labelPosition: "ABOVE",
value:
a!richTextItem(
text: local!monthnames[local!month] & ", " & local!year,
color: "STANDARD",
size: "MEDIUM",
style: "STRONG"
),
align: "CENTER",
marginAbove: "STANDARD"

)
}
),
a!columnLayout(
contents: {
a!cardLayout(
contents: {
a!dropdownFieldByIndex(
label: "Months",
labelPosition: "ABOVE",
placeholder: "Select Month",
choiceLabels: {local!monthnames},
value: local!month,
saveInto: {
local!month,
a!save(
local!blank,
a!forEach(
items: enumerate(weekday(1 / local!month / local!year, 1)),
expression: " "
)
),
a!save(local!dates, null()),
a!save(
local!dates,
append(
local!blank,
enumerate(daysinmonth(local!month, local!year)) + 1
)
)
},
searchDisplay: "AUTO",
validations: {}
)

},
height: "AUTO",
style: "TRANSPARENT",
marginBelow: "STANDARD"
)
}
),
a!columnLayout(
contents: {
a!cardLayout(
contents: {
a!dropdownField(
label: "Year",
labelPosition: "ABOVE",
placeholder: "Select Year",
choiceLabels: 1950 + enumerate(local!year),
choiceValues: 1950 + enumerate(local!year),
value: local!year,
saveInto: {
local!year,
a!save(
local!blank,
a!forEach(
items: enumerate(weekday(1 / local!month / local!year, 1)),
expression: " "
)
),
a!save(local!dates, null()),
a!save(
local!dates,
append(
local!blank,
enumerate(daysinmonth(local!month, local!year)) + 1
)
)
},
searchDisplay: "AUTO",
validations: {}
)
},
height: "AUTO",
style: "TRANSPARENT",
marginBelow: "STANDARD"
)
}
)
}
)
},
height: "AUTO",
style: "TRANSPARENT",
marginBelow: "STANDARD"
),
a!cardLayout(
contents: {
a!columnsLayout(
columns: {
a!forEach(
items: enumerate(length(local!week)) + 1,
expression: a!columnLayout(
contents: a!cardLayout(
contents: a!richTextDisplayField(
labelPosition: "ABOVE",
value:{
if(
(fv!item = 1),
a!richTextItem(
text: index(local!week, fv!item, ""),
color: "NEGATIVE",
size: "STANDARD",
style: "STRONG"
),
(if((fv!item = 7),
a!richTextItem(
text: index(local!week, fv!item, ""),
color: "ACCENT",
size: "MEDIUM",
style: "STRONG"
),
a!richTextItem(
text: index(local!week, fv!item, ""),
size: "MEDIUM",
style: "STRONG"
)
)
)
)
},
align: "CENTER"

),
shape: "ROUNDED",
showShadow: true()
)
)
)
}
)

},
height: "AUTO",
style: "TRANSPARENT",
marginBelow: "STANDARD"
)
}
),
a!cardLayout(
contents: {
a!forEach(
items: enumerate(
if(
mod(length(local!dates), 7) = 0,
quotient(length(local!dates), 7),
sum(quotient(length(local!dates), 7) + 1)
),

),
expression: a!columnsLayout(
columns: {

a!forEach(
items: (fv!item - 1) * 7 + enumerate(7) + 8,
expression: a!columnLayout(
contents: a!cardLayout(
contents: if(
index(local!dates, fv!item, " ") = " ",
a!richTextDisplayField(
value: a!richTextItem(
text: index(local!dates, fv!item, ""),
size: "SMALL"
),
align: "CENTER"
),
a!richTextDisplayField(
value: a!richTextItem(
text: index(local!dates, fv!item, ""),
size: "SMALL"
),
align: "CENTER"
)
),
showBorder: index(local!dates, fv!item, " ") <> " ",
link: if(
index(local!dates, fv!item, " ") = " ",
null(),
a!dynamicLink(
value: index(local!dates, fv!item, " "),
saveInto: {local!select,
a!save(local!dates,date(local!year,local!month,tointeger(local!select)))
}
)
),
shape: "ROUNDED",
style: if(
a!isNotNullOrEmpty(local!select),
"ACCENT",
if(
and(index(local!dates,fv!item, " ") = day(today()),
local!month = month(today()),
local!year = year(today())),
"SUCCESS",
"NONE"
)
)
)
),
)
},
)
)
},
height: "AUTO",
style: "TRANSPARENT",
marginBelow: "STANDARD"
)
})

Using the "Insert Code" function makes that much more readable.

This snippet seems suspicious. Any selection makes that field style "ACCENT".

style: if(
  a!isNotNullOrEmpty(local!select),
  "ACCENT",
  if(
    and(
      index(local!dates,fv!item, " ") = day(today()),
      local!month = month(today()),
      local!year = year(today())
    ),
    "SUCCESS",
    "NONE"
  )
)

Using the "Insert Code" function makes that much more readable.

This snippet seems suspicious. Any selection makes that field style "ACCENT".

style: if(
  a!isNotNullOrEmpty(local!select),
  "ACCENT",
  if(
    and(
      index(local!dates,fv!item, " ") = day(today()),
      local!month = month(today()),
      local!year = year(today())
    ),
    "SUCCESS",
    "NONE"
  )
)