JQuery custom calendar

I kind of want to create a calendar as you can see here: http://fullcalendar.io/

I want to have the time as the X-axis and different names as the Y-axis. I created my own version using JQuery UI Slider: http://rockaholics-cologne.de/root/Timetable.php

Using the slider doesn't feel like the optimal approach. I am not asking for code here. But maybe you can tell me what to look for. I want to create these resizeable bars as seen in the first link and have them in my layout as seen in the second link.

I just can't find the right keywords to google for so maybe you have an idea?

Thanks! :D

Solution

This fiddle here will give you good groundwork for resizable divs http://jsfiddle.net/nick_craver/bx2mk/ I think that this is what you are looking for .enter code here

$("#resizable").resizable({
    handles: 'e, w'
});

#resizable { width: 150px; height: 50px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script   src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"   integrity="sha256-55Jz3pBCF8z9jBO1qQ7cIf0L+neuPTD1u7Ytzrp2dqo="   crossorigin="anonymous"></script>

<div id="resizable" class="ui-widget-content">
    <h3 class="ui-widget-header">Resizable</h3>
</div>