Skip to content

Instantly share code, notes, and snippets.

@tbogdala

tbogdala/ParamedicCalendarGenerator.html

Last active February 23, 2025 21:54
Show Gist options
  • Save tbogdala/3b2a22dfa3f94bac40e389b5d8bbd7f0 to your computer and use it in GitHub Desktop.
Save tbogdala/3b2a22dfa3f94bac40e389b5d8bbd7f0 to your computer and use it in GitHub Desktop.
Download ZIP
This webpage is a simple 'app' to generate a shift calendar for my job where red, green and blue shifts rotate throughout the year and I always have Sunday or Wednesday off.
Raw
ParamedicCalendarGenerator.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom Calendar Generator</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
padding: 20px;
}
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
margin-top: 20px;
}
.day {
padding: 10px;
text-align: center;
border-radius: 5px;
background-color: #e9ecef;
}
.blue {
background-color: rgba(0, 123, 255, 0.1);
}
.red {
background-color: rgba(220, 53, 69, 0.1);
}
.green {
background-color: rgba(40, 167, 69, 0.1);
}
.highlight-blue {
background-color: #007bff;
color: white;
}
.highlight-red {
background-color: #dc3545;
color: white;
}
.highlight-green {
background-color: #28a745;
color: white;
}
.week {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
margin-bottom: 5px;
}
.month {
margin-bottom: 20px;
}
.month-name {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
<div class="container">
<h1 class="text-center mb-4">Paramedic Shift Calendar</h1>
<form id="calendarForm" class="mb-4">
<div class="row g-3">
<div class="col-md-3">
<label for="year" class="form-label">Year</label>
<input
type="number"
id="year"
class="form-control"
min="1900"
max="2100"
required
/>
</div>
<div class="col-md-3">
<label for="startColor" class="form-label"
>Color of January 1st</label
>
<select id="startColor" class="form-select" required>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
</div>
<div class="col-md-3">
<label for="highlightColor" class="form-label"
>Highlight Color</label
>
<select
id="highlightColor"
class="form-select"
required
>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
</div>
<div class="col-md-3">
<label for="restDay" class="form-label">Rest Day</label>
<select id="restDay" class="form-select" required>
<option value="sunday">Sunday</option>
<option value="wednesday">Wednesday</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary mt-3">
Generate Calendar
</button>
</form>
<div id="calendarContainer"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$("#calendarForm").on("submit", function (e) {
e.preventDefault();
const year = $("#year").val();
const startColor = $("#startColor").val();
const highlightColor = $("#highlightColor").val();
const restDay = $("#restDay").val();
generateCalendar(year, startColor, highlightColor, restDay);
});
function generateCalendar(
year,
startColor,
highlightColor,
restDay,
) {
const colors = ["blue", "red", "green"];
let startIndex = colors.indexOf(startColor);
const calendarContainer = $("#calendarContainer");
calendarContainer.empty();
const monthNames = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
for (let month = 0; month < 12; month++) {
const monthDiv = $('<div class="month"></div>');
monthDiv.append(
`<div class="month-name">${monthNames[month]} ${year}</div>`,
);
// Determine the starting day of the month (0 = Sunday, 6 = Saturday)
const firstDayOfMonth = new Date(
year,
month,
1,
).getDay();
const daysInMonth = new Date(
year,
month + 1,
0,
).getDate();
// Create the weeks
let weekDiv = $('<div class="week"></div>');
// Add empty cells for days before the first day of the month
for (let i = 0; i < firstDayOfMonth; i++) {
weekDiv.append('<div class="day"></div>');
}
for (let day = 1; day <= daysInMonth; day++) {
const currentColor =
colors[(startIndex + day - 1) % 3];
const isRestDay =
(firstDayOfMonth + day - 1) % 7 ===
restDayIndex(restDay);
const isHighlight =
currentColor === highlightColor && !isRestDay;
const dayClass = isHighlight
? `highlight-${currentColor}`
: currentColor;
weekDiv.append(
`<div class="day ${dayClass}">${day}</div>`,
);
// Start a new week if the current day is Saturday
if ((firstDayOfMonth + day) % 7 === 0) {
monthDiv.append(weekDiv);
weekDiv = $('<div class="week"></div>');
}
}
// Add the last week if it's not complete
if (weekDiv.children().length > 0) {
monthDiv.append(weekDiv);
}
calendarContainer.append(monthDiv);
startIndex = (startIndex + daysInMonth) % 3;
}
}
function restDayIndex(restDay) {
return restDay === "sunday" ? 0 : 3; // Sunday is 0, Wednesday is 3
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment