Grey out particular dates and weekends in Date selection field

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).

[mention:4ffa5f0bfc02472eaa59b9385077aa3c:e9ed411860ed4f2ba0265705b8793d05] 

Appian Date Picker Field does not support this feature.

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.

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

You can use validations or customize calendar to achieve this.  

Hi [mention:4ffa5f0bfc02472eaa59b9385077aa3c:e9ed411860ed4f2ba0265705b8793d05] 

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"
        )
      )
    }
  )
)