How to create a Custom Calendar

English Български

Pre-Requisites

• "Basic_Qt_Programming_Tutorial":http://wiki.qt.io/Basic_Qt_Programming_Tutorial

This calendar widget is a Composite widget comprising of a QToolButton,QLabel and QCalendarWidget.

Now create a QtGui Application by selecting File-New-Qt Widget Project-Qt Gui Application from the Qt Creator.

The above procedure will create a project consisting of four files with the user defined class name:

• main.cpp
• calendardialog.h
• calendardialog.cpp
• calendardialog.ui

Creating a Custom Calendar by Editing the files

Name the class with the Choice Name.Current class Name is Calendar.

open the calendardialog.ui, from the Designer view, Drag and drop the following controls.

Four tool buttons. yearBackButton, yearFrontButton, MonthBackButton, MonthFrontButton Two labels, Titlelabel, DateLabel, Three horizontal spacers, One Button OkButton, and a calendar widget. calendarWidget

Now open the calendardialog.h and edit,

add the required slots to the calendardialog.h file.

calendardialog.h

#ifndef CALENDARDIALOG_H
#define CALENDARDIALOG_H

#include "ui_calendardialog.h"

class Calendar : public QDialog
{
 Q_OBJECT

public:
 explicit Calendar(QWidget *parent = 0);
 private:
 Ui::calendarDialog ui;

private:
 QDate getdate();
 QDate currentDate() const;
 void setCurrentDate(const QDate &d);
 void on_calendar_clicked(const QDate &date);

private slots:

void on_MonthFrontButton_clicked();
 void on_MonthBackButton_clicked();

void on_yearBackButton_clicked();
 void on_yearFrontButton_clicked();

void on_OkButton_clicked();
};

#endif // CALENDARDIALOG_H

edit the corresponding calendardialog.cpp, connect and implement the slots like below.

calendardialog.cpp

#include <QCalendarWidget>
#include <QDate>
#include <QApplication>
#include <QMessageBox>

#include "calendardialog.h"

Calendar::Calendar(QWidget *parent) :
 QDialog(parent)
{
 ui.setupUi(this);
 setWindowFlags(Qt::FramelessWindowHint);
 ui.calendarWidget->setNavigationBarVisible(false);
 ui.calendarWidget->setHorizontalHeaderFormat(QCalendarWidget::SingleLetterDayNames);
 ui.calendarWidget->setVerticalHeaderFormat(QCalendarWidget::NoVerticalHeader);

QObject::connect(ui.yearBackButton,SIGNAL (clicked()),this,SLOT (on_yearBackButton_clicked()));
 QObject::connect(ui.yearFrontButton,SIGNAL (clicked()),this,SLOT (on_yearFrontButton_clicked()));
 QObject::connect(ui.MonthBackButton,SIGNAL (clicked()),this,SLOT (on_MonthBackButton_clicked()));
 QObject::connect(ui.MonthFrontButton,SIGNAL (clicked()),this,SLOT (on_MonthFrontButton_clicked()));

QObject::connect(ui.OkButton,SIGNAL (clicked()),this,SLOT (on_OkButton_clicked()));

}

QDate Calendar::currentDate() const {
 return ui.calendarWidget->selectedDate();
}
void Calendar::setCurrentDate(const QDate &amp;d) {
 QDate date = d;
 if (!date.isValid())
 date = QDate::currentDate();
 ui.calendarWidget->setSelectedDate(date);
 ui.calendarWidget->showSelectedDate();
 on_calendar_clicked(date);
}

void Calendar::on_calendar_clicked(const QDate &amp;date) {
 ui.DateLabel->setText(date.toString("dd MMMM yyyy"));
}

QDate Calendar::getdate ()
{
 QMessageBox showDateMessage(QMessageBox::Warning,
 ui.calendarWidget->selectedDate().toString("dd MMMM yyyy"),"",QMessageBox::Ok,0);
 ui.DateLabel->setText(ui.calendarWidget->selectedDate().toString("dd MMMM yyyy"));
 showDateMessage.setText("Date Selected is "+ui.calendarWidget->selectedDate().toString("dd MMMM yyyy"));
 int ret = showDateMessage.exec();
 if(ret == QMessageBox::Ok)
 {

accept();
 return ui.calendarWidget->selectedDate();

}
 else
 {
 return QDate();
 }

}
void Calendar::on_yearBackButton_clicked() {
 QDate date = currentDate();

date = date.addYears(–1);
 setCurrentDate(date);
}

void Calendar::on_yearFrontButton_clicked() {
 QDate date = currentDate();
 date = date.addYears(+1);
 setCurrentDate(date);
}

void Calendar::on_MonthFrontButton_clicked() {
 QDate date = currentDate();
 date = date.addMonths(+1);
 setCurrentDate(date);
}

void Calendar::on_MonthBackButton_clicked()
{
 QDate date = currentDate();
 date = date.addMonths(–1);
 setCurrentDate(date);
}

void Calendar::on_OkButton_clicked()
{
 getdate();
}

The UI file looks like this in the editable xml file format.

calendardialog.ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>calendarDialog</class>
 <widget class="QDialog" name="calendarDialog">
 <property name="geometry">
 <rect>
 <x>0</x>
 <y>0</y>
 <width>400</width>
 <height>300</height>
 </rect>
 </property>
 <property name="windowTitle">
 <string>calendarDialog</string>
 </property>
 <layout class="QGridLayout" name="gridLayout">
 <item row="0" column="0" colspan="2">
 <widget class="QLabel" name="Titlelabel">
 <property name="text">
 <string>Date Selector</string>
 </property>
 <property name="alignment">
 <set>Qt::AlignCenter</set>
 </property>
 </widget>
 </item>
 <item row="1" column="0" colspan="2">
 <layout class="QHBoxLayout" name="horizontalLayout">
 <item>
 <widget class="QToolButton" name="yearBackButton">
 <property name="minimumSize">
 <size>
 <width>30</width>
 <height>0</height>
 </size>
 </property>
 <property name="text">
 <string><<</string>
 </property>
 </widget>
 </item>
 <item>
 <spacer name="horizontalSpacer">
 <property name="orientation">
 <enum>Qt::Horizontal</enum>
 </property>
 <property name="sizeType">
 <enum>QSizePolicy::Fixed</enum>
 </property>
 <property name="sizeHint" stdset="0">
 <size>
 <width>20</width>
 <height>20</height>
 </size>
 </property>
 </spacer>
 </item>
 <item>
 <widget class="QToolButton" name="MonthBackButton">
 <property name="text">
 <string><</string>
 </property>
 </widget>
 </item>
 <item>
 <widget class="QLabel" name="DateLabel">
 <property name="text">
 <string/>
 </property>
 <property name="alignment">
 <set>Qt::AlignCenter</set>
 </property>
 </widget>
 </item>
 <item>
 <widget class="QToolButton" name="MonthFrontButton">
 <property name="text">
 <string>></string>
 </property>
 </widget>
 </item>
 <item>
 <spacer name="horizontalSpacer_2">
 <property name="orientation">
 <enum>Qt::Horizontal</enum>
 </property>
 <property name="sizeType">
 <enum>QSizePolicy::Fixed</enum>
 </property>
 <property name="sizeHint" stdset="0">
 <size>
 <width>20</width>
 <height>20</height>
 </size>
 </property>
 </spacer>
 </item>
 <item>
 <widget class="QToolButton" name="yearFrontButton">
 <property name="minimumSize">
 <size>
 <width>30</width>
 <height>0</height>
 </size>
 </property>
 <property name="text">
 <string>>></string>
 </property>
 </widget>
 </item>
 </layout>
 </item>
 <item row="2" column="0" colspan="2">
 <widget class="QCalendarWidget" name="calendarWidget"/>
 </item>
 <item row="3" column="0">
 <spacer name="horizontalSpacer_3">
 <property name="orientation">
 <enum>Qt::Horizontal</enum>
 </property>
 <property name="sizeHint" stdset="0">
 <size>
 <width>298</width>
 <height>20</height>
 </size>
 </property>
 </spacer>
 </item>
 <item row="3" column="1">
 <widget class="QPushButton" name="OkButton">
 <property name="maximumSize">
 <size>
 <width>150</width>
 <height>60</height>
 </size>
 </property>
 <property name="text">
 <string>Ok</string>
 </property>
 </widget>
 </item>
 </layout>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections/>
</ui>

Finally Create an instance of the Calendar class in main.cpp and call show() method before entering the event loop by calling a.exec()

main.cpp

#include <QtGui/QApplication>
#include "calendardialog.h"

int main(int argc, char '''argv[])
{
 QApplication a(argc, argv);
 Calendar w;
 w.show();

 return a.exec();
}

With the above example files one can easily create a custom calendar widget.

h2. See also

"How to use signals and slots":http://developer.qt.nokia.com/wiki/How-to-use-signals-and-slots

• "Counting_Clicks_for_Qt_Widgets":http://wiki.qt.io/Counting_Clicks_for_Qt_Widgets