MauiKit Calendar

YearView.qml
1// Copyright (C) 2018 Michael Bohlender, <bohlender@kolabsys.com>
2// Copyright (C) 2018 Christian Mollekopf, <mollekopf@kolabsys.com>
3// SPDX-FileCopyrightText: 2021 Claudio Cambra <claudio.cambra@gmail.com>
4// SPDX-License-Identifier: GPL-2.0-or-later
5
6import QtQuick
7import QtQuick.Layouts
8import QtQuick.Controls
9
10import org.mauikit.controls as Maui
11import org.mauikit.calendar as Kalendar
12
13import "dateutils.js" as DateUtils
14
15/**
16 * @inherit QtQuick.Controls.Pane
17 * @brief A browsing view of the calendar organized by years.
18 *
19 * @image html yearview.png
20 *
21 * @code
22 * Maui.ApplicationWindow
23 * {
24 * id: root
25 * title: _view.title
26 *
27 * Maui.Page
28 * {
29 * anchors.fill: parent
30 * Maui.Controls.showCSD: true
31 * title: root.title
32 *
33 * MC.YearView
34 * {
35 * id: _view
36 * anchors.fill: parent
37 *
38 * onSelectedDateChanged: root.title = selectedDate.toString()
39 *
40 * onMonthClicked: (month) => console.log("Month Clicked, ", month)
41 * }
42 * }
43 * }
44 * @endcode
45 */
46Pane
47{
48 id: control
49
50 /**
51 * @brief
52 */
53 property date selectedDate: currentDate
54
55 /**
56 * @brief
57 */
58 readonly property date currentDate: new Date()
59
60 /**
61 * @brief
62 */
63 property date startDate
64
65 /**
66 * @brief
67 */
68 property date firstDayOfMonth
69
70 /**
71 * @brief
72 */
73 property int year : currentDate.getUTCFullYear()
74
75 /**
76 * @brief
77 */
78 property bool initialMonth: true
79
80 /**
81 * @brief
82 */
83 readonly property bool isLarge: width > Maui.Style.units.gridUnit * 40
84
85 /**
86 * @brief
87 */
88 readonly property bool isTiny: width <= Maui.Style.units.gridUnit * 40
89
90 /**
91 * @brief
92 */
93 readonly property alias gridView : _gridView
94
95 /**
96 * @brief
97 */
98 readonly property string title: control.year
99
100 /**
101 * @brief
102 * @param date
103 */
104 signal monthClicked(var date)
105
106 contentItem: Maui.GridBrowser
107 {
108 id: _gridView
109
110 itemHeight: Math.max(itemSize, 160)
111 itemSize: Math.min(width/3, 400)
112
113 currentIndex: currentDate.getUTCMonth()
114 model: 12
115
116 delegate: Loader
117 {
118 id: viewLoader
119
120 property bool isNextOrCurrentItem: index >= _gridView.currentIndex -1 && index <= _gridView.currentIndex + 1
121 property bool isCurrentItem: GridView.isCurrentItem
122
123 active: true
124 asynchronous: !isCurrentItem
125 visible: status === Loader.Ready
126
127 width: GridView.view.cellWidth - (control.isTiny ? 0 : Maui.Style.space.small)
128 height: GridView.view.cellHeight - (control.isTiny ? 0 : Maui.Style.space.small)
129
130 sourceComponent: Kalendar.DaysGrid
131 {
132 // Maui.Theme.colorSet: Maui.Theme.Button
133 // Maui.Theme.inherit: false
134 //
135 id: _monthDelegate
136 year: control.year
137 month: modelData+1
138 compact: control.isTiny
139 onDateClicked: (date) => control.selectedDate = date
140 header: Maui.LabelDelegate
141 {
142 width: parent.width
143 isSection: true
144 color: Maui.Theme.textColor
145 text: _monthDelegate.title
146 }
147
148 background: Rectangle
149 {
150 color: _monthDelegate.month === control.currentDate.getUTCMonth()+1 ? Maui.Theme.alternateBackgroundColor : (_monthDelegate.hovered ? Maui.Theme.hoverColor : Maui.Theme.backgroundColor)
151 radius: Maui.Style.radiusV
152
153 MouseArea
154 {
155 id: _mouseArea
156 hoverEnabled: true
157 anchors.fill: parent
158 onClicked: control.monthClicked(new Date(_monthDelegate.year, _monthDelegate.month))
159 }
160 }
161 }
162 }
163
164 Component.onCompleted: _gridView.flickable.positionViewAtIndex(_gridView.currentIndex, GridView.Visible)
165 }
166
167 function resetDate()
168 {
169 control.year = control.currentDate.getUTCFullYear()
170 }
171
172 function nextDate()
173 {
174 control.year++
175 }
176
177 function previousDate()
178 {
179 control.year--
180 }
181}
182
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Sat Dec 21 2024 17:02:37 by doxygen 1.12.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.