Forum Discussion
FlowTime1990
Jun 21, 2023Brass Contributor
SharePoint Custom Formatting Help - ADD Month and Date
I found this code that does a cool timeline but I cannot figure out how to add the Month and Date to it. Here are my columns:
I want to show the date in the following format March 25th below the blue dot.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideColumnHeader": true,
"hideSelection": true,
"rowFormatter": {
"elmType": "div",
"style": {
"position": "absolute",
"left": "= @rowIndex * 500 + 'px'",
"display": "flex",
"flex-direction": "column",
"width": "500px",
"height": "500px",
"float": "left"
},
"children": [
{
"elmType": "div",
"style": {
"height": "45%",
"width": "100%"
},
"children": [
{
"elmType": "div",
"txtContent": "[$Title]",
"style": {
"display": "=if(@rowIndex % 2 == 0, 'flex' ,'none')",
"width": "100%",
"height": "95%",
"justify-content": "center",
"align-items": "flex-end",
"font-size": "20px"
}
},
{
"elmType": "div",
"style": {
"display": "=if(@rowIndex % 2 == 0, 'none' ,'flex')",
"flex-direction": "column",
"align-items": "center",
"height": "200px",
"width": "100%",
"margin-top": "10px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"height": "100%",
"width": "90%",
"border": "1px solid"
},
"attributes": {
"class": "ms-borderColor-neutralPrimary"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"height": "15%",
"width": "100%",
"color": "white",
"font-size": "20px",
"padding-top": "3px",
"padding-bottom": "3px",
"margin-top": "-2px"
},
"attributes": {
"class": "ms-bgColor-themePrimary"
},
"children": [
{
"elmType": "span",
"txtContent": "[$Title]",
"style": {
"margin-left": "15px"
}
}
]
},
{
"elmType": "div",
"style": {
"height": "80%",
"width": "100%",
"overflow-y": "scroll",
"display": "flex",
"justify-content": "center"
},
"children": [
{
"elmType": "div",
"style": {
"width": "90%",
"margin-top": "10px"
},
"children": [
{
"elmType": "img",
"style": {
"float": "left",
"max-width": "50%",
"max-height": "90%",
"margin-right": "20px",
"margin-bottom": "10px",
"display": "=if([$Image.serverRelativeUrl] == '' ,'none' ,'')"
},
"attributes": {
"src": "[$Image.serverRelativeUrl]"
}
},
{
"elmType": "span",
"style": {
"padding-top": "10px"
},
"txtContent": "[$Description]"
}
]
}
]
}
]
}
]
}
]
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"width": "100%",
"height": "10%",
"align-items": "center"
},
"children": [
{
"elmType": "div",
"style": {
"border-width": "2px",
"border-style": "solid",
"height": "2px",
"width": "50%"
},
"attributes": {
"class": "ms-bgColor-neutralSecondary ms-borderColor-neutralSecondary"
}
},
{
"elmType": "div",
"style": {
"height": "30px",
"width": "30px",
"border-radius": "50%",
"cursor": "pointer",
"outline": "none"
},
"attributes": {
"class": "ms-bgColor-themePrimary"
}
},
{
"elmType": "div",
"style": {
"border-width": "2px",
"border-style": "solid",
"height": "2px",
"width": "50%"
},
"attributes": {
"class": "ms-bgColor-neutralSecondary ms-borderColor-neutralSecondary"
}
}
]
},
{
"elmType": "div",
"style": {
"height": "45%",
"width": "100%"
},
"children": [
{
"elmType": "div",
"txtContent": "[$Title]",
"style": {
"display": "=if(@rowIndex % 2 == 0, 'none' ,'flex')",
"width": "100%",
"height": "95%",
"justify-content": "center",
"align-items": "flex-start",
"font-size": "20px"
}
},
{
"elmType": "div",
"style": {
"display": "=if(@rowIndex % 2 == 0, 'flex' ,'none')",
"flex-direction": "column",
"align-items": "center",
"height": "200px",
"width": "100%",
"margin-top": "10px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"height": "100%",
"width": "90%",
"border": "1px solid"
},
"attributes": {
"class": "ms-borderColor-neutralPrimary"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"height": "15%",
"width": "100%",
"color": "white",
"font-size": "20px",
"padding-top": "3px",
"padding-bottom": "3px",
"margin-top": "-2px"
},
"attributes": {
"class": "ms-bgColor-themePrimary"
},
"children": [
{
"elmType": "span",
"txtContent": "[$Title]",
"style": {
"margin-left": "15px"
}
}
]
},
{
"elmType": "div",
"style": {
"height": "80%",
"width": "100%",
"overflow-y": "scroll",
"display": "flex",
"justify-content": "center"
},
"children": [
{
"elmType": "div",
"style": {
"width": "90%",
"margin-top": "10px"
},
"children": [
{
"elmType": "img",
"style": {
"float": "left",
"max-width": "50%",
"max-height": "90%",
"margin-right": "20px",
"margin-bottom": "10px",
"display": "=if([$Image.serverRelativeUrl] == '' ,'none' ,'')"
},
"attributes": {
"src": "[$Image.serverRelativeUrl]"
}
},
{
"elmType": "span",
"style": {
"padding-top": "10px"
},
"txtContent": "[$Description]"
}
]
}
]
}
]
}
]
}
]
}
]
}
}
No RepliesBe the first to reply