Calendar Element for Dashboards

[MichaelSnook]

We have several use cases for the need of a calendar element in Dashboards.  The idea is that you would be able to flip through the calendar and select day/days/weeks/months/etc. to filter the data results.  It would also be great to visually see how many events occurred on each day/week/month/etc on the calendar itself to see patterns of occurrence.

Thanks!

[RPGIS]

I have asked for this on several occasions and the only response that I got from Esri is the Heat Map calendar. The only issue I find with that is it doesn't display information in the format that is friendly to end users.

However, just because they don't have it readily available, doesn't mean you cannot create your own.

Here are the steps to create a basic Calendar:

1. In the Advanced formatting, copy and paste the following

var N = TextFormatting.NewLine
var T = Today()
var NShift = {'A':'B','B':'C','C':'A'}

var StartMDay = Date(Year(T),Month(T),1)
var LastMDay = DateAdd(StartMDay,1,'Month')
LastMDay = DateAdd(LastMDay,-1,'day')

var CS = DateAdd(StartMDay,-WeekDay(StartMDay),'day')
var CE = DateAdd(LastMDay,6-WeekDay(LastMDay),'day')
var Labels=[] ; var Values=['T','S']
var Calendar = {}
for(var i = 0; i<42;i++){
    var CD = DateAdd(CS,i,'day')
    if(Month(CD)==Month(T)&&Day(CD)==Day(T)){
    Calendar[Concatenate(i,'T')]='#6d8fcf'//Change current day background color
    }
    else if (Month(CD)==Month(T)){
        Calendar[Concatenate(i,'T')]='#a8bbe2'//Change current month background color
    }
}
Calendar['BGC'] = '#d9e1f2'//Change general background color
Calendar['M'] = Text(T,'MMMM Y')
Calendar['W'] = '#4472C4'
Calendar['I'] = 'Total'
Calendar['rs'] = Count(Labels)+Count(Values)
return {
  textColor: 'Black',
  backgroundColor: '',
  separatorColor:'',
  selectionColor: '',
  selectionTextColor: '',
  attributes: Calendar
}

• In the line item template pane, click source and copy, as shown in step 3 and copy and paste the html in step 4.
• 

<table border="1" cellpadding="3%" cellspacing="0" style="background-blend-mode:darken; background-color:{expression/BGC}; border-collapse:collapse; border:3px solid black; margin-left:auto; margin-right:auto; width:100%">
	<tbody>
		<tr>
			<th colspan="14" style="border: 3px solid black; background-color:{expression/W}"><span style="font-size:28px"><span style="color:#ffffff"><strong>{expression/M}</strong></span></span></th>
		</tr>
		<tr>
			<th colspan="2" style="border: 3px solid black;width:14%;background-color:{expression/W}"><span style="font-size:24px"><span style="color:#ffffff"><strong>Sunday</strong></span></span></th>
			<th colspan="2" style="border: 3px solid black;width:width:14%;background-color:{expression/W}"><span style="font-size:24px"><span style="color:#ffffff"><strong>Monday</strong></span></span></th>
			<th colspan="2" style="border: 3px solid black;width:width:14%;background-color:{expression/W}"><span style="font-size:24px"><span style="color:#ffffff"><strong>Tuesday</strong></span></span></th>
			<th colspan="2" style="border: 3px solid black;width:width:14%;background-color:{expression/W}"><span style="font-size:24px"><span style="color:#ffffff"><strong>Wednesday</strong></span></span></th>
			<th colspan="2" style="border: 3px solid black;width:width:14%;background-color:{expression/W}"><span style="font-size:24px"><span style="color:#ffffff"><strong>Thursday</strong></span></span></th>
			<th colspan="2" style="border: 3px solid black;width:width:14%;background-color:{expression/W}"><span style="font-size:24px"><span style="color:#ffffff"><strong>Friday</strong></span></span></th>
			<th colspan="2" style="border: 3px solid black;width:width:14%;background-color:{expression/W}"><span style="font-size:24px"><span style="color:#ffffff"><strong>Saturday</strong></span></span></th>
		</tr>
		<tr>
			<th rowspan="{expression/rs}" style="background-color:{expression/0T}; border-color:{expression/TxtColor};text-shadow:{expression/TxtShadow}; border-style:solid; border-width:1px; width:7%">
			<h1 style="text-align:center"><strong>{D0}</strong></h1>
			</th>
			<td style="background-color:{expression/0T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<th rowspan="{expression/rs}" style="background-color:{expression/1T}; border-color:{expression/TxtColor};text-shadow:{expression/TxtShadow}; border-style:solid; border-width:1px; width:7%">
			<h1 style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D1}</strong></span></h1>
			</th>
			<td style="background-color:{expression/1T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/2T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<h1 style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D2}</strong></span></h1>
			</td>
			<td style="background-color:{expression/2T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/3T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D3}</strong></span></p>
			</td>
			<td style="background-color:{expression/3T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/4T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D4}</strong></span></p>
			</td>
			<td style="background-color:{expression/4T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/5T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D5}</strong></span></p>
			</td>
			<td style="background-color:{expression/5T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/6T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D6}</strong></span></p>
			</td>
			<td style="background-color:{expression/6T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
		</tr>
		<tr>
			<td style="background-color:{expression/0T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C0}</strong></span></p>
			</td>
			<td style="background-color:{expression/1T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C1}</strong></span></p>
			</td>
			<td style="background-color:{expression/2T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C2}</strong></span></p>
			</td>
			<td style="background-color:{expression/3T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C3}</strong></span></p>
			</td>
			<td style="background-color:{expression/4T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C4}</strong></span></p>
			</td>
			<td style="background-color:{expression/5T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C5}</strong></span></p>
			</td>
			<td style="background-color:{expression/6T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C6}</strong></span></p>
			</td>
		</tr>
		<tr>
			<td rowspan="{expression/rs}" style="background-color:{expression/7T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D7}</strong></span></p>
			</td>
			<td style="background-color:{expression/7T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/8T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D8}</strong></span></p>
			</td>
			<td style="background-color:{expression/8T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/9T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D9}</strong></span></p>
			</td>
			<td style="background-color:{expression/9T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/10T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D10}</strong></span></p>
			</td>
			<td style="background-color:{expression/10T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/11T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D11}</strong></span></p>
			</td>
			<td style="background-color:{expression/11T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/12T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D12}</strong></span></p>
			</td>
			<td style="background-color:{expression/12T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/13T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D13}</strong></span></p>
			</td>
			<td style="background-color:{expression/13T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
		</tr>
		<tr>
			<td style="background-color:{expression/7T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C7}</strong></span></p>
			</td>
			<td style="background-color:{expression/8T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C8}</strong></span></p>
			</td>
			<td style="background-color:{expression/9T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C9}</strong></span></p>
			</td>
			<td style="background-color:{expression/10T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C10}</strong></span></p>
			</td>
			<td style="background-color:{expression/11T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C11}</strong></span></p>
			</td>
			<td style="background-color:{expression/12T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C12}</strong></span></p>
			</td>
			<td style="background-color:{expression/13T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C13}</strong></span></p>
			</td>
		</tr>
		<tr>
			<td rowspan="{expression/rs}" style="background-color:{expression/14T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D14}</strong></span></p>
			</td>
			<td style="background-color:{expression/14T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/15T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D15}</strong></span></p>
			</td>
			<td style="background-color:{expression/15T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/16T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D16}</strong></span></p>
			</td>
			<td style="background-color:{expression/16T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/17T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D17}</strong></span></p>
			</td>
			<td style="background-color:{expression/17T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/18T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D18}</strong></span></p>
			</td>
			<td style="background-color:{expression/18T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/19T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D19}</strong></span></p>
			</td>
			<td style="background-color:{expression/19T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/20T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D20}</strong></span></p>
			</td>
			<td style="background-color:{expression/20T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
		</tr>
		<tr>
			<td style="background-color:{expression/14T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C14}</strong></span></p>
			</td>
			<td style="background-color:{expression/15T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C15}</strong></span></p>
			</td>
			<td style="background-color:{expression/16T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C16}</strong></span></p>
			</td>
			<td style="background-color:{expression/17T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C17}</strong></span></p>
			</td>
			<td style="background-color:{expression/18T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C18}</strong></span></p>
			</td>
			<td style="background-color:{expression/19T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C19}</strong></span></p>
			</td>
			<td style="background-color:{expression/20T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C20}</strong></span></p>
			</td>
		</tr>
		<tr>
			<td rowspan="{expression/rs}" style="background-color:{expression/21T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D21}</strong></span></p>
			</td>
			<td style="background-color:{expression/21T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/22T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D22}</strong></span></p>
			</td>
			<td style="background-color:{expression/22T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/23T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D23}</strong></span></p>
			</td>
			<td style="background-color:{expression/23T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/24T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D24}</strong></span></p>
			</td>
			<td style="background-color:{expression/24T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/25T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D25}</strong></span></p>
			</td>
			<td style="background-color:{expression/25T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/26T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D26}</strong></span></p>
			</td>
			<td style="background-color:{expression/26T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/27T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D27}</strong></span></p>
			</td>
			<td style="background-color:{expression/27T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
		</tr>
		<tr>
			<td style="background-color:{expression/21T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C21}</strong></span></p>
			</td>
			<td style="background-color:{expression/22T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C22}</strong></span></p>
			</td>
			<td style="background-color:{expression/23T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C23}</strong></span></p>
			</td>
			<td style="background-color:{expression/24T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C24}</strong></span></p>
			</td>
			<td style="background-color:{expression/25T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C25}</strong></span></p>
			</td>
			<td style="background-color:{expression/26T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C26}</strong></span></p>
			</td>
			<td style="background-color:{expression/27T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C27}</strong></span></p>
			</td>
		</tr>
		<tr>
			<td rowspan="{expression/rs}" style="background-color:{expression/28T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D28}</strong></span></p>
			</td>
			<td style="background-color:{expression/28T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/29T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D29}</strong></span></p>
			</td>
			<td style="background-color:{expression/29T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/30T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D30}</strong></span></p>
			</td>
			<td style="background-color:{expression/30T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/31T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D31}</strong></span></p>
			</td>
			<td style="background-color:{expression/31T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/32T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D32}</strong></span></p>
			</td>
			<td style="background-color:{expression/32T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/33T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D33}</strong></span></p>
			</td>
			<td style="background-color:{expression/33T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/34T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D34}</strong></span></p>
			</td>
			<td style="background-color:{expression/34T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
		</tr>
		<tr>
			<td style="background-color:{expression/28T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C28}</strong></span></p>
			</td>
			<td style="background-color:{expression/29T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C29}</strong></span></p>
			</td>
			<td style="background-color:{expression/30T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C30}</strong></span></p>
			</td>
			<td style="background-color:{expression/31T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C31}</strong></span></p>
			</td>
			<td style="background-color:{expression/32T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C32}</strong></span></p>
			</td>
			<td style="background-color:{expression/33T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C33}</strong></span></p>
			</td>
			<td style="background-color:{expression/34T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C34}</strong></span></p>
			</td>
		</tr>
		<tr>
			<td rowspan="{expression/rs}" style="background-color:{expression/35T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D35}</strong></span></p>
			</td>
			<td style="background-color:{expression/35T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/36T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D36}</strong></span></p>
			</td>
			<td style="background-color:{expression/36T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/37T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D37}</strong></span></p>
			</td>
			<td style="background-color:{expression/37T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/38T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D38}</strong></span></p>
			</td>
			<td style="background-color:{expression/38T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/39T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D39}</strong></span></p>
			</td>
			<td style="background-color:{expression/39T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/40T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D40}</strong></span></p>
			</td>
			<td style="background-color:{expression/40T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
			<td rowspan="{expression/rs}" style="background-color:{expression/41T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; font-size:32px; text-shadow:{expression/TxtShadow}"><strong>{D41}</strong></span></p>
			</td>
			<td style="background-color:{expression/41T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{expression/I}</strong></span></p>
			</td>
		</tr>
		<tr>
			<td style="background-color:{expression/35T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C35}</strong></span></p>
			</td>
			<td style="background-color:{expression/36T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C36}</strong></span></p>
			</td>
			<td style="background-color:{expression/37T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C37}</strong></span></p>
			</td>
			<td style="background-color:{expression/38T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C38}</strong></span></p>
			</td>
			<td style="background-color:{expression/39T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C39}</strong></span></p>
			</td>
			<td style="background-color:{expression/40T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C40}</strong></span></p>
			</td>
			<td style="background-color:{expression/41T}; border-color:{expression/TxtColor}; border-style:solid; border-width:1px; text-shadow:{expression/TxtShadow}; width:7%">
			<p style="text-align:center"><span style="color:{expression/TxtColor}; text-shadow:{expression/TxtShadow}"><strong>{C41}</strong></span></p>
			</td>
		</tr>
	</tbody>
</table>

This may get you part of what you are after. I am still working on a more seamless version but this should get you close to what you are needing.

Ultimately it should look like the following.

I created a blog for this but I have not heard anything from Esri regarding the publishing of said blog.