Introduced styles - first version of Widgets
[opentodolist:opentodolist.git] / OpenTodoList / qml / OpenTodoList / styles / widget / components / Calendar.qml
1 /*
2  *  OpenTodoList - A todo and task manager
3  *  Copyright (C) 2013  Martin Höher <martin@rpdev.net>s
4  *
5  *  This program is free software: you can redistribute it and/or modify
6  *  it under the terms of the GNU General Public License as published by
7  *  the Free Software Foundation, either version 3 of the License, or
8  *  (at your option) any later version.
9  *
10  *  This program is distributed in the hope that it will be useful,
11  *  but WITHOUT ANY WARRANTY; without even the implied warranty of
12  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
13  *  GNU General Public License for more details.
14  *
15  *  You should have received a copy of the GNU General Public License
16  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
17  */
18
19 import QtQuick 2.0
20 import QtQuick.Controls 1.0
21 import QtQuick.Layouts 1.0
22
23 import "../../../js/Utils.js" as Utils
24
25
26 Item {
27     id: calendar
28
29     width: childrenRect.width + spacing * 2
30     height: childrenRect.height + spacing * 2
31
32     property date viewDate: new Date()
33     property date selectedDate: Utils.getNullDate()
34     property int firstDay: Utils.getFirstDay( viewDate )
35     property int daysInMonth: Utils.getDaysInMonth( viewDate )
36     property int spacing: 10
37
38     Column {
39         x: calendar.spacing
40         y: calendar.spacing
41         width:  childrenRect.width
42         height: childrenRect.height
43         spacing: calendar.spacing
44
45         Item {
46             height: childrenRect.height
47             width: calendarGrid.width
48             Button {
49                 id: prevYearButton
50                 text: "<<"
51                 onClicked: calendar.viewDate =
52                            new Date( calendar.viewDate.getFullYear() - 1,
53                                      calendar.viewDate.getMonth(), 1 )
54             }
55             Button {
56                 id: prevMonthButton
57                 anchors.left: prevYearButton.right
58                 anchors.leftMargin: 10
59                 text: "<"
60                 onClicked: calendar.viewDate =
61                            new Date( calendar.viewDate.getFullYear(),
62                                     calendar.viewDate.getMonth() - 1, 1 )
63             }
64             Label {
65                 anchors.horizontalCenter: parent.horizontalCenter
66                 text: Utils.MonthNames[ calendar.viewDate.getMonth() ] + " " +
67                       calendar.viewDate.getFullYear()
68             }
69
70             Button {
71                 id: nextMonthButton
72                 anchors.right: nextYearButton.left
73                 anchors.rightMargin: 10
74                 text: ">"
75                 onClicked: calendar.viewDate =
76                            new Date( calendar.viewDate.getFullYear(),
77                                     calendar.viewDate.getMonth() + 1, 1 )
78             }
79             Button {
80                 id: nextYearButton
81                 anchors.right: parent.right
82                 text: ">>"
83                 onClicked: calendar.viewDate =
84                            new Date( calendar.viewDate.getFullYear() + 1,
85                                      calendar.viewDate.getMonth(), 1 )
86             }
87         }
88
89         Grid {
90             id: calendarGrid
91             width:  childrenRect.width
92             height: childrenRect.height
93
94             columns: 7
95             spacing: calendar.spacing
96
97             Repeater {
98                 model: 7
99                 Label {
100                     text: Utils.DayNamesShort[ index ]
101                 }
102             }
103             Repeater {
104                 model: calendar.daysInMonth + calendar.firstDay
105                 Item {
106                     id: cell
107                     property bool isValid: index >= calendar.firstDay
108                     opacity: isValid ? 1.0 : 0.0
109                     width: childrenRect.width
110                     height: childrenRect.height
111
112                     Button {
113                         text: index - calendar.firstDay + 1
114                         //down: Utils.areDatesEqual( thisDate, calendar.selectedDate )
115                         property date thisDate: new Date(
116                                                     calendar.viewDate.getFullYear(),
117                                                     calendar.viewDate.getMonth(),
118                                                     index - calendar.firstDay + 1 )
119                         onClicked: if ( cell.isValid ) {
120                                        calendar.selectedDate = thisDate;
121                                    }
122                     }
123                 }
124             }
125         }
126
127     }
128
129     Behavior on width { SmoothedAnimation { duration: 500 } }
130     Behavior on height { SmoothedAnimation { duration: 500 } }
131 }