[PyQt5] Tutorial(9) Use QCalendarWidget to create a calendar component

Last Updated on 2022-12-14 by Clay

The original plan about PyQt5 did not intend to write so many articles. Unexpectedly, in the process of learning, I would constantly find things that I needed to record.

The calendar component is a component often used in the development of GUI interfaces, and is often used to allow users to select different dates.

It has been encapsulated by the QCalendar class in PyQt5.

---

Getting Start

First, let's take a look at how to implement the function: let user selects the date, and then our interface highlight this date.

This is my interface code converted by PyUIC:

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'calendar_test.ui'
#
# Created by: PyQt5 UI code generator 5.11.3
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.calendarWidget = QtWidgets.QCalendarWidget(self.centralwidget)
        self.calendarWidget.setGeometry(QtCore.QRect(0, 0, 661, 431))
        self.calendarWidget.setLocale(QtCore.QLocale(QtCore.QLocale.English, QtCore.QLocale.UnitedStates))
        self.calendarWidget.setObjectName("calendarWidget")
        self.lcdNumber = QtWidgets.QLCDNumber(self.centralwidget)
        self.lcdNumber.setGeometry(QtCore.QRect(0, 440, 661, 111))
        font = QtGui.QFont()
        font.setFamily("Arial")
        font.setPointSize(6)
        font.setBold(True)
        font.setWeight(75)
        self.lcdNumber.setFont(font)
        self.lcdNumber.setDigitCount(15)
        self.lcdNumber.setProperty("value", 777777777.0)
        self.lcdNumber.setProperty("intValue", 777777777)
        self.lcdNumber.setObjectName("lcdNumber")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 25))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))

And the following is my main code:

# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets
from calendar_test import Ui_MainWindow
import sys

monthConvert = {'一': '01', '二': '02', '三': '03', '四': '04', '五': '05', '六': '06', '七': '07', '八': '08',
                '九': '09', '十': '10', '十一': '11', '十二': '12'}


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setWindowTitle('Calendar')

        # Calender
        self.ui.calendarWidget.selectionChanged.connect(self.calendarEvent)

    def calendarEvent(self):
        date = self.ui.calendarWidget.selectedDate().toString().split(' ')
        weekday, month, day, year = date
        print(date)
        month = monthConvert[month[0]]
        self.ui.lcdNumber.display('%s %s %s' % (year, month, day))


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())

Output:

The default is the system current time.

self.ui.calendarWidget.selectionChanged.connect() is the most important code.

self.ui.calendarWidget.selectionChanged.connect(self.calenderEvent)

The calendarWidget is our calendar component, we set here when the user selects a date, connect to the event self.calendarEvent we wrote separately.

def calendarEvent(self):
    date = self.ui.calendarWidget.selectedDate().toString().split(' ')
    weekday, month, day, year = date
    print(date)
    month = monthConvert[month[0]]
    self.ui.lcdNumber.display('%s %s %s' % (year, month, day))

The calendarEvent() function is the event we triggered.。

We put the results from selectedDate().toString() to stored in "weekday", "month", "day", "year" variables.

And we convert the month to number. (Because my system language is Chinese)

To display our date in LCD component.

In additional, we can customize this component to more fashion (Use Stylesheet).

Looks like this.

---

Read More

• [PyQt5] Tutorial(1) Install PyQt5 and print "Hello World!"
• [PyQt5] Tutorial(2) QLabel, QLineEdit, QPushButton
• [PyQt5] Tutorial(3) QMainWindow, QIcon, QPixmap, QPalette
• [PyQt5] Tutorial(4) Menu, Toolbar
• [PyQt5] Tutorial(5) ProgressBar, HorizontalSlider, QDial
• [PyQt5] Tutorial(6) comboBox、BoxLayout
• [PyQt5] Tutorial(7) hide, show, auto fit window size
• [PyQt5] Tutorial(8) QTimer, QlcdNumber
• [PyQt5] Tutorial(9) Use QCalendar to create a calendar component
• [PyQt5] Tutorial(10) Use keyboard to enter command and listen mouse clicked
• [PyQt5] Tutorial(11) Use QColorDialog to let user select color