Dear all,
I am trying to create sort of a family calendar (4 People in 4 columns with events in a week in vertical, please see attached screenshot) in a widget. I used the IMHO beautiful design of @RGroll and tried to adapt it by showing multiple f7-cols. But I somewhat miss something, as if there is a new day the columns result not to be aligned. I am trying with the YAML code but am a newbie so any help would be greatly appreciated.
Thank you very much!
Here is a screenshot:
And here is the code:
uid: Timeline
tags: []
props:
parameters:
- description: A text prop
label: Prop 1
name: prop1
required: false
type: TEXT
- context: item
description: An item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Apr 5, 2023, 5:54:26 PM
component: f7-page
config: {}
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
slots:
default:
- component: f7-col
config:
class:
- timeline-item
- no-margin
slots:
default:
- component: f7-col
config:
class:
- timeline-item-date
style:
width: 20px
slots:
default:
- component: Label
config:
text: =dayjs().format('DD')
style:
font-size: 21px
line-height: 21px
font-weight: 800
- component: Label
config:
text: =dayjs().format('MMM')
- component: f7-col
config:
class:
- timeline-item-divider
- component: f7-col
config:
class:
- timeline-item-content
slots:
default:
- component: f7-col
config:
class:
- timeline-item-content
- timeline-item-inner
slots:
default:
- component: Label
config:
class:
- timeline-item-time
text: "6:00-7:00"
- component: Label
config:
class:
- timeline-item-title
text: ="Person1 event 1"
- component: Label
config:
class:
- timeline-item-time
text: = "7:00-8:00"
- component: Label
config:
visible:
class:
- timeline-item-title
text: "Person1 event 2"
- component: Label
config:
class:
- timeline-item-time
text: ="8:00-9:00"
- component: Label
config:
class:
- timeline-item-title
text: "Person1 event 3"
- component: f7-col
config:
class:
timeline-item-divider
- component: f7-col
config:
class:
- timeline-item-content
- timeline-item-inner
slots:
default:
- component: Label
config:
class:
- timeline-item-time
text: "6:00-17:00"
- component: Label
config:
class:
- timeline-item-title
text: ="Person2 "
- component: Label
config:
class:
- timeline-item-time
text: "7:00-8:00"
- component: Label
config:
class:
- timeline-item-title
text: ="Person2"
- component: f7-col
config:
class:
timeline-item-divider
- component: f7-col
config:
visible: true
class:
- timeline-item-content
- timeline-item-inner
slots:
default:
- component: Label
config:
class:
- timeline-item-time
text: ="6:00-7:00"
- component: Label
config:
class:
- timeline-item-title
text: ="Person3"
- component: Label
config:
class:
- timeline-item-time
text: ="7:00-8:00"
- component: Label
config:
class:
- timeline-item-title
text: ="Person3"
- component: f7-col
config:
class:
timeline-item-divider
- component: f7-col
config:
visible: True
class:
- timeline-item-content
- timeline-item-inner
slots:
default:
- component: Label
config:
class:
- timeline-item-time
text: ="12:00-13:00"
- component: Label
config:
visible: = 1
class:
- timeline-item-title
text: ="Person4"
- component: f7-block
config:
class:
- timeline-item
- no-margin
slots:
default:
- component: f7-col
config:
class:
- timeline-item-date
style:
width: 20px
slots:
default:
- component: Label
config:
text: =dayjs().add(1,'days').format('DD')
style:
font-size: 21px
line-height: 21px
font-weight: 800
- component: Label
config:
text: =dayjs().add(1,'days').format('MMM')
- component: f7-col
config:
class:
- timeline-item-divider
- component: f7-col
config:
class:
- timeline-item-content
- timeline-item-inner
slots:
default:
- component: f7-col
config:
class:
- timeline-item-content
slots:
default:
- component: Label
config:
class:
- timeline-item-time
text: "7:00-8:00"
- component: Label
config:
class:
- timeline-item-title
text: "Person1 different event length"
- component: f7-col
config:
class:
- timeline-item-divider
- component: f7-col
config:
class:
- timeline-item-content
- timeline-item-inner
slots:
default:
- component: Label
config:
class:
- timeline-item-time
text: "7:00-8:00"
- component: Label
config:
class:
- timeline-item-title
text: "Person2 day 2"
- component: f7-col
config:
class:
- timeline-item-divider
- component: f7-col
config:
class:
- timeline-item-content
- timeline-item-inner
slots:
default:
- component: Label
config:
class:
- timeline-item-time
text: "7:00-12:00"
- component: Label
config:
class:
- timeline-item-title
text: "Person 3"
- component: f7-col
config:
class:
- timeline-item-divider
- component: f7-col
config:
class:
- timeline-item-content
- timeline-item-inner
slots:
default:
- component: Label
config:
class:
- timeline-item-time
text: "7:00 - 12:00"
- component: Label
config:
class:
- timeline-item-title
text: "Person 4"
- component: f7-block
config:
class:
- timeline-item
- no-padding
- no-margin
slots:
default:
- component: f7-col
config:
class:
- timeline-item-date
style:
width: 20px
slots:
default:
- component: Label
config:
text: =dayjs().add(2,'days').format('DD')
style:
font-size: 21px
line-height: 21px
font-weight: 800
- component: Label
config:
text: =dayjs().add(2,'days').format('MMM')
- component: f7-col
config:
class:
- timeline-item-divider
- component: f7-col
slots:
default:
- component: Label
config:
class:
- timeline-item-content
text: Keine Termine
Thanks in advance for any help.
Matthias