JSFiddle - React, Tailwind, and code Playground

HTML

<div id="calendar">
    <header>
        <a href="#" class="back-btn">back</a>
        <a href="#" class="next-btn">next</a>
    </header>
    <div class="box" data-width="300">
        <div class="slider-container">
            fsdfaaaaaaaaaaaaaaaaaaaaaaaaaaaaadsafsdfsdfsdfsdfsdfsdfsdfsdsfsdfdfsdfsdfsdbtrrgererferferferferffer
        </div>
    </div>
</div>

CSS

.box {
    width: 300px;
    height: 100px;
    overflow: hidden;
    position: relative;
}
.slider-container {
    width: 900px;
    height: 100px;
    background: #aaa;
    position: absolute;
    left: 0;
}

JavaScript

function _testSlider()
{
	var headBar         = $('#calendar header');
	var container       = $('.box .slider-container');
	var prevBtn         = headBar.find('.back-btn');
	var nextBtn         = headBar.find('.next-btn');
	var offset          = $('.box').data('width');
	var position        = container.position();
	var contentWidth    = container.width();


		nextBtn.click(function(e)
		{
			e.preventDefault();

			position = container.position();

			if(position.left < (contentWidth - offset))
			{
				container.animate({'left' : (position.left - offset)}, 400);
			}
			console.log((contentWidth - offset));
		})



		prevBtn.click(function(e)
		{
			e.preventDefault();

			position = container.position();

			if(position.left > offset)
			{
				container.css('left', (position.left + offset));
			}
			console.log(offset);
		})
}
$(function()
{
    _testSlider();   
})