HTML
<div> <h1>March</h1> <img src="https://images.unsplash.com/photo-1611132179879-d7272621e424?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1901&q=80" /> <table> <thead> <tr> <th>Mo</th> <th>Tu</th> <th>We</th> <th>Th</th> <th>Fr</th> <th>Sa</th> <th>Su</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> </tr> <tr> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> </tr> <tr> <td>29</td> <td>30</td> <td>31</td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> <div> <h1>April</h1> <img src="https://images.unsplash.com/photo-1556545054-acc5bd624ca9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1868&q=80" /> <table> <thead> <tr> <th>Mo</th> <th>Tu</th> <th>We</th> <th>Th</th> <th>Fr</th> <th>Sa</th> <th>Su</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> </tr> <tr> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> <td>18</td> </tr> <tr> <td>19</td> <td>20</td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> <td></td> <td></td> </tr> </tbody> </table> </div>
CSS
@import url('https://fonts.googleapis.com/css2?family=Gravitas+One&display=swap'); @page{ margin:0; } body{ margin:0; padding:0; font-family: 'Gravitas One', cursive; } div{ page-break-after:always; break-after:always; } h1{ position:absolute; left:50%; top:2cm; z-index:3; transform:translateX(-50%); font-weight:bold; font-size:4em; color:white; background:rgba(0,0,0,.5); border-radius:5mm; padding:5mm; } img{ max-width:100%; position:absolute; top:0; z-index:1; } table{ width:100%; position:absolute; bottom:0; z-index:2; background-color:white; } th{ height:1.5cm; line-height:1.5cm; background:deepskyblue; } td{ height:2cm; line-height:2cm; background:lightgreen; } th, td{ text-align:center; font-weight:bold; font-size:2em; color:white; } td:empty{ background:lightgrey; }
JavaScript
Preview powered by paged.js
PDF rendered with  (https://weasyprint.org/)