How we can generate Calendar?

Question

Hi, 
 I want to generate Calendar. 
 I have 2 fields, month and year, If I select any( month,year) then that corresponding Calendar must be displayed in the grid format. 
 Can u please tell me , how can I implement this calendar? 
 Thanks In Advance 
 Aswini

rohitmelwani · Answer

{ a!localVariables( local!year: year(today()), local!month: month(today()), local!date: day(today()), local!curD:today(), local!darkMode: true(), local!sampledate:a!refreshVariable( value: date(local!year,local!month,local!date), refreshOnVarChange:local!date ), local!displayMonth: { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }, 
 local!weekDay: weekday(day(local!year, local!month, 1)) - 1, { a!sectionLayout( /*label: "Sectionnnn",*/ contents: { a!cardLayout( contents: { a!columnsLayout( columns: { a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { a!richTextIcon( icon: "calendar" ), " Calendar" }, size: "MEDIUM_PLUS", style: { "STRONG" } ) } ) } ) } ) }, height: "AUTO", style: "TRANSPARENT", shape: "ROUNDED", marginAbove: "LESS", marginBelow: "MORE", showBorder: false, showShadow: true, decorativeBarPosition: "BOTTOM", decorativeBarColor: rule!PK_GenericColorConfig( Key: { "calenderColor", "bgCurrentDate" }, darkMode: ri!darkMode ) ), a!cardLayout( contents: { a!columnsLayout( columns: { a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextIcon( icon: "angle-double-left-bold", link: a!dynamicLink( label: "Prev Year", value: local!year - 1, saveInto: local!year ), linkStyle: "STANDALONE", color: "#434343", size: "MEDIUM_PLUS" ) }, align: "CENTER", marginAbove: "NONE", marginBelow: "NONE" ) }, width: "EXTRA_NARROW" ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { 
 a!richTextIcon( icon: "angle-double-left-bold", link: a!dynamicLink( value: if(local!month = 1, 12, local!month - 1 ), saveInto: if( local!month = 1, { a!save(local!year, local!year - 1), local!month }, local!month ) ), linkStyle: "STANDALONE", color: "#434343", size: "MEDIUM" ), " ", a!richTextItem(text: "MONTH", style: "STRONG"), " ", a!richTextIcon( icon: "angle-double-right-bold", link: a!dynamicLink( label: "Next year", value: if(local!month = 12, 1, local!month + 1 ), saveInto: { if( local!month = 12, { a!save(local!year, local!year + 1), local!month }, local!month ) } ), linkStyle: "STANDALONE", color: "#434343", size: "MEDIUM" ) 
 }, align: "CENTER", marginAbove: "LESS" ) /*a!dropdownField(*/ /*label: "",*/ /*labelPosition: "ABOVE",*/ /*placeholder: "--- Select a Value ---",*/ /*choiceLabels: local!MonArr,*/ /*choiceValues: {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12},*/ /*value: local!month,*/ /*saveInto: {local!month},*/ /**/ /*searchDisplay: "AUTO",*/ /*validations: {}*/ /*)*/ 
 }, width: "NARROW_PLUS" ), a!columnLayout( contents: { a!richTextDisplayField( value: { 
 a!richTextItem( text: { upper(index(local!displayMonth, local!month, {})), " ", local!year 
 }, size: "MEDIUM", style: "STRONG" )}, align: "CENTER" ) }, width: "MEDIUM" ), a!columnLayout( contents: { 
 }, width: "NARROW" ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextIcon( icon: "angle-double-right-bold", link: a!dynamicLink( label: "Next year", value: local!year + 1, saveInto: local!year ), linkStyle: "STANDALONE", color: "#434343", size: "MEDIUM_PLUS" ) }, align: "CENTER", marginAbove: "NONE" ) }, width: "EXTRA_NARROW" ) }, alignVertical: "TOP" ), a!columnsLayout( columns: { a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { " Sun" }, color: rule!PK_GenericColorConfig( Key: { "calendarBgColors", "nameOfDay" }, darkMode: ri!darkMode ), style: { "STRONG" } ) }, align: "CENTER" ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { " Mon" }, color: rule!PK_GenericColorConfig( Key: { "calendarBgColors", "nameOfDay" }, darkMode: ri!darkMode ), style: { "STRONG" } ) }, align: "CENTER" ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { " Tue" }, color: rule!PK_GenericColorConfig( Key: { "calendarBgColors", "nameOfDay" }, darkMode: ri!darkMode ), style: { "STRONG" } ) }, align: "CENTER" ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { " Wed" }, color: rule!PK_GenericColorConfig( Key: { "calendarBgColors", "nameOfDay" }, darkMode: ri!darkMode ), style: { "STRONG" } ) }, align: "CENTER" ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { " Thu" }, color: rule!PK_GenericColorConfig( Key: { "calendarBgColors", "nameOfDay" }, darkMode: ri!darkMode ), style: { "STRONG" } ) }, align: "CENTER" ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { " Fri" }, color: rule!PK_GenericColorConfig( Key: { "calendarBgColors", "nameOfDay" }, darkMode: ri!darkMode ), style: { "STRONG" } ) }, align: "CENTER" ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { "Sat " }, color: rule!PK_GenericColorConfig( Key: { "calendarBgColors", "nameOfDay" }, darkMode: ri!darkMode ), style: { "STRONG" } ) }, align: "CENTER" ) } ) }, marginAbove: "NONE", spacing: "DENSE", stackWhen: { "NEVER" } ), a!cardLayout( contents: { a!forEach( items: enumerate(6), expression: a!columnsLayout( columns: a!localVariables( local!index: fv!item, local!week: weekday(date(local!year, local!month, 1)), local!totdays: daysinmonth(local!month, local!year), a!forEach( items: enumerate(7) + 1, expression: { a!columnLayout( contents: { a!cardLayout( contents: a!richTextDisplayField( value: a!richTextItem( text: { if( ((fv!item + 1 + local!index * 7) - local!week) <= local!totdays, if( local!index = 0, if( fv!index < local!week, null, 
 fv!item + 1 + local!index * 7 - local!week ), fv!item + 1 + local!index * 7 - local!week ), null ) }, size: "MEDIUM", style: "STRONG" ), align: "CENTER" ), link: a!dynamicLink( label: "Clickable", value: fv!item + 1 + local!index * 7 - local!week, saveInto: { local!date, a!save( ri!GridDate, date(local!year,local!month,local!date) ) } ), style: { if( ((fv!item + 1 + local!index * 7) - local!week) = day(today()), rule!PK_GenericColorConfig( Key: { "calenderColor", "bgCurrentDate" }, darkMode: ri!darkMode ), if( ((fv!item + 1 + local!index * 7) - local!week) = day(local!sampledate), "#7289da", rule!PK_GenericColorConfig( Key: { "calenderColor", "bgdateColor" }, darkMode: ri!darkMode ) ) ) }, shape: "ROUNDED", showBorder: false() ) } ) } ) ), alignVertical: "MIDDLE", spacing: "DENSE", stackWhen: { "NEVER" } ) ) }, height: "AUTO", style: rule!PK_GenericColorConfig( Key: { "bgColor", "bgCalendarColors" }, darkMode: ri!darkMode ), shape: "ROUNDED", marginBelow: "LESS", showBorder: false, decorativeBarPosition: "NONE", decorativeBarColor: "#f5ddf8" ) }, height: "AUTO", style: rule!PK_GenericColorConfig( Key: { "bgColor", "bgCalendarColors" }, darkMode: ri!darkMode ), shape: "ROUNDED", padding: "NONE", marginAbove: "NONE", marginBelow: "NONE", showBorder: false, showShadow: true, decorativeBarColor: "#1d659c" ) } ) } ) }

rohitmelwani · Answer

here is the code : - 
 { a!localVariables( local!year: year(today()), local!month: month(today()), local!date: day(today()), local!curD:today(), local!darkMode: true(), local!sampledate:a!refreshVariable( value: date(local!year,local!month,local!date), refreshOnVarChange:local!date ), local!displayMonth: { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }, 
 local!weekDay: weekday(day(local!year, local!month, 1)) - 1, { a!sectionLayout( /*label: "Sectionnnn",*/ contents: { a!cardLayout( contents: { a!columnsLayout( columns: { a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { a!richTextIcon( icon: "calendar" ), " Calendar" }, size: "MEDIUM_PLUS", style: { "STRONG" } ) } ) } ) } ) }, height: "AUTO", style: "TRANSPARENT", shape: "ROUNDED", marginAbove: "LESS", marginBelow: "MORE", showBorder: false, showShadow: true, decorativeBarPosition: "BOTTOM", decorativeBarColor: rule!PK_GenericColorConfig( Key: { "calenderColor", "bgCurrentDate" }, darkMode: ri!darkMode ) ), a!cardLayout( contents: { a!columnsLayout( columns: { a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextIcon( icon: "angle-double-left-bold", link: a!dynamicLink( label: "Prev Year", value: local!year - 1, saveInto: local!year ), linkStyle: "STANDALONE", color: "#434343", size: "MEDIUM_PLUS" ) }, align: "CENTER", marginAbove: "NONE", marginBelow: "NONE" ) }, width: "EXTRA_NARROW" ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { 
 a!richTextIcon( icon: "angle-double-left-bold", link: a!dynamicLink( value: if(local!month = 1, 12, local!month - 1 ), saveInto: if( local!month = 1, { a!save(local!year, local!year - 1), local!month }, local!month ) ), linkStyle: "STANDALONE", color: "#434343", size: "MEDIUM" ), " ", a!richTextItem(text: "MONTH", style: "STRONG"), " ", a!richTextIcon( icon: "angle-double-right-bold", link: a!dynamicLink( label: "Next year", value: if(local!month = 12, 1, local!month + 1 ), saveInto: { if( local!month = 12, { a!save(local!year, local!year + 1), local!month }, local!month ) } ), linkStyle: "STANDALONE", color: "#434343", size: "MEDIUM" ) 
 }, align: "CENTER", marginAbove: "LESS" ) /*a!dropdownField(*/ /*label: "",*/ /*labelPosition: "ABOVE",*/ /*placeholder: "--- Select a Value ---",*/ /*choiceLabels: local!MonArr,*/ /*choiceValues: {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12},*/ /*value: local!month,*/ /*saveInto: {local!month},*/ /**/ /*searchDisplay: "AUTO",*/ /*validations: {}*/ /*)*/ 
 }, width: "NARROW_PLUS" ), a!columnLayout( contents: { a!richTextDisplayField( value: { 
 a!richTextItem( text: { upper(index(local!displayMonth, local!month, {})), " ", local!year 
 }, size: "MEDIUM", style: "STRONG" )}, align: "CENTER" ) }, width: "MEDIUM" ), a!columnLayout( contents: { 
 }, width: "NARROW" ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextIcon( icon: "angle-double-right-bold", link: a!dynamicLink( label: "Next year", value: local!year + 1, saveInto: local!year ), linkStyle: "STANDALONE", color: "#434343", size: "MEDIUM_PLUS" ) }, align: "CENTER", marginAbove: "NONE" ) }, width: "EXTRA_NARROW" ) }, alignVertical: "TOP" ), a!columnsLayout( columns: { a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { " Sun" }, color: rule!PK_GenericColorConfig( Key: { "calendarBgColors", "nameOfDay" }, darkMode: ri!darkMode ), style: { "STRONG" } ) }, align: "CENTER" ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { " Mon" }, color: rule!PK_GenericColorConfig( Key: { "calendarBgColors", "nameOfDay" }, darkMode: ri!darkMode ), style: { "STRONG" } ) }, align: "CENTER" ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { " Tue" }, color: rule!PK_GenericColorConfig( Key: { "calendarBgColors", "nameOfDay" }, darkMode: ri!darkMode ), style: { "STRONG" } ) }, align: "CENTER" ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { " Wed" }, color: rule!PK_GenericColorConfig( Key: { "calendarBgColors", "nameOfDay" }, darkMode: ri!darkMode ), style: { "STRONG" } ) }, align: "CENTER" ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { " Thu" }, color: rule!PK_GenericColorConfig( Key: { "calendarBgColors", "nameOfDay" }, darkMode: ri!darkMode ), style: { "STRONG" } ) }, align: "CENTER" ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { " Fri" }, color: rule!PK_GenericColorConfig( Key: { "calendarBgColors", "nameOfDay" }, darkMode: ri!darkMode ), style: { "STRONG" } ) }, align: "CENTER" ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { "Sat " }, color: rule!PK_GenericColorConfig( Key: { "calendarBgColors", "nameOfDay" }, darkMode: ri!darkMode ), style: { "STRONG" } ) }, align: "CENTER" ) } ) }, marginAbove: "NONE", spacing: "DENSE", stackWhen: { "NEVER" } ), a!cardLayout( contents: { a!forEach( items: enumerate(6), expression: a!columnsLayout( columns: a!localVariables( local!index: fv!item, local!week: weekday(date(local!year, local!month, 1)), local!totdays: daysinmonth(local!month, local!year), a!forEach( items: enumerate(7) + 1, expression: { a!columnLayout( contents: { a!cardLayout( contents: a!richTextDisplayField( value: a!richTextItem( text: { if( ((fv!item + 1 + local!index * 7) - local!week) <= local!totdays, if( local!index = 0, if( fv!index < local!week, null, 
 fv!item + 1 + local!index * 7 - local!week ), fv!item + 1 + local!index * 7 - local!week ), null ) }, size: "MEDIUM", style: "STRONG" ), align: "CENTER" ), link: a!dynamicLink( label: "Clickable", value: fv!item + 1 + local!index * 7 - local!week, saveInto: { local!date, a!save( ri!GridDate, date(local!year,local!month,local!date) ) } ), style: { if( ((fv!item + 1 + local!index * 7) - local!week) = day(today()), rule!PK_GenericColorConfig( Key: { "calenderColor", "bgCurrentDate" }, darkMode: ri!darkMode ), if( ((fv!item + 1 + local!index * 7) - local!week) = day(local!sampledate), "#7289da", rule!PK_GenericColorConfig( Key: { "calenderColor", "bgdateColor" }, darkMode: ri!darkMode ) ) ) }, shape: "ROUNDED", showBorder: false() ) } ) } ) ), alignVertical: "MIDDLE", spacing: "DENSE", stackWhen: { "NEVER" } ) ) }, height: "AUTO", style: rule!PK_GenericColorConfig( Key: { "bgColor", "bgCalendarColors" }, darkMode: ri!darkMode ), shape: "ROUNDED", marginBelow: "LESS", showBorder: false, decorativeBarPosition: "NONE", decorativeBarColor: "#f5ddf8" ) }, height: "AUTO", style: rule!PK_GenericColorConfig( Key: { "bgColor", "bgCalendarColors" }, darkMode: ri!darkMode ), shape: "ROUNDED", padding: "NONE", marginAbove: "NONE", marginBelow: "NONE", showBorder: false, showShadow: true, decorativeBarColor: "#1d659c" ) } ) } ) }

How we can generate Calendar?

Top Replies