• State Suggested Answer
  • +4 person also asked this people also asked this
  • Replies 21 replies
  • Answers 2 answers
  • Subscribers 13 subscribers
  • Views 18766 views
  • Users 0 members are here
Related Discussions
Home » Discussions » General

How we can generate Calendar?

Aswini

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

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Associate Developer

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

Reply
  • 0
    Certified Associate Developer

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

Children
No Data

© 2024 Appian. All rights reserved.