Creating Calendar for Timesheet

Question

Hi, 
 I need to create an interface for timesheet entry. In the interface when I select the month and year the calendar for that month should be displayed in a grid with days (1, 2 ,3 etc) as links so that I can click the link to enter the number of hours worked on that day. How can I acheive this? I need to create this interface in 18.1 version. Thanks in advance.

shikhab0003 · Answer

Can you tell me the code for this asap

ajhick · Answer

Had a bit of a play and came up with a few options. I ended up re-working the data to make more sense in how a grid would want the data. Again I have avoided using expression rules, CDTs and plugins. 
 
 Read only grid using a!gridField() - Annoying that the number of items HAS to show at the bottom 
 Editable grid using a!gridLayout() - Number of items no longer shows at the bottom 
 Manually created grid using columns and card layouts - Very customizable!
 
 The whole card can be a link making it easier to click the day you want 
 Colors/Text/Spacing/Margins can be whatever you want! 
 Could play around with condensing the calendar so it isn't the full width of a screen

a!localVariables(
 local!namesOfDaysInWeek: touniformstring(
 "monday",
 "tuesday",
 "wednesday",
 "thursday",
 "friday",
 "saturday",
 "sunday"
 ),
 local!today: todate(local(now())),
 local!month: month(local!today),
 local!year: year(local!today),
 local!daysInMonth: daysinmonth(
 local!month,
 local!year
 ),
 local!unsortedMonthData: a!forEach(
 items: 1 + enumerate(local!daysInMonth),
 expression: a!localVariables(
 local!date: date(
 local!year,
 local!month,
 fv!item
 ),
 {
 date: local!date,
 dayNumberInMonth: fv!item,
 dayNumberInWeek: weekday(
 local!date,
 2
 ),
 dayName: text(local!date, "dddd"),
 inThisMonth: true
 }
 )
 ),
 local!firstDayOfMonthData: index(
 local!unsortedMonthData,
 1,
 {}
 ),
 local!firstDayOfMonthOccursOnDayNumber: tointeger(
 index(
 local!firstDayOfMonthData,
 "dayNumberInWeek",
 {}
 )
 ),
 local!firstDayOfMonthDate: todate(
 index(
 local!firstDayOfMonthData,
 "date",
 {}
 )
 ),
 local!lastDayOfMonthData: index(
 reverse(local!unsortedMonthData),
 1,
 {}
 ),
 local!lastDayOfMonthOccursOnDayNumber: tointeger(
 index(
 local!lastDayOfMonthData,
 "dayNumberInWeek",
 {}
 )
 ),
 local!lastDayOfMonthDate: todate(
 index(
 local!lastDayOfMonthData,
 "date",
 {}
 )
 ),
 local!numberOfLastMonthDaysToAddToStart: local!firstDayOfMonthOccursOnDayNumber - 1,
 local!numberOfNextMonthDaysToAddToEnd: 7 - local!lastDayOfMonthOccursOnDayNumber,
 local!lastMonthDaysToAddToStart: if(
 local!numberOfLastMonthDaysToAddToStart = 0,
 {},
 reverse(
 a!forEach(
 items: 1 + enumerate(local!numberOfLastMonthDaysToAddToStart),
 expression: a!localVariables(
 local!date: local!firstDayOfMonthDate - fv!item,
 {
 date: local!date,
 dayNumberInMonth: day(local!date),
 dayNumberInWeek: weekday(
 local!date,
 2
 ),
 dayName: text(local!date, "dddd"),
 inThisMonth: false
 }
 )
 )
 )
 ),
 local!nextMonthDaysToAddToEnd: if(
 local!numberOfNextMonthDaysToAddToEnd = 0,
 {},
 a!forEach(
 items: 1 + enumerate(local!numberOfNextMonthDaysToAddToEnd),
 expression: a!localVariables(
 local!date: local!lastDayOfMonthDate + fv!item,
 {
 date: local!date,
 dayNumberInMonth: day(local!date),
 dayNumberInWeek: weekday(
 local!date,
 2
 ),
 dayName: text(local!date, "dddd"),
 inThisMonth: false
 }
 )
 )
 ),
 local!fullCalendarListOfDays: a!flatten(
 {
 local!lastMonthDaysToAddToStart,
 local!unsortedMonthData,
 local!nextMonthDaysToAddToEnd
 }
 ),
 local!lengthOfFullCalendarListOfDays: if(
 rule!CMN_IsEmpty(local!fullCalendarListOfDays),
 0,
 length(local!fullCalendarListOfDays)
 ),
 local!numberOfCalendarRows: tointeger(local!lengthOfFullCalendarListOfDays/7),
 local!fullCalendarAsArray: a!forEach(
 items: 1 + enumerate(local!numberOfCalendarRows),
 expression: a!localVariables(
 local!calendarRow: index(
 local!fullCalendarListOfDays,
 1 + product(fv!item - 1, 7) + enumerate(7),
 {}
 ),
 a!map(
 monday: index(
 local!calendarRow,
 1,
 {}
 ),
 tuesday: index(
 local!calendarRow,
 2,
 {}
 ),
 wednesday: index(
 local!calendarRow,
 3,
 {}
 ),
 thursday: index(
 local!calendarRow,
 4,
 {}
 ),
 friday: index(
 local!calendarRow,
 5,
 {}
 ),
 saturday: index(
 local!calendarRow,
 6,
 {}
 ),
 sunday: index(
 local!calendarRow,
 7,
 {}
 )
 )
 )
 ),
 {
 /*Read only grid using a!gridField() - Annoying that the number of items HAS to show at the bottom*/
 a!gridField(
 label: concat(
 text(local!today, "mmmm"),
 " ",
 local!year
 ),
 data: local!fullCalendarAsArray,
 columns: a!forEach(
 items: local!namesOfDaysInWeek,
 expression: a!gridColumn(
 label: left(proper(fv!item), 2),
 value: a!localVariables(
 local!dayData: index(
 fv!row,
 fv!item,
 {}
 ),
 local!dayInMonth: index(
 local!dayData,
 "dayNumberInMonth",
 {}
 ),
 local!isInThisMonth: toboolean(
 index(
 local!dayData,
 "inThisMonth",
 {}
 )
 ),
 a!richTextDisplayField(
 value: a!richTextItem(
 text: local!dayInMonth,
 style: if(
 local!isInThisMonth,
 "STRONG",
 {
 "PLAIN",
 "EMPHASIS"
 }
 )
 )
 )
 ),
 align: "CENTER",
 width: "ICON"
 )
 ),
 spacing: "DENSE"
 ),
 /*Editable grid using a!gridLayout() - Number of items no longer shows at the bottom*/
 a!gridLayout(
 label: concat(
 text(local!today, "mmmm"),
 " ",
 local!year
 ),
 headerCells: a!forEach(
 items: local!namesOfDaysInWeek,
 expression: a!gridLayoutHeaderCell(
 label: left(proper(fv!item), 2),
 align: "CENTER"
 )
 ),
 columnConfigs: a!forEach(
 items: local!namesOfDaysInWeek,
 expression: a!gridLayoutColumnConfig(
 width: "NARROW"
 )
 ),
 rows: a!forEach(
 items: local!fullCalendarAsArray,
 expression: a!localVariables(
 local!calendarRowData: fv!item,
 a!gridRowLayout(
 contents: {
 a!forEach(
 items: local!namesOfDaysInWeek,
 expression: a!localVariables(
 local!dayData: index(
 local!calendarRowData,
 fv!item,
 {}
 ),
 local!dayInMonth: index(
 local!dayData,
 "dayNumberInMonth",
 {}
 ),
 local!isInThisMonth: toboolean(
 index(
 local!dayData,
 "inThisMonth",
 {}
 )
 ),
 a!richTextDisplayField(
 value: a!richTextItem(
 text: local!dayInMonth,
 style: if(
 local!isInThisMonth,
 "STRONG",
 {
 "PLAIN",
 "EMPHASIS"
 }
 )
 ),
 align: "CENTER"
 )
 )
 )
 }
 )
 )
 ),
 /*
 data: local!fullCalendarAsArray,
 columns: a!forEach(
 items: local!namesOfDaysInWeek,
 expression: a!gridColumn(
 label: left(proper(fv!item), 2),
 value: a!localVariables(
 local!dayData: index(
 fv!row,
 fv!item,
 {}
 ),
 local!dayInMonth: index(
 local!dayData,
 "dayNumberInMonth",
 {}
 ),
 local!isInThisMonth: toboolean(
 index(
 local!dayData,
 "inThisMonth",
 {}
 )
 ),
 a!richTextDisplayField(
 value: a!richTextItem(
 text: local!dayInMonth,
 style: if(
 local!isInThisMonth,
 "STRONG",
 {
 "PLAIN",
 "EMPHASIS"
 }
 )
 )
 )
 ),
 align: "CENTER",
 width: "ICON"
 )
 ),
 */
 spacing: "DENSE"
 ),
 /*Manually created grid using columns and card layouts - Very customizable! Also if using the calendar day as a link you can use the whole card layout as the button*/
 a!localVariables(
 local!headerColor: "#1d3557",
 local!inMonthColor: "#a8dadc",
 local!outOfMonthColor: "#f1faee",
 {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: a!richTextItem(
 text: concat(
 text(local!today, "mmmm"),
 " ",
 local!year
 ),
 style: "STRONG"
 ),
 align: "CENTER"
 ),
 a!columnsLayout(
 columns: {
 a!forEach(
 items: local!namesOfDaysInWeek,
 expression: a!localVariables(
 local!labelOfColumn: fv!item,
 local!columnContents: index(
 local!fullCalendarAsArray,
 local!labelOfColumn,
 {}
 ),
 a!columnLayout(
 contents: {
 a!cardLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: a!richTextItem(
 text: left(proper(local!labelOfColumn), 2),
 style: "STRONG"
 ),
 align: "CENTER"
 )
 },
 shape: "ROUNDED",
 marginBelow: "EVEN_LESS",
 style: local!headerColor
 ),
 a!forEach(
 items: local!columnContents,
 expression: a!localVariables(
 local!dayData: fv!item,
 local!dayInMonth: index(
 local!dayData,
 "dayNumberInMonth",
 {}
 ),
 local!isInThisMonth: toboolean(
 index(
 local!dayData,
 "inThisMonth",
 {}
 )
 ),
 a!cardLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: a!richTextItem(
 text: local!dayInMonth,
 style: if(
 local!isInThisMonth,
 "STRONG",
 {
 "PLAIN",
 "EMPHASIS"
 }
 )
 ),
 align: "CENTER"
 )
 },
 shape: "ROUNDED",
 marginBelow: "EVEN_LESS",
 style: if(
 local!isInThisMonth,
 local!inMonthColor,
 local!outOfMonthColor
 )
 )
 )
 )
 },
 width: "NARROW"
 )
 )
 )
 },
 spacing: "DENSE"
 )
 }
 )
 }
)

Creating Calendar for Timesheet

Top Replies