mirai/ui/components/Calendar.slint

import { ScrollView, Date, Time } from "std-widgets.slint";
import { VCheckBox, VButton, VActionButton, Svg, VTag, VPopupIconMenu, VText, Palette } from "@selenite";
import { Utils } from "../Utils.slint";

export struct CalendarDayEvent {
	title: string,
	startsAt: Time,
	endsAt: Time
}

export struct CalendarDay {
	events: [CalendarDayEvent],
	date: Date,
	header: string,
}

export enum CalendarDateDisplayFormat {
	Relative,
	Normal
}

export component Calendar inherits Rectangle {
	in property<[CalendarDay]> days;
	in property <CalendarDateDisplayFormat> format;
	private property <length> header-height: 64px;
	private property <length> available-day-space: self.height - header-height;
	private property <length> day-start-y: header-height;
	private property <length> hour-spacing: available-day-space / 24;
	background: Palette.pane;

	HorizontalLayout {
		Rectangle {
			//background: red;
			width: 48px;
			VerticalLayout {
				y: 0;
				height: header-height;
				padding-right: 8px;
				VText {
					vertical-alignment: center;
					horizontal-alignment: right;
					text: "";
				}
			}

			for index in 24: VerticalLayout {
				y: day-start-y + index * hour-spacing - (hour-spacing / 2);
				height: hour-spacing;
				padding-right: 8px;
				VText {
					vertical-alignment: center;
					horizontal-alignment: right;
					text: "\{index}";
				}
			}
			
		}
		Rectangle {
			//background: green;
			HorizontalLayout {
				for day[day-index] in root.days: Rectangle {
					if day-index > 0 : Rectangle {
						x: 0;
						y: header-height - 32px;
						width: 1px;
						height: parent.height;
						background: Palette.card-background.transparentize(0.5);
					}
					VerticalLayout {
						y: 0;
						height: header-height;
						padding-right: 8px;
						VText {
							vertical-alignment: center;
							horizontal-alignment: center;
							text: day.header;
						}
					}
					for hour[hour-index] in 24 : Rectangle {
						background: Palette.card-background.transparentize(0.5);
						x: 0px;
						width: parent.width;
						y: day-start-y + hour-spacing * hour-index;
						height: 1px;
					}
					for event[event-index] in day.events : Rectangle {
						background: Palette.card-background;
						border-radius: 4px;
						x: 8px;
						width: parent.width - 16px;
						y: day-start-y + hour-spacing * event.startsAt.hour;
						height: hour-spacing * (event.endsAt.hour - event.startsAt.hour) - 2px;
						clip: true;
						HorizontalLayout {
							Rectangle {
								width: 4px;
								background: Palette.accent;
							}
							VerticalLayout {
								padding: 16px;
								VText {
									text: event.title;
									wrap: TextWrap.word-wrap;
								}
							}
						}	
					}
				}
			}
		}
	}
}