100 lines
3.3 KiB
HTML
100 lines
3.3 KiB
HTML
<html>
|
|
<head>
|
|
<title>Calendar generator</title>
|
|
<meta charset="utf-8"></meta>
|
|
</head>
|
|
<body>
|
|
<div id="input">
|
|
<form id="calendar-input">
|
|
<label for="start-date">Start date (YYYY-MM-DD):</label>
|
|
<input name="start-date" id="start-date" type="date" value="2017-01-01" required />
|
|
|
|
<label for="number-of-days">Number of days:</label>
|
|
<input name="number-of-days" id="number-of-days" type="number" value="1" required />
|
|
|
|
<label for="country-code">Country code (2-digit):</label>
|
|
<input name="country-code" id="country-code" type="text" value="CR" required />
|
|
|
|
<input id="generate-button" name="generate-button" type="button" value="Generate"/>
|
|
</form>
|
|
</div>
|
|
<div id="output">
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
//=====
|
|
|
|
var apiKey = "e98ccf69-6131-42ad-a11c-d733698dad63";
|
|
//Above: test key, will return dummy data but is unlimited
|
|
//Below: live key, returns actual data but limited per month
|
|
//Comment/uncomment as necessary, or request a free key at
|
|
//http://holidayapi.com
|
|
//var apiKey = "177c7a48-d566-426b-bb50-cf9926f767ec";
|
|
|
|
function generate() {
|
|
var form = document.getElementById("calendar-input");
|
|
var startDate = document.getElementById("start-date").value;
|
|
var numberOfDays = document.getElementById("number-of-days").value;
|
|
var countryCode = document.getElementById("country-code").value;
|
|
|
|
//TODO:
|
|
//- Count the current day of the week, fill row with
|
|
// blanks until reaching the week's Sunday
|
|
//- Count the current day of the month, break table on
|
|
// the last one, fill row with blanks until reaching
|
|
// the week's Saturday, generate a new month banner,
|
|
// fill new row with blanks from Sunday to that month's
|
|
// 1st
|
|
|
|
if (validateDate(startDate) && validateNumber(numberOfDays) && validateCountry(countryCode)){
|
|
|
|
var startYear = parseInt(startDate.substr(0,4));
|
|
var startMonth = parseInt(startDate.substr(5,2));
|
|
var startDay = parseInt(startDate.substr(8,2));
|
|
|
|
var currentYear = startYear;
|
|
var currentMonth = startMonth;
|
|
var currentDay = startDay;
|
|
|
|
//Start loop
|
|
for (var i = 0; i < numberOfDays; i++){
|
|
var output = document.getElementById("output");
|
|
var weekRow = document.createElement("div");
|
|
weekRow.innerHTML = "TEST";
|
|
output.appendChild(weekRow);
|
|
//TODO: use getDay() to get the week's Sunday (getDay() == 0)
|
|
}
|
|
}
|
|
}
|
|
|
|
function validateDate(dateString){
|
|
//Validate date, convert to its components
|
|
if (dateString.length == 10 && dateString[4] == "-" && dateString[7] == "-") {
|
|
var startYear = parseInt(dateString.substr(0,4));
|
|
var startMonth = parseInt(dateString.substr(5,2));
|
|
var startDay = parseInt(dateString.substr(8,2));
|
|
if (!isNaN(startYear) && !isNaN(startMonth) && !isNaN(startDay)) {
|
|
//Good, we're validated!
|
|
return true;
|
|
}
|
|
}
|
|
//else:
|
|
return false;
|
|
}
|
|
|
|
function validateNumber(num){
|
|
return !isNaN(parseInt(num));
|
|
}
|
|
|
|
function validateCountry(countryCode){
|
|
//TODO: compare with the whole list of countries in the
|
|
//API
|
|
return (countryCode.length == 2);
|
|
}
|
|
|
|
document.getElementById("generate-button").onclick = generate();
|
|
//=====
|
|
</script>
|
|
</body>
|
|
</html>
|