Skycoder42
7 years ago
11 changed files with 227 additions and 24 deletions
@ -0,0 +1,169 @@ |
|||
import QtQuick 2.10 |
|||
import QtQuick.Controls 2.3 |
|||
import QtQuick.Controls.Material 2.3 |
|||
import QtQuick.Layouts 1.3 |
|||
import Qt.labs.calendar 1.0 |
|||
|
|||
ListView { |
|||
id: _calenderList |
|||
|
|||
property date firstDate: new Date(1970, 0, 1) |
|||
property date lastDate: new Date(9999, 11, 31) |
|||
property date currentDate: today(); |
|||
|
|||
function today() { |
|||
var cDate = new Date(); |
|||
cDate.setHours(0, 0, 0, 0, 0); |
|||
return cDate; |
|||
} |
|||
|
|||
QtObject { |
|||
id: _p |
|||
|
|||
property bool _skipNextFocus: false |
|||
|
|||
function focusDate() { |
|||
if(_skipNextFocus) |
|||
_skipNextFocus = false; |
|||
else { |
|||
_calenderList.currentIndex = calendarModel.indexOf(_calenderList.currentDate); |
|||
_calenderList.positionViewAtIndex(_calenderList.currentIndex, ListView.SnapPosition); |
|||
} |
|||
} |
|||
} |
|||
|
|||
Component.onCompleted: _p.focusDate() |
|||
onCurrentDateChanged: _p.focusDate() |
|||
|
|||
implicitWidth: 300 |
|||
implicitHeight: 200 |
|||
|
|||
interactive: true |
|||
keyNavigationWraps: true |
|||
snapMode: ListView.SnapOneItem |
|||
orientation: ListView.Horizontal |
|||
highlightRangeMode: ListView.StrictlyEnforceRange |
|||
clip: true |
|||
|
|||
model: CalendarModel { |
|||
id: calendarModel |
|||
from: _calenderList.firstDate |
|||
to: _calenderList.lastDate |
|||
} |
|||
|
|||
delegate: GridLayout { |
|||
width: _calenderList.width |
|||
height: _calenderList.height |
|||
columns: 4 |
|||
|
|||
Button { |
|||
Layout.rowSpan: 3 |
|||
Layout.fillHeight: true |
|||
Layout.preferredWidth: 36 |
|||
flat: true |
|||
|
|||
icon.name: "go-previous" |
|||
icon.source: "qrc:/de/skycoder42/qtmvvm/quick/icons/ic_navigate_before.svg" |
|||
icon.width: 24 |
|||
icon.height: 24 |
|||
|
|||
onClicked: _calenderList.decrementCurrentIndex() |
|||
} |
|||
|
|||
Label { |
|||
Layout.columnSpan: 2 |
|||
Layout.fillWidth: true |
|||
horizontalAlignment: Text.AlignHCenter |
|||
font.bold: true |
|||
text: grid.title |
|||
} |
|||
|
|||
Button { |
|||
Layout.rowSpan: 3 |
|||
Layout.fillHeight: true |
|||
Layout.preferredWidth: 36 |
|||
flat: true |
|||
|
|||
icon.name: "go-next" |
|||
icon.source: "qrc:/de/skycoder42/qtmvvm/quick/icons/ic_navigate_next.svg" |
|||
icon.width: 24 |
|||
icon.height: 24 |
|||
|
|||
onClicked: _calenderList.incrementCurrentIndex() |
|||
} |
|||
|
|||
Item { |
|||
Layout.fillWidth: true |
|||
} // spacer |
|||
|
|||
DayOfWeekRow { |
|||
Layout.fillWidth: true |
|||
} |
|||
|
|||
WeekNumberColumn { |
|||
month: model.month |
|||
year: model.year |
|||
Layout.fillHeight: true |
|||
} |
|||
|
|||
MonthGrid { |
|||
id: grid |
|||
month: model.month |
|||
year: model.year |
|||
Layout.fillWidth: true |
|||
Layout.fillHeight: true |
|||
|
|||
delegate: Label { |
|||
id: dayDelegate |
|||
|
|||
horizontalAlignment: Text.AlignHCenter |
|||
verticalAlignment: Text.AlignVCenter |
|||
opacity: model.month === grid.month ? 1 : 0.5 |
|||
text: model.day |
|||
font: grid.font |
|||
//TODO accent text color |
|||
|
|||
background: Rectangle { |
|||
readonly property double size: Math.max(dayDelegate.width, dayDelegate.height) * 1.2 |
|||
|
|||
anchors.centerIn: parent |
|||
height: size |
|||
width: size |
|||
|
|||
color: Material.accentColor //TODO highlight color from globally |
|||
opacity: model.day === _calenderList.currentDate.getDate() && model.month === _calenderList.currentDate.getMonth() ? 1 : 0 |
|||
radius: size / 2 |
|||
|
|||
Behavior on opacity { |
|||
NumberAnimation { |
|||
duration: 750 |
|||
easing.type: Easing.OutBack |
|||
} |
|||
} |
|||
} |
|||
|
|||
MouseArea { |
|||
anchors.fill: parent |
|||
|
|||
onClicked: { |
|||
if(model.month < grid.month) { |
|||
_calenderList.decrementCurrentIndex(); |
|||
_p._skipNextFocus = true; |
|||
} else if(model.month > grid.month) { |
|||
_calenderList.incrementCurrentIndex(); |
|||
_p._skipNextFocus = true; |
|||
} |
|||
_calenderList.currentDate = model.date; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
Item { |
|||
Layout.fillWidth: true |
|||
Layout.columnSpan: 4 |
|||
Layout.minimumHeight: 0 |
|||
Layout.maximumHeight: 0 |
|||
} // spacer, only needed for the additional padding below the month grid |
|||
} |
|||
} |
After Width: | Height: | Size: 209 B |
After Width: | Height: | Size: 210 B |
@ -0,0 +1,20 @@ |
|||
import QtQuick 2.10 |
|||
import QtQuick.Controls 2.3 |
|||
import QtQuick.Layouts 1.3 |
|||
import de.skycoder42.QtMvvm.Quick 1.1 as QtMvvm |
|||
|
|||
QtMvvm.DateEdit { |
|||
id: _edit |
|||
|
|||
property var inputValue: new Date() |
|||
|
|||
onInputValueChanged: { |
|||
var realDate = typeof inputValue == "string" ? new Date(inputValue + "T00:00:00") : inputValue |
|||
if(realDate.getDate() !== currentDate.getDate() || |
|||
realDate.getMonth() !== currentDate.getMonth() || |
|||
realDate.getYear() !== currentDate.getYear()) { |
|||
currentDate = realDate |
|||
} |
|||
} |
|||
onCurrentDateChanged: inputValue = currentDate |
|||
} |
Loading…
Reference in new issue