Qtで家計簿アプリを作成する中で、カレンダーで指定した日の支出を表示したり、
月の支出や週の支出を計算するために、カレンダーをもとにデータ管理したいと思っています。
データ管理のデータベースは、SQLiteを使用する予定ですが、
まずは、Qtのカレンダー機能であるQCalendarWidgetクラスの使い方を理解する必要があります。
ここでは、QCalenderWidgetクラスを使用したプログラムをもとに、QCalendarWidgetクラスの使い方について解説していきます。
また、エディターにはQtCreatorを使用します。
- QCalendarWidgetを使用したプログラム仕様とQtCreatorのデザイン画面
- QCalendarWidgetの使い方をプログラムをもとに解説
- ２.１. ① カレンダーの日付のグリッド線について
- ２.２. ② カレンダーの左側にある週番号について
- ２.３. ③ 週始まりの曜日設定について
- ２.４. ④ カレンダーの日付の範囲を設定する
- ２.５. ⑤ カレンダーのスタイルシート設定
- ２.６. ⑥ カレンダーの表示・非表示設定
- ２.７. ⑦ カレンダーの日付をクリックした時の処理
- ２.８. ⑧ QDateクラスによる日付表示について
- QCalendarWidgetを使用したプログラムの実行
- 最後に
１．QCalendarWidgetを使用したプログラム仕様とQtCreatorのデザイン画面
ここでのプログラムの大まかな仕様は、下記のようにします。
| No | 仕様説明 |
|---|---|
| 1 | 日付が表示されているボタンを押下すると、その日付にフォーカスされた状態でカレンダーを表示する。 |
| 2 | カレンダー内の日付をクリックすると、No.１のボタンラベルの日付がクリックされた日付に変更されて、カレンダーを非表示にする。 |
| 3 | No.２の状態から、「本日を表示」ボタンを押すと内部的にカレンダーの日付は本日になりフォーカスも本日にする。 |
| 4 | カレンダーが表示されている状態で、日付が表示されているボタンを押下した場合、カレンダーを非表示にする。 |
QtCreatorデザイン画面では、下図の赤枠をドラッグ＆ドロップで矢印の方向に配置します。
「Push Button」は２つ配置します。
プログラムで主に使用するウィジェットのクラスは、下表のとおりです。
| クラス名 | 用途 |
|---|---|
| QPushButton |
上図の左側のボタンで、ボタンラベルに日付を表示する。 また、ボタンを押す毎にカレンダーの表示・非表示を行う。 |
| QPushButton | 上図の右側のボタンで、ボタンラベルに「本日を表示」として、カレンダーを本日に戻す。 |
| QCalendarWidget | Qtのカレンダー機能。 |
２．QCalendarWidgetの使い方をプログラムをもとに解説
全体のプログラムとしては、以下のような感じです。
#include "mainwindow.h"
#include "ui_mainwindow.h"
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 左側のボタンラベルに本日の日付をセットする。
ui->pushButton->setText((QDate::currentDate()).toString(Qt::LocalDate));
// 右側のボタンラベルに文字をセットする。
ui->pushButton_2->setText("本日を表示");
ui->calendarWidget->setGridVisible(true); // ①
// カレンダーの左側に表示されている週番号を非表示にする。
ui->calendarWidget->setVerticalHeaderFormat(QCalendarWidget::NoVerticalHeader); // ②
//ui->calendarWidget->setFirstDayOfWeek(Qt::Monday); // ③
ui->calendarWidget->setMaximumDate(QDate::currentDate()); // ④
//ui->calendarWidget->setStyleSheet("background-color: aliceblue;"); // ⑤
ui->calendarWidget->setStyleSheet("QToolButton {background-color: aliceblue; color: black;}"); // ⑤
ui->calendarWidget->setVisible(false); // ⑥
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::on_calendarWidget_clicked(const QDate &date) // ⑦
{
// DBから、指定した日のデータを取得して、表示する。
ui->pushButton->setText(date.toString(Qt::LocalDate)); // ⑧
// データを表示後、カレンダーを隠す。
ui->calendarWidget->setVisible(false);
}
void MainWindow::on_pushButton_clicked()
{
if(ui->calendarWidget->isVisible()){
// カレンダーが表示されている時、非表示にする。
ui->calendarWidget->setVisible(false);
} else {
// カレンダーが表示されていない時、カレンダーを表示する。
ui->calendarWidget->setVisible(true);
ui->calendarWidget->setFocus();
}
}
void MainWindow::on_pushButton_2_clicked()
{
if(ui->calendarWidget->isVisible()){
ui->calendarWidget->setVisible(false);
}
// ボタンに表示されている日付を本日に戻す。
ui->pushButton->setText((QDate::currentDate()).toString(Qt::LocalDate));
// カレンダー上の日付も本日に戻す。
ui->calendarWidget->setSelectedDate(QDate::currentDate());
}
QPushButtonクラスの解説については、ここでは省略して、
QCalendarWidgetクラスの使い方をメインに解説していきます。
ただ、上記プログラム中にコメントを入れていますので、動作としては理解できると思います。
プログラム中のコメントにある番号のQCalendarWidgetクラスの関数説明は、下記の項目タイトルの番号になります。
２.１. ① カレンダーの日付のグリッド線について
何も設定せずに、QCalendarWidgetで生成されるカレンダーは、下図の右側のカレンダーでグリッド線が表示されていません。
上図の左側のカレンダーのようにグリッド線を表示するために、下記の関数を使用します。
ui->calendarWidget->setGridVisible(true);
２.２. ② カレンダーの左側にある週番号について
何も設定せずに、QCalendarWidgetクラスを使用すると、
下図のように、右側のカレンダーの左側に週番号が表示されています。
上図の左側のカレンダーのように週番号が不要な場合は、下記のように設定します。
ui->calendarWidget->setVerticalHeaderFormat(QCalendarWidget::NoVerticalHeader);
２.３. ③ 週始まりの曜日設定について
何も設定せずに、QCalendarWidgetクラスを使用すると、週始まりの曜日は、日曜日からになりますが、
例えば、月曜日からにしたい場合は、下記のように設定します。
ui->calendarWidget->setFirstDayOfWeek(Qt::Monday);
設定後、下図の左側のカレンダーのように週の始まりが月曜日になります。
ここのプログラムでは、コメントにしていますが、自分の用途によって変更してみてください。
２.４. ④ カレンダーの日付の範囲を設定する
カレンダーの日付をクリックできる範囲を設定することができます。
例えば、本日より未来の日付については、クリックできないようにするには、下記のようにします。
ui->calendarWidget->setMaximumDate(QDate::currentDate());
下図のカレンダーでは本日は2023年6月24日で、25日以降は赤枠のようにクリックできないことを示すグレーになっています。
もし、過去の日付について、クリックできないようにしたい場合は、下記のようにします。
ui->calendarWidget->setMinimumDate(QDate(2023, 6, 1));
この場合は、2023年6月1日以前の日付についてクリックすることができなくなります。
２.５. ⑤ カレンダーのスタイルシート設定
ui->calendarWidget->setStyleSheet("background-color: aliceblue;");
ここでは、「//」でコメントにしていますが、カレンダーの背景色を設定することができます。
また、カレンダーの年月を変更する矢印部分のスタイルシート設定は、下記のようにQToolButtonで設定することができます。
ui->calendarWidget->setStyleSheet("QToolButton {background-color: aliceblue; color: black;}");
上記のスタイルシート設定で変更になる部分は、下図の赤枠の部分です。
ツールボタンの背景の範囲が色が変更されている部分で、色が変わってない部分は、また別の設定が必要のようです。いろいろやってみたのですが、なかなか変更できませんでした。
カレンダーのスタイルシート設定は、他にもありますので、いろいろ試してみてください。
２.６. ⑥ カレンダーの表示・非表示設定
アプリ起動時、カレンダーを非表示にしておきたいので、下記のようにします。
ui->calendarWidget->setVisible(false);
ボタンを押して、カレンダーを表示する時には、setVisible()の引数をtrueにします。
また、カレンダー非表示状態から表示状態にするとカレンダーの日付にハイライトされないようで、
QCalendarWidgetクラスの親クラスであるQWidgetクラスのsetFocus()で、ハイライトしています。
２.７. ⑦ カレンダーの日付をクリックした時の処理
void MainWindow::on_calendarWidget_clicked(const QDate &date)
カレンダーの日付をクリックすると、このon_calendarWidget_clicked()関数がコールされて、引数はクリックした日付をQDate型で渡してくれます。
この関数は、QtCreatorのデザイン画面でCalendarWidgetクラスのウィジェットを一度クリックして、
ウィジェット上で右クリックして「スロットへ移動」から、QCalendarWidgetの「clicked(QDate)」を選択することで、
on_calendarWidget_clicked()関数がプログラム上に追加されます。
この関数の処理として、ここでは、クリックされた日付をボタンのラベルに表示した後、カレンダーを非表示にしています。
２.８. ⑧ QDateクラスによる日付表示について
QDateクラスで、日付を扱いますが、xx年xx月xx日のようにラベルに表示する場合には、
下記のようQt::LocalDateを指定します。
ui->pushButton->setText(date.toString(Qt::LocalDate));
QDateクラスが保持している日付の表示のフォーマットは、上記以外にもたくさんありますので、リファレンスを参考にしてみてください。
また、QDateクラスで、本日の日付を取得する場合は、下記のようにQDate::currentData()を使用します。
ui->tableWidget->setItem( 0, i, item );
本日の日付をプログラム内で多用する場合は、上記のようにstatic変数にしておくと便利です。
３．QCalendarWidgetを使用したプログラムの実行
２項のプログラムを実行すると下記のように表示されます。このアプリを実行した日は、2023年6月24日なので、左側のボタンのラベルには、その日付が表示されています。（以降、左側のボタンは、日付のボタンと呼びます。）
まずは、日付のボタンを押して、カレンダーを表示します。
そして、未来の日付に対してクリックできないことを確認します。
ここで、もう一度、日付のボタンを押して、カレンダーが非表示になることを確認します。
再度、日付のボタンを押してカレンダーを表示させて、24日以外の日付をクリックします。ここでは、19日をクリックします。
クリック後、下図のように、左の上のボタンの日付表示がクリックした19日に変更されて、その後カレンダーが非表示になることを確認します。（家計簿アプリでは、このタイミングで、クリックした日の支出データを表示することになります。）
再度、日付のボタンを押して、表示したカレンダーの日付がクリックした日付の19日になっていることを確認します。
次に、「本日を表示」ボタンを押して、日付のボタンの表示が本日の日付である24日に戻っていることを確認します。
この時、カレンダーが表示されている状態であれば、非表示にします。（家計簿アプリでは、このタイミングで、本日の支出データを表示します。）
日付のボタンを押して、カレンダーを表示して、本日の日付である24日がフォーカスされていることを確認します。
以上が、家計簿アプリでのカレンダー操作を考慮した形になっていますが、QCalendarWidgetクラスの使い方になります。
４．最後に
Qtで、カレンダー機能を自作するには大変で、QCalendarWidgetクラスを使用すると簡単に作成することができます。
カレンダーの日付とSQLiteなどのデータベースと組み合わせることで、いろいろ応用することができると思います。
＜関連・おすすめ記事＞
QtでのSQLiteの使い方をプログラムをもとに解説 - 水瓶座列車
Linux勉強用の中古パソコンおすすめショップランキング - 水瓶座列車
無線で複数台接続できるトラックボールマウスのおすすめランキングベスト５ - 水瓶座列車
画面分割できるパソコンディスプレイのおすすめランキングベスト５ - 水瓶座列車
Bluetoothでマルチペアリング(複数台接続)できるマウスのおすすめランキングベスト５ - 水瓶座列車
