Open sympmarc opened 1 year ago
Fedes365
commented
1 year ago @sympmarc Hello, as far as I remember, when I wrote that article, it wasn't possible to apply a custom formatting to the items listed on the right pane. However, I will have a deeper look as soon as possible to tell you if it's allowed or not.
sympmarc
commented
1 year ago Awesome, @Fedes365. It's something I've had multiple people ask for. If I can't do it on the right pane, being able to add additional content left in the left pane or on hover would be great.
Fedes365
commented
1 year ago Hello @sympmarc
to check if there is something new allowed by Microsoft Lists, first I've opened the calendar formatting schema.
If we read that schema, we can find two pieces of information regarding the calendar custom formatting:
1) we can customize the command bar 2) we can customize the class properties to be applied to the thin coloured raws and we can use expressions too.
... and nothing else 🤔
I've also made other attempts by adding some elements such as divs here and there but with no results. From my findings it's not possible to apply a custom formatting to the items on the right pane yet. Conversely, I would expect to find something like "eventTileFormatter" or similar in the JSON schema above, in order to add containers, styles etc... but this is not the case.
Anyway, this is just the result of my check and I could be wrong. Maybe @tecchan1107 or other Lists experts could have new suggestions and ideas.
sympmarc
commented
1 year ago Thank you, @Fedes365. That's consistent with what I've found as well. I've tried various approaches to get something different than just the Title to show in either panel, but with no success. This certainly feels like a gap in the list formatting capabilities. Hoping someone else has an idea!
tecchan1107
commented
1 year ago I did some research on my end, but that did not seem to be possible at this time...😣
z3019494
commented
1 year ago I've just shoved additional details into the Title column 😂 Though this list isn't manually populated, but rather it's populated as a result of filling out a Form, with a Power Automate flow doing the hard yards.
As for the colour coding, a crap load of JSON conditionals is required:
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"additionalEventClass": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$FacultyImpacted]",
"English"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgBrown' , 'sp-css-backgroundColor-BgGold sp-css-color-GoldFont')",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$FacultyImpacted]",
"Mathematics"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkRed' , 'sp-css-backgroundColor-BgCoral sp-css-color-CoralFont')",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$FacultyImpacted]",
"Science"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgTeal' , 'sp-css-backgroundColor-BgCyan sp-css-color-CyanFont')",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$FacultyImpacted]",
"CAPA"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkPink' , 'sp-css-backgroundColor-BgLilac sp-css-color-LilacFont')",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$FacultyImpacted]",
"PDHPE"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgGreen' , 'sp-css-backgroundColor-BgMintGreen sp-css-color-MintGreenFont')",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$FacultyImpacted]",
"HSIE"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgGray' , 'sp-css-backgroundColor-BgLightGray sp-css-color-LightGrayFont')",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$FacultyImpacted]",
"TAS"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgLavender' , 'sp-css-backgroundColor-BgLightPurple sp-css-color-LightPurpleFont')",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$FacultyImpacted]",
"Music"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkPink' , 'sp-css-backgroundColor-BgLilac sp-css-color-LilacFont')",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$FacultyImpacted]",
"SASS"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkBlue' , 'sp-css-backgroundColor-BgLightBlue sp-css-color-LightBlueFont')",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$FacultyImpacted]",
"Student Wellbeing"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgBlue' , 'sp-css-backgroundColor-BgCornflowerBlue sp-css-color-CornflowerBlueFont')",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$FacultyImpacted]",
"Senior Executive"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkPink' , 'sp-css-backgroundColor-BgLilac sp-css-color-LilacFont')",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$FacultyImpacted]",
"Administration (Careers/Library)"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgRed' , 'sp-css-backgroundColor-BgDustRose sp-css-color-DustRoseFont')+' sp-field-fontSizeSmall'",
""
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
}```
AdaEddev
commented
1 year ago Hello
is it possible to share the List Calendar to Outlook?
z3019494
commented
1 year ago Hello
is it possible to share the List Calendar to Outlook?
I think you may be able to open up the list in Outlook desktop classic. But don't expect calendar view formatting to work of course :P
What Kind of Sample (view or column format)
Calendar view formatting, specifically, the day's listing on the right side.
We're using a Calendar view in a list, which works well. But we'd like to be able to add:
I found this helpful article from @tecchan1107 explaining how to make additional columns available. There's also a good example of color coding in one of the links from the article: Calendar view customizations. What I'm not sure about is the syntax for changing what metadata is shown per event on the left or right sides. I may just need a quick example to help me along - or someone to tell me I can't change the content shown (which would be sad).
Are you Willing to Help?
Sure!