Skip to content

Instantly share code, notes, and snippets.

@TerrenceLP

TerrenceLP/index.html

Last active November 14, 2019 14:00
Show Gist options
  • Save TerrenceLP/5f86a723ffa8fb4ac441b25537bd089c to your computer and use it in GitHub Desktop.
Save TerrenceLP/5f86a723ffa8fb4ac441b25537bd089c to your computer and use it in GitHub Desktop.
Download ZIP
Later.js Bootstrap Schedule Maker for Repeat Events Template
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" >
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js" integrity="sha256-TueWqYu0G+lYIimeIcMI8x1m14QH/DQVt4s9m/uuhPw=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/later/1.2.0/later.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container" style="width:800px; margin:20px auto;">
<div class="row">
<form id="repeatschdule" name="repeatschdule" class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Post a Repeating Party - <small>events that happen daily, weekly or monthly</small></legend>
<!-- Select DateRangeRepeat -->
<div class="row">
<div class="col-xs-2"><strong>Repeats </strong></div>
<div class="col-xs-10">
<select id="DateRangeRepeat" name="DateRangeRepeat" class="form-control">
<option value="1">Daily</option>
<option value="2">Weekly</option>
<option value="3">Monthly</option>
</select>
</div>
</div>
<!-- Date input-->
<div class="row">
<div class="col-xs-2"><strong>Starting on </strong></div>
<div class="col-xs-10">
<div class="input-group date" data-provide="datepicker">
<input name="datepick" id="datepick" type="text" class="form-control" value="09-07-2017">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
<!-- Ending On -->
<div class="row">
<div class="col-xs-2 col-sm-2">
<strong>For </strong>
</div>
<div class="col-xs-2 col-sm-2">
<input style="width:35%;" id="occurrences" name="occurrences" class="form-control" type="text" value="2">
</div>
<div class="col-xs-8 col-sm-8 text-left">
<span id="occurunit" name="occurunit"> Days</span>
</div>
</div>
</fieldset>
<hr>
<button type="submit" id="reviewform" class="btn btn-lg btn-default text-center" href="#">Review Schdule</button>
</form>
</div>
<div class="row">
<hr>
<form id="mde" name="mde" class="form-horizontal">
<legend>Post a Multi-Day Party - <small>one event over many days</small></legend>
<fieldset>
<div class="col-md-5">
<div class="input-group date" data-provide="datepicker">
<input name="datepickstart" id="datepickstart" type="text" class="form-control" value="09-14-2017">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
<div class="col-md-5">
<div class="input-group date" data-provide="datepicker">
<input name="datepickend" id="datepickend" type="text" class="form-control" value="09-18-2017">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
<div class="col-md-2">
<button type="submit" id="multiday" class="btn btn-lg btn-info text-center" href="#">Review</button>
</div>
</fieldset>
</form>
</div>
<div class="row">
<h3>Summary</h3>
<div id="output" name="output" class="col-xs-12 col-sm-12">
data loading...
</div>
</div>
<div class="row">
<div id="outputsched" name="outputsched" class="col-xs-12"><ul></ul></div>
</div>
</div>
<script>
$(function() {
$("#DateRangeRepeat").change(function() {
if($(this).find("option:selected").val() == "1") {
$("#occurunit").html(" Days");
}
if($(this).find("option:selected").val() == "2") {
$("#occurunit").html(" Weeks");
}
if($(this).find("option:selected").val() == "3") {
$("#occurunit").html(" Months");
}
});
$('#datepick input').on('click', function() {
$(this).datepicker('clearDates');
});
$('.date').datepicker();
$('.date').on('changeDate', function() {
$('#datepick').val(
$('#datepick').datepicker('getFormattedDate')
);
});
console.log( "ready!" );
});
</script>
<script>
$( "#repeatschdule" ).submit( function(e) {
$.ajax({
url: 'repeat.php',
type: 'post',
data: $("#repeatschdule").serialize(),
success: function(e) {
// Set later to use local time
later.date.localTime();
// Here is the tip
var data = $.parseJSON(e);
var DateRangeRepeat = data.DateRangeRepeat;
var datepick = data.datepick;
var occurrences = data.occurrences;
// Set the date so we can use the parts
var d = new Date(datepick);
var year = later.year.val(d);
var month = later.month.val(d);
var monthweek = later.weekOfMonth.val(d);
var date = later.day.val(d);
var day = later.dayOfWeek.val(d);
var dayweek = later.dayOfWeekCount.val(d);
var minute = later.minute.val(d);
var hour = later.hour.val(d);
// Daily Parties - Parties that span a few days.
if (DateRangeRepeat == '1') {
sched = later.parse.recur().on(date).hour();
repeat = later.schedule(sched).next(occurrences, d);
for(var i = 0; i < occurrences; i++) {
// use this out put for the DB insert
$('#outputsched ul').append('<li>' + repeat[i] + '</li>');
}
}
// weekly Parties - Repeat on the same day of the week on a weekly basis.
if (DateRangeRepeat == '2') {
sched = later.parse.recur().on(day).dayOfWeek();
repeat = later.schedule(sched).next(occurrences, d);
for(var i = 0; i < occurrences; i++) {
// use this out put for the DB insert
$('#outputsched ul').append('<li>' + repeat[i] + '</li>');
}
}
// Monthly Parties - Repeat on the same week and same day each month.
if (DateRangeRepeat == '3') {
sched = later.parse.recur().on(monthweek).weekOfMonth().on(day).dayOfWeek();
repeat = later.schedule(sched).next(occurrences, d);
for(var i = 0; i < occurrences; i++) {
// use this out put for the DB insert
$('#outputsched ul').append('<li>' + repeat[i] + '</li>');
}
}
// Print out schedule for review
if (DateRangeRepeat == '1') {
$("#output").html("<p>Repeats Daily, starting on " + datepick + " repeating " + occurrences + " times.</p>");
}
if (DateRangeRepeat == '2') {
$("#output").html("<p>Repeats Weekly, starting on " + datepick + " repeating " + occurrences + " times.</p>");
}
if (DateRangeRepeat == '3') {
$("#output").html("<p>Repeats Monthly, starting on " + datepick + " repeating " + occurrences + " times.</p>");
}
console.log(data);
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
$( "#mde" ).submit( function(e) {
$.ajax({
url: 'repeat.php',
type: 'post',
data: $("#mde").serialize(),
success: function(e) {
// Set later to use local time
later.date.localTime();
// Here is the tip
var data = $.parseJSON(e);
var datepickstart = data.datepickstart;
var datepickend = data.datepickend;
// Set the date so we can use the parts
var ds = new Date(datepickstart);
var dsyear = later.year.val(ds);
var dsmonth = later.month.val(ds);
var dsmonthweek = later.weekOfMonth.val(ds);
var dsdate = later.day.val(ds);
var dsday = later.dayOfWeek.val(ds);
var dsdayweek = later.dayOfWeekCount.val(ds);
var dsminute = later.minute.val(ds);
var dshour = later.hour.val(ds);
console.log("ds var - " + ds);
console.log("dsyear var - " + dsyear);
console.log("dsmonth var - " + dsmonth);
console.log("dsdate var - " + dsdate);
var de = new Date(datepickend);
var deyear = later.year.val(de);
var demonth = later.month.val(de);
var demonthweek = later.weekOfMonth.val(de);
var dedate = later.day.val(de);
var deday = later.dayOfWeek.val(de);
var dedayweek = later.dayOfWeekCount.val(de);
var deminute = later.minute.val(de);
var dehour = later.hour.val(de);
console.log("de var - " + de);
console.log("deyear var - " + deyear);
console.log("demonth var - " + demonth);
console.log("dedate var - " + dedate);
var mdecount = dedate - dsdate;
console.log("mdecount - " + mdecount);
// Print out schedule for review
$("#output").html("<p>Multi-Day, starting on " + datepickstart + " and ending on " + datepickend + ".</p>");
sched = later.parse.recur().on(dsdate).hour();
repeat = later.schedule(sched).next(mdecount, ds, de);
for(var i = 0; i < mdecount; i++) {
// use this out put for the DB insert
$('#outputsched ul').append('<li>' + repeat[i] + '</li>');
}
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
</script>
</body>
</html>
Raw
repeat.php
<?php
$jdata = json_encode($_POST);
echo $jdata;
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment