Skip to content

Instantly share code, notes, and snippets.

@JsAndDotNet

JsAndDotNet/calendar.html

Created February 10, 2017 09:52
Show Gist options
  • Save JsAndDotNet/0577ddb49c3132c9f7b383b4bfc37c81 to your computer and use it in GitHub Desktop.
Save JsAndDotNet/0577ddb49c3132c9f7b383b4bfc37c81 to your computer and use it in GitHub Desktop.
Download ZIP
Very basic starting point for iPhone style calendar using Html/JQuery
Raw
calendar.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" href=""/>
<!-- http://qnimate.com/javascript-scroll-by-dragging/ -->
<!-- Test this on all browsers! and make sure it doesn't interfere with click event.' -->
<script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script>
$(function(){
/* on load, scroll to a sensible hour */
scrollToId('.hour-container', '#hour5');
/* Dates clicked, not dragged! */
var $dateControl = $('.date');
$dateControl.on('mousedown', function (evt) {
$dateControl.on('mouseup mousemove', function handler(evt) {
if (evt.type === 'mouseup') {
// click
alert('clicked!');
} else {
// drag
}
$dateControl.off('mouseup mousemove', handler);
});
});
/* On click of an hour, add the appointment. */
$('.hour').on('click', function(){
var hourSize = 30; /* each hour is currently 30px */
var numberOfHours = 1.5;
/* Dont allow double booking */
var currentChildren = $(this).children('.appt-no-height');
if(currentChildren && currentChildren.length > 0){
return;
}
/* create an id to work with */
var newChildId = "apptXoXo";
$(this).append("<div id=\"" + newChildId + "\" class=\"appt-no-height\">Dave Appt</div>");
var child = $(this).children('#' + newChildId);
$(child).height(hourSize * numberOfHours);
});
});
/* Enables scrolling to a set position */
function scrollToId(scrollContainer, aid){
var aTag = $(aid);
$(scrollContainer).animate({scrollTop: aTag.offset().top},'slow');
}
</script>
<style>
html,body {
background: white;
height:100%;
padding:0;
margin:0;
-ms-overflow-style: -ms-autohiding-scrollbar;
overflow: -moz-scrollbars-none;
font-family: arial, helvetica, sans-serif;
}
.container-grab{
overflow: scroll; cursor: grab; cursor : -o-grab; cursor : -moz-grab; cursor : -webkit-grab
}
/* container for whole control */
.date-control-container{
height:60vh; /* controls how many hours we'll see*/
background-color:orange;
margin: 10px 20px 0 10px;
overflow: hidden;
}
/* container for top row of dates */
.dates-container{
position: relative;
background-color: #EEEEEE;
height: 50px;
width:100%;
overflow: hidden;
white-space:nowrap; /*stops newline of divs*/
}
/* each individual date */
.date{
display:inline-block;
height:30px;
width:100px;
background-color:lightgray;
margin-top:15px;
margin-right:5px;
overflow:hidden;
}
/* container for all hours */
.hour-container{
position: relative;
background-color: lightgray;
height: calc(100% - 50px);
height: -moz-calc(100% - 50px);
height: -webkit-calc(100% - 50px);
width:100%;
overflow-y: scroll;
overflow-x: hidden;
white-space:nowrap; /*stops newline of divs*/
}
/* each hour */
.hour{
display:block;
height:30px; /* the height of each hour */
width:100%;
background-color:white;
margin: 1px;
overflow:hidden;
}
/* the standard text in the control - e.g. 8am */
.hourText {
font-size: 8pt;
display: inline-block;
vertical-align: top;
}
/* a dummy appointment. */
.dummy-appt{
height: 60px; /*2 hours*/
background-color: lightblue!important;
}
/* standard appointment container */
.appt-no-height {
display: inline-block;
vertical-align: top;
width: 50%;
background-color: lightgreen;
position: absolute;
margin: 0 0 0 10px;
border: solid 1px black;
border-radius: 5px;
padding: 3px;
}
</style>
</head>
<body>
<div class="date-control-container">
<!-- TODO:
http://stackoverflow.com/questions/28576636/mouse-click-and-drag-instead-of-horizontal-scroll-bar-to-view-full-content-of-c
-->
<div class="dates-container">
<div class="dragscroll container-grab">
<div class="date">Today</div>
<div class="date">Tomorrow</div>
<div class="date">Weds 18/01/17</div>
<div class="date">Thur 19/01/17</div>
<div class="date">Fri 19/01/17</div>
<div class="date">Sat 19/01/17</div>
<div class="date">22/01/2017</div>
<div class="date">23/01/2017</div>
<div class="date">24/01/2017</div>
<div class="date">25/01/2017</div>
</div>
</div>
<div class="hour-container">
<div>
<div id="hour0" class="hour hour0"><div class="hourText">12am</div></div>
<div id="hour1" class="hour hour1"><div class="hourText">1am</div></div>
<div id="hour2" class="hour hour2"><div class="hourText">2am</div></div>
<div id="hour3" class="hour hour3"><div class="hourText">3am</div></div>
<div id="hour4" class="hour hour4"><div class="hourText">4am</div></div>
<div id="hour5" class="hour hour5"><div class="hourText">5am</div></div>
<div id="hour6" class="hour hour6"><div class="hourText">6am</div></div>
<div id="hour7" class="hour hour7"><div class="hourText">7am</div></div>
<div id="hour8" class="hour hour8"><a name="scrollToMe" /><div class="hourText">8am</div>
<div class="appt-no-height dummy-appt">Test</div>
</div>
<div id="hour9" class="hour hour9"><div class="hourText">9am</div></div>
<div id="hour10" class="hour hour10"><div class="hourText">10am</div></div>
<div id="hour11" class="hour hour11"><div class="hourText">11am</div></div>
<div id="hour12" class="hour hour12"><div class="hourText">12pm</div></div>
<div id="hour13" class="hour hour13"><div class="hourText">1pm</div></div>
<div id="hour14" class="hour hour14"><div class="hourText">2pm</div></div>
<div id="hour15" class="hour hour15"><div class="hourText">3pm</div></div>
<div id="hour16" class="hour hour16"><div class="hourText">4pm</div></div>
<div id="hour17" class="hour hour17"><div class="hourText">5pm</div></div>
<div id="hour18" class="hour hour18"><div class="hourText">6pm</div></div>
<div id="hour19" class="hour hour19"><div class="hourText">7pm</div></div>
<div id="hour20" class="hour hour20"><div class="hourText">8pm</div></div>
<div id="hour21" class="hour hour21"><div class="hourText">9pm</div></div>
<div id="hour22" class="hour hour22"><div class="hourText">10pm</div></div>
<div id="hour23" class="hour hour23"><div class="hourText">11pm</div></div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment