JSFiddle - React, Tailwind, and code Playground

HTML

<div class="calmask">
    <ul>
        <li>
            <h3 >
                <a href="http://acs.graphicsmayhem.com/smf/index.php?action=calendar;year=2010;month=10">October 2010</a>
            </h3>
            <table cellspacing="1">
                <tr>
                    <th>Su</th>
                    <th>M</th>
                    <th>Tu</th>
                    <th>W</th>
                    <th>Th</th>
                    <th>F</th>
                    <th>Sa</th>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="collapse">1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>
                    <td>14</td>
                    <td>15</td>
                    <td>16</td>
                </tr>
                <tr>
                    <td class="today">17</td>
                    <td>18</td>
                    <td>19</td>
                    <td>20</td>
                    <td>21</td>
                    <td>22</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td>24</td>
                    <td>25</td>
                    <td>26</td>
                    <td>27</td>
                    <td>28</td>
                    <td>29</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td>31</td>
                    <td></td>
                    <td></td>
                    <td></td>
     ...

CSS

.calmask                       {height:150px; width:170px; border:1px solid; overflow:hidden; position:relative;}
.calmask ul                          {position:absolute; overflow:hidden;}
.calmask ul li                          {float:left; display:inline; margin:0; padding:0; height:152px; width:170px;}
.calmask ul li h3                       {margin:0; padding:0; font-size:12px; text-align:center;}
.calmask ul li table                    {text-align:right; width:160px;}
.calmask ul li table th                 {font-size:10px; text-align:right;}
.calmask ul li table td                 {text-align:right; height:20px; font-size:10px;}

.cal_controls                   {width:170px; overflow:hidden;}
.cal_controls .nextLink       {float:right; display:inline;}
.cal_controls .prevLink   {float:left; display:inline;}

JavaScript

$(document).ready(function(){
            // Count the number of li's.
            var liCount = $('.calmask ul li').length;

            // Generate the width needed for the ul.
            var ulWidth = liCount * $('.calmask ul li:first').outerWidth() + 5;
            
            // Set the ul width.
            $('.calmask ul').css({width: ulWidth});
            
            var maskWidth = $('.calmask').outerWidth();
            var listWidth = $('.calmask ul').outerWidth();
            var roomToMoveW = maskWidth - listWidth;
            var currentLeftPos = - $('.show').position().left;

             $('.calmask ul').animate({
                left: currentLeftPos
            });
            
            $('.nextLink').click(function(){
                 if(currentLeftPos > roomToMoveW){
                        var widPos = currentLeftPos - maskWidth;
                        if(widPos < roomToMoveW){
                            widPos = roomToMoveW;
                        }
                        $('.calmask ul').animate({
                            left: widPos
                        });
                        currentLeftPos = widPos;
                 }
            });
            
            $('.prevLink').click(function(){
                if(currentLeftPos < 0){
                        var widPos = currentLeftPos + maskWidth;
                        if(widPos > 0){
                            widPos = 0;
                        }
                        $('.calmask ul').animate({
                            left: widPos
                        });
                        currentLeftPos = widPos;
                }    
            });
        });