Grey out particular dates and weekends in Date selection field

Question

Hello everyone, 
 I have a requirement where I should be able to grey out the weekends for the user while selecting any date on a date field. Also, they have some list of standard specific dates where the calender should be greyed out. Can anyone help me how I can achieve this? 
 Thanks!!

Mike Schmitt · Answer

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.

baji mekala · Answer

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

Shubham Aware · Answer

sri123 
 sri123 said: I should be able to grey out the weekends for the user while selecting any date on a date field. 
 Appian Date Picker Field does not support this feature.

Soma · Answer

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

Grey out particular dates and weekends in Date selection field

Top Replies