Python calendar output in HTML format

Python calendar output in HTML format

ยท

5 min read

Hi there everyone. ๐Ÿ‘‹ How's your weekend going?
Hope you are doing well. ๐Ÿ™‚

So, as you read the title, I am gonna share with you about creating a Calendar in python and making its HTML version using a python command.

Prerequisites ๐ŸŽ’

  • A bit of knowledge of Python,
  • A bit of knowledge of HTML and CSS,
  • Willing to code.

Coding โ˜•๏ธ

Let's start by opening the command line app cmd in windows or terminal in mac os,
and start typing the following commands.

python -m calendar 2021
  • This command will output the calendar for the whole year.

Screenshot 2020-11-27 at 11.21.29 PM.jpg

python -m calendar 2021 1
  • This command can be used to print a particular month.
  • 1 is used for January in this example:

Screenshot 2020-11-28 at 12.17.47 AM.jpg


Adding HTML tags to the Calendar using Python command โžค

python -m calendar 2021 -t html
  • This will gives the html output of the specified calendar.

Screenshot 2020-11-28 at 1.05.28 AM.jpg

  • Just copy the html part and open your favorite code editor.
    I am using VS code. Screenshot 2020-11-28 at 1.10.45 AM.jpg
  • Create a new file and name it pycal.html.
  • Now paste the html code in this file.

Screenshot 2020-11-28 at 1.24.33 AM.jpg

  • Well, we have now reached the designing mode of our calendar.
    Don't worry if the code looks too big. We are going to do some cool tricks in our next steps.
    ๐Ÿ‘
  • Toggle the <table> tag to collapse its content.
  • Now add div containers as shown in the below example.

Screenshot 2020-11-28 at 1.35.01 AM.jpg

Adding CSS styling to our calendar. โžค

  • Create a CSS file in the same folder as calendar.css.
  • Now add the following code in that CSS file.
    .grid-container{
         display: grid;
         grid-template-columns: auto auto auto;
         text-align: center;}
    .grid-item{
         padding: 10px;
     }
    .grid-item2{
         padding: 3%;
         text-align: center;
         margin: 15px;
     }
    body{
        text-align: center;
        background-color: rgb(249, 240, 255);
    }
    table{
        margin: 10px;
        padding: 10px;
        width: 100%;
        background-color: rgb(255, 255, 255);
        border-radius: 5%;
    }
    
  • So far our calendar looks like this :

Screenshot 2020-11-28 at 1.46.21 AM.jpg Giving final touch to our calendar โžค

  • Add the following code in the CSS file :
    .mon{
      color:blue;
    }
    .sat{
      color: rgb(130, 20, 220);
    }
    .sun{
      color: rgb(233, 28, 124);
    }
    th1{
      color: crimson;
      margin: 100px;
    }
    
  • This will color-code all the mons, sats and suns

    Awesome. โœŒ๐Ÿผ

    We have completed our Calendar app which looks like this :

Screenshot 2020-11-28 at 1.52.28 AM.jpg

Summary. ๐Ÿ’๐Ÿฝโ€โ™€๏ธ

  • Modules used:
    • Calendar module (python)
  • Other languages used:
    • HTML and CSS (for styling only)

So, this is how we can create. a calendar app in HTML format using python.
And the best thing is, we have used only one line of python code to create our calendar.

Hope you like this article/tutorial of my series Random-Coding.
Please read my other articles of this series as well for more cool and fun projects.

I will meet you through my next article soon. Till then, stay connected with me through Twitter and Discord

Keep Coding, keep growing โ˜•๏ธ

References: ๐Ÿ“š

Use the following help command.

python -m calendar -h