Responsive Calendar

This is a responsive CSS calendar:


HTML

<table id="header-table">
    <tbody>
<tr>
<th>Month 2017</th>
</tr>
    </tbody>
  </table>
  <table id="day-names">
    <tbody>
      <tr>
        <td>Sunday</td>
        <td>Monday</td>
        <td>Tuesday</td>
        <td>Wednesday</td>
        <td>Thursday</td>
        <td>Friday</td>
        <td>Saturday</td>
      </tr>
    </tbody>
  </table>
  <table class="week">
    <tr>
      <td class="date today">30</td>
      <td class="date today">1</td>
      <td class="date today">2</td>
      <td class="date today">3</td>
      <td class="date today">4</td>
      <td class="event holiday">5</td>
      <td class="date today">6</td>
    </tr>
    <tr>
      <td class="date today">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>Open Registration <a href="#r">Register</a></td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <table class="week">
    <tr>
      <td class="date today">7</td>
      <td class="event important">8</td>
      <td class="date today">9</td>
      <td class="date today">10</td>
      <td class="date today">11</td>
      <td class="date today">12</td>
      <td class="date today">13</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td class="description">[extra href="#special" title="NOTES" info="popover" info_place="right" info_trigger="hover" info_content="This class teaches students the basic fundamentals of air conditioning and heatin systems and their core components." ]Notes[/extra]</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <table class="week">
    <tr>
      <td class="date today">14</td>
      <td class="event important">15</td>
      <td class="date today">16</td>
      <td class="date today">17</td>
      <td class="date today">18</td>
      <td class="event holiday">19</td>
      <td class="date today">20</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td class="description">[extra href="#special" title="Notes" info="popover" info_place="right" info_trigger="hover" info_content="This class teaches students the basic fundamentals of air conditioning and heatin systems and their core components." ]Notes[/extra]</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="description">Forms Deadline</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <table class="week">
    <tr>
      <td class="date today">21</td>
      <td class="date today">22</td>
      <td class="date today">23</td>
      <td class="date today">24</td>
      <td class="date today">25</td>
      <td class="date today">26</td>
      <td class="date today">27</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <table class="week">
    <tr>
      <td class="date today">28</td>
      <td class="date today">29</td>
      <td class="date today">30</td>
      <td class="date today">31</td>
      <td class="date today">1</td>
      <td class="date today">2</td>
      <td class="date today">3</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="date today">&nbsp;</td>
      <td class="date today">&nbsp;</td>
      <td class="date today">&nbsp;</td>
    </tr>
  </table>

EXAMPLE:
Note that this calendar also uses the Popover function.

Month 2017
SundayMondayTuesdayWednesdayThursdayFridaySaturday
30123456
     Open Registration Register 
78910111213
 Notes     
14151617181920
 Notes   Forms Deadline 
21222324252627
       
28293031123
       

See a Live Demo