Skip to content

Instantly share code, notes, and snippets.

@jshmllr

jshmllr/index.html

Last active September 20, 2024 13:46
Show Gist options
  • Save jshmllr/f6cb301103f470df15f2582cef44742c to your computer and use it in GitHub Desktop.
Save jshmllr/f6cb301103f470df15f2582cef44742c to your computer and use it in GitHub Desktop.
Download ZIP
Prism Calendar View Settings - 2
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar View Settings</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Calendar View Settings</h1>
<form id="calendar-view-settings">
<div class="form-group">
<label for="weeks-start">Weeks Start On</label>
<select id="weeks-start">
<option>Sunday</option>
<option>Monday</option>
</select>
</div>
<div class="form-group">
<label for="theme">Theme</label>
<select id="theme">
<option>Prism Classic</option>
<option>Dark Mode</option>
<option>Light Mode</option>
</select>
</div>
<div class="form-group">
<label for="coloring">Coloring</label>
<select id="coloring">
<option>Stages</option>
<option>Artists</option>
<option>Genres</option>
</select>
</div>
<h2>Event Display Settings</h2>
<div class="form-group">
<label for="primary-text">Primary Text</label>
<select id="primary-text">
<option>Event Name</option>
<option>Artist Name</option>
<option>Venue Name</option>
</select>
</div>
<div class="form-group">
<label for="secondary-text">Secondary Text</label>
<select id="secondary-text">
<option>None</option>
<option>Time</option>
<option>Date</option>
</select>
</div>
<div class="form-group-flex">
<label for="headliner-badges">Include Headliner Badges</label>
<input type="checkbox" id="headliner-badges">
</div>
<h2>Holiday Subscriptions</h2>
<button type="button" id="add-holiday-btn">Add Holiday Subscription</button>
<ul id="holiday-list">
<li class="holiday-subscription">
<span>Holidays in United States</span>
<input type="color" value="#ff0000" class="color-picker">
<button type="button" class="delete-btn">Delete</button>
</li>
<!-- Additional subscribed holiday calendars will appear here -->
</ul>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
document.addEventListener('DOMContentLoaded', () => {
const addHolidayBtn = document.getElementById('add-holiday-btn');
const holidayList = document.getElementById('holiday-list');
addHolidayBtn.onclick = function() {
const newHolidayInput = document.createElement('div');
newHolidayInput.className = 'holiday-input-group';
newHolidayInput.innerHTML = `
<select class="search-dropdown">
<option value="holidays_in_us">Holidays in United States</option>
<option value="holidays_in_ca">Holidays in Canada</option>
<option value="custom">Custom</option>
</select>
<input type="text" class="custom-url" placeholder="Enter Google Calendar URL">
`;
// Append the new input to the holiday list
holidayList.appendChild(newHolidayInput);
// Attach onchange event to handle custom URL input visibility
const dropdown = newHolidayInput.querySelector('.search-dropdown');
const customUrlInput = newHolidayInput.querySelector('.custom-url');
dropdown.onchange = function() {
if (dropdown.value === 'custom') {
customUrlInput.style.display = 'block';
} else {
customUrlInput.style.display = 'none';
}
}
}
});
document.addEventListener('DOMContentLoaded', () => {
const addHolidayBtn = document.getElementById('add-holiday-btn');
const holidayList = document.getElementById('holiday-list');
addHolidayBtn.onclick = function() {
const newHolidayInput = document.createElement('li');
newHolidayInput.className = 'holiday-subscription';
newHolidayInput.innerHTML = `
<select class="search-dropdown">
<option value="holidays_in_us">Holidays in United States</option>
<option value="holidays_in_ca">Holidays in Canada</option>
<option value="custom">Custom</option>
</select>
<input type="text" class="custom-url" placeholder="Enter Google Calendar URL">
<input type="color" class="color-picker" value="#0000ff">
<button type="button" class="delete-btn">Delete</button>
`;
// Append the new input to the holiday list
holidayList.appendChild(newHolidayInput);
// Attach onchange event to handle custom URL input visibility
const dropdown = newHolidayInput.querySelector('.search-dropdown');
const customUrlInput = newHolidayInput.querySelector('.custom-url');
dropdown.onchange = function() {
if (dropdown.value === 'custom') {
customUrlInput.style.display = 'block';
} else {
customUrlInput.style.display = 'none';
}
}
// Attach click event for delete button
const deleteBtn = newHolidayInput.querySelector('.delete-btn');
deleteBtn.onclick = function() {
holidayList.removeChild(newHolidayInput);
}
};
// Attach click event for existing delete buttons
holidayList.querySelectorAll('.delete-btn').forEach(btn => {
btn.onclick = function() {
holidayList.removeChild(btn.closest('.holiday-subscription'));
}
});
});
Raw
style.css
/* Styles for the container and form */
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #f7f7f7;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1, h2 {
text-align: center;
}
.form-group, .form-group-flex {
display: flex;
flex-direction: column;
margin-bottom: 15px;
}
.form-group-flex {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
label {
margin-bottom: 5px;
}
input[type="text"], select, input[type="checkbox"], .holiday-input {
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#holiday-list {
list-style-type: none;
padding: 0;
}
#holiday-list li {
background-color: #e9e9e9;
padding: 10px;
margin-bottom: 5px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
}
.holiday-input-group {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}
.search-dropdown {
flex: 1;
margin-right: 10px;
}
.custom-url {
flex: 1;
display: none;
}
.color-picker {
margin-left: 10px;
margin-right: 10px;
}
.delete-btn {
background-color: #f44336;
padding: 5px 10px;
border: none;
border-radius: 4px;
color: white;
cursor: pointer;
}
.delete-btn:hover {
background-color: #e53935;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment