Grey out particular dates and weekends in Date selection field

RE: Grey out particular dates and weekends in Date selection field

baji mekala — Mon, 21 Oct 2024 06:23:55 GMT

Date Picker Field does not support this feature.

Can you have a look at this code once it may help you

a!localVariables(
  local!toDate,
  local!months: {
    "JANUARY",
    "FEBRUARY",
    "MARCH",
    "APRIL",
    "MAY",
    "JUNE",
    "JULY",
    "AUGUST",
    "SEPTEMBER",
    "OCTOBER",
    "NOVEMBER",
    "DECEMBER"
  },
  local!weekDays: {
    "MON",
    "TUE",
    "WED",
    "THU",
    "FRI",
    "SAT",
    "SUN"
  },
  local!date: date(
    year(local(now())),
    month(local(now())),
    day(local(now()))
  ),
  local!month: month(local!date),
  local!year: year(local!date),
  local!daysInMonth: daysinmonth(local!month, local!year),
  local!startDay: weekday(date(local!year, local!month, 1), 2),
  local!endDay: weekday(eomonth(local!date, 0), 2),
  local!dates: a!forEach(
    items: enumerate(local!daysInMonth),
    expression: date(local!year, local!month, fv!index)
  ),
  local!leftPad: reverse(
    todate(
      a!forEach(
        items: enumerate(local!startDay - 1),
        expression: a!subtractDateTime(
          date(local!year, local!month, 1),
          0,
          0,
          fv!index
        )
      )
    )
  ),
  local!rightPad: todate(
    a!forEach(
      items: enumerate(7 - local!endDay),
      expression: a!addDateTime(
        date(
          local!year,
          local!month,
          local!daysInMonth
        ),
        0,
        0,
        fv!index
      )
    )
  ),
  local!finalDates: a!flatten(
    {
      local!leftPad,
      local!dates,
      local!rightPad
    }
  ),
  local!maxRows: length(local!finalDates) / 7,
  a!sectionLayout(
    contents: {
      a!cardLayout(
        padding: "NONE",
        contents: {
          a!richTextDisplayField(
            value: {
              a!richTextIcon(
                icon: "angle-left",
                link: a!dynamicLink(
                  saveInto: {
                    a!save(
                      local!month,
                      if(local!month = 1, 12, local!month - 1)
                    ),
                    a!save(
                      local!year,
                      if(local!month = 12, local!year - 1, local!year)
                    ),
                    a!save(
                      local!date,
                      date(local!year, local!month, 1)
                    )
                  }
                ),
                linkStyle: "STANDALONE",
                size: "MEDIUM"
              ),
              a!richTextItem(
                text: "   " & local!months[local!month] & "  " & local!year & "   ",
                size: "MEDIUM",
                style: "STRONG"
              ),
              a!richTextIcon(
                icon: "angle-right",
                link: a!dynamicLink(
                  saveInto: {
                    a!save(
                      local!month,
                      if(local!month = 12, 1, local!month + 1)
                    ),
                    a!save(
                      local!year,
                      if(local!month = 1, local!year + 1, local!year)
                    ),
                    a!save(
                      local!date,
                      date(local!year, local!month, 1)
                    )
                  }
                ),
                linkStyle: "STANDALONE",
                size: "MEDIUM"
              )
            },
            align: "CENTER"
          )
        },
        style: "#1d659c",
        marginBelow: "EVEN_LESS"
      ),
      a!columnsLayout(
        columns: {
          a!forEach(
            items: local!weekDays,
            expression: a!columnLayout(
              contents: {
                a!cardLayout(
                  padding: "NONE",
                  contents: {
                    a!richTextDisplayField(
                      value: {
                        a!richTextItem(
                          text: fv!item,
                          size: "SMALL",
                          style: "STRONG"
                        )
                      },
                      align: "CENTER"
                    )
                  }
                )
              }
            )
          )
        },
        marginBelow: "NONE",
        spacing: "NONE",
        stackWhen: "NEVER"
      ),
      a!forEach(
        items: enumerate(local!maxRows),
        expression: a!columnsLayout(
          columns: {
            a!localVariables(
              local!index: fv!item,
              a!forEach(
                items: enumerate(7),
                expression: a!localVariables(
                  local!calendarDate: local!finalDates[(local!index * 7) + fv!index],
                  {
                    a!columnLayout(
                      contents: {
                        {
                          a!cardLayout(
                            padding: "EVEN_LESS",
                            showWhen: month(local!calendarDate) = month(local!date),
                            contents: {
                              a!columnsLayout(
                                columns: {
                                  a!columnLayout(
                                    contents: {
                                      a!sideBySideLayout(
                                        items: {
                                          a!sideBySideItem(item: {}, width: "MINIMIZE"),
                                          a!sideBySideItem(
                                            item: a!richTextDisplayField(
                                              value: {
                                                a!richTextItem(
                                                  text: day(local!calendarDate),
                                                  showWhen: month(local!calendarDate) = month(local!date),
                                                  size: "SMALL",
                                                  
                                                )
                                              },
                                              align: "RIGHT"
                                            )
                                          )
                                        },
                                        showWhen: month(local!calendarDate) = month(local!date)
                                      ),
                                      
                                    }
                                  )
                                }
                              )
                            },
                            style: if(or(fv!index = { 6, 7 }), "#808080", {})
                          )
                        }
                      }
                    )
                  }
                )
              )
            )
          },
          marginBelow: "NONE",
          spacing: "NONE",
          stackWhen: "NEVER"
        )
      )
    }
  )
)

RE: Grey out particular dates and weekends in Date selection field

Prasanta Paul — Mon, 21 Oct 2024 05:55:55 GMT

You can use validations or customize calendar to achieve this.

RE: Grey out particular dates and weekends in Date selection field

Soma — Sat, 19 Oct 2024 12:25:49 GMT

Disabling dates in the calendar is not possible in Appian's Date field. There are two alternatives

1. Display validations when user selects certain dates

2. Create your own calendar using OOTB components and you can customise as you wish.

Please refer this thread for quick start

community.appian.com/.../how-to-create-calendar-component-using-card-layout-and-display-the-attendance-marked-leaves-taken-and-current-date-in-different-color-coding

RE: Grey out particular dates and weekends in Date selection field

Mathieu Drouin — Sat, 19 Oct 2024 09:56:54 GMT

+1 for validations. I would advise against buillding a custom component for this.

RE: Grey out particular dates and weekends in Date selection field

Mike Schmitt — Fri, 18 Oct 2024 16:36:09 GMT

I'd suggest you use standard field validations. The real only alternative is to build your own novel calendar picker component (you could probably cobble something together using card Layout items arranged in tiles, etc). If you have no idea how to do that, then I suggest just sticking with validations, as it's fairly straightforward.

RE: Grey out particular dates and weekends in Date selection field

Shubham Aware — Fri, 18 Oct 2024 16:29:56 GMT

MK0001

[quote userid="276052" url="~/discussions/f/user-interface/37760/grey-out-particular-dates-and-weekends-in-date-selection-field"]I should be able to grey out the weekends for the user while selecting any date on a date field.[/quote]

Appian Date Picker Field does not support this feature.

RE: Grey out particular dates and weekends in Date selection field

Yogi Patel — Fri, 18 Oct 2024 15:43:47 GMT

As far as I know, you can't grey out dates in date fields. You can use validation to achieve similar things(to restrict date selection).