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

Question

I have created a sample code, where the current date is being displayed in specific color, but I am facing an issue while selecting the date. Once the date is selected I am getting the issue mentioned below. 
 The calendar display

The calendar after selection of date : 
 
 The calendar display after selecting month:

dhivyam7397 · Answer

Hi 
 I have made a few changes to your code (Please refer to the below code), Hope it will resolve your issue. 
 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!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(
 and(
 index(local!dates, fv!item, " ") = tointeger(local!select),
 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"
 )
 }
) 
 Now we can pick a date