Created
January 14, 2025 09:38
-
-
Save tecchan1107/5b3b9a3063b76e3188cf099563465feb to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", | |
| "elmType": "div", | |
| "children": [ | |
| { | |
| "elmType": "div", | |
| "style": { | |
| "display": "flex", | |
| "flex-direction": "row", | |
| "width": "100%", | |
| "align-items": "center" | |
| }, | |
| "children": [ | |
| { | |
| "elmType": "div", | |
| "style": { | |
| "display": "flex", | |
| "flex-direction": "column", | |
| "width": "100%", | |
| "margin-bottom": "3px" | |
| }, | |
| "children": [ | |
| { | |
| "elmType": "div", | |
| "style": { | |
| "display": "flex", | |
| "justify-content": "space-between", | |
| "width": "100%", | |
| "white-space": "nowrap" | |
| }, | |
| "attributes": { | |
| "class": "ms-fontSize-xs" | |
| }, | |
| "children": [ | |
| { | |
| "elmType": "div", | |
| "txtContent": "=getYear(@now)+'/'+(getMonth(@now)+1)+'/'+getDate(@now)" | |
| }, | |
| { | |
| "elmType": "div", | |
| "txtContent": "=getYear(addDays(@now,30))+'/'+(getMonth(addDays(@now,30))+1)+'/'+getDate(addDays(@now,30))" | |
| } | |
| ] | |
| }, | |
| { | |
| "elmType": "div", | |
| "style": { | |
| "width": "100%", | |
| "border": "1px solid", | |
| "height": "13px", | |
| "position": "relative", | |
| "overflow": "hidden" | |
| }, | |
| "children": [ | |
| { | |
| "elmType": "div", | |
| "style": { | |
| "position": "absolute", | |
| "height": "100%", | |
| "width": "=((Number([$End])-Number([$Start])+86400000)/(Number(Date(getYear(addDays(@now,31))+'/'+(getMonth(addDays(@now,31))+1)+'/'+getDate(addDays(@now,31))))-Number(Date(getYear(@now)+'/'+(getMonth(@now)+1)+'/'+getDate(@now)))))*100+'%'", | |
| "left": "=((Number([$Start])-Number(Date(getYear(@now)+'/'+(getMonth(@now)+1)+'/'+getDate(@now))))/(Number(Date(getYear(addDays(@now,31))+'/'+(getMonth(addDays(@now,31))+1)+'/'+getDate(addDays(@now,31))))-Number(Date(getYear(@now)+'/'+(getMonth(@now)+1)+'/'+getDate(@now)))))*100+'%'" | |
| }, | |
| "attributes": { | |
| "class": "ms-bgColor-themePrimary", | |
| "title": "=[$Start.displayValue]+' ～ '+[$End.displayValue]" | |
| } | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "elmType": "div", | |
| "style": { | |
| "padding": "10px", | |
| "margin-left": "5px", | |
| "cursor": "pointer", | |
| "border-radius": "50%" | |
| }, | |
| "attributes": { | |
| "iconName": "Edit", | |
| "class": "ms-bgColor-themeLighter--hover" | |
| }, | |
| "customCardProps": { | |
| "openOnEvent": "click", | |
| "directionalHint": "topCenter", | |
| "isBeakVisible": true, | |
| "formatter": { | |
| "elmType": "div", | |
| "style": { | |
| "display": "flex", | |
| "flex-direction": "column", | |
| "padding": "10px 15px" | |
| }, | |
| "children": [ | |
| { | |
| "elmType": "div", | |
| "style": { | |
| "display": "flex", | |
| "flex-direction": "row", | |
| "align-items": "center" | |
| }, | |
| "children": [ | |
| { | |
| "elmType": "div", | |
| "inlineEditField": "[$Start]", | |
| "style": { | |
| "border": "1px solid", | |
| "padding": "5px 10px", | |
| "border-radius": "3px", | |
| "display": "flex", | |
| "align-items": "center", | |
| "margin": "5px" | |
| }, | |
| "children": [ | |
| { | |
| "elmType": "span", | |
| "txtContent": "[$Start.displayValue]" | |
| }, | |
| { | |
| "elmType": "span", | |
| "style": { | |
| "margin-left": "8px" | |
| }, | |
| "attributes": { | |
| "iconName": "Edit" | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "elmType": "div", | |
| "txtContent": "～", | |
| "style": { | |
| "margin": "5px" | |
| } | |
| }, | |
| { | |
| "elmType": "div", | |
| "inlineEditField": "[$End]", | |
| "style": { | |
| "border": "1px solid", | |
| "padding": "5px 10px", | |
| "border-radius": "3px", | |
| "display": "flex", | |
| "align-items": "center", | |
| "margin": "5px" | |
| }, | |
| "children": [ | |
| { | |
| "elmType": "span", | |
| "txtContent": "[$End.displayValue]" | |
| }, | |
| { | |
| "elmType": "span", | |
| "style": { | |
| "margin-left": "8px" | |
| }, | |
| "attributes": { | |
| "iconName": "Edit" | |
| } | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "elmType": "div", | |
| "txtContent": "日付をカレンダーからではなく、手入力で変更する場合は、変更後に [Enter] キーを押してください。", | |
| "style": { | |
| "max-width": "300px", | |
| "text-align": "center" | |
| }, | |
| "attributes": { | |
| "class": "ms-fontSize-s" | |
| } | |
| } | |
| ] | |
| } | |
| } | |
| } | |
| ] | |
| } | |
| ] | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
サンプル画像
