@uplink-protocol/calendar-controller
Version:
Flexible calendar API supporting both calendar and date-picker integrations for any JavaScript framework or library
383 lines (333 loc) • 14.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Picker - Disabled Weekdays Example</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
.example-section {
margin-bottom: 40px;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 6px;
background-color: #fafafa;
}
.example-section h2 {
color: #555;
margin-bottom: 15px;
border-bottom: 2px solid #007acc;
padding-bottom: 5px;
}
.date-picker-container {
margin: 20px 0;
}
.controls {
margin: 20px 0;
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.controls button {
padding: 8px 16px;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
cursor: pointer;
transition: background-color 0.2s;
}
.controls button:hover {
background-color: #f0f0f0;
}
.controls button.active {
background-color: #007acc;
color: white;
border-color: #007acc;
}
.checkbox-group {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin: 10px 0;
}
.checkbox-item {
display: flex;
align-items: center;
gap: 5px;
}
.checkbox-item input {
margin: 0;
}
.info-box {
background-color: #e7f3ff;
border: 1px solid #b3d9ff;
border-radius: 4px;
padding: 15px;
margin: 15px 0;
}
.code-example {
background-color: #f8f8f8;
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
font-family: 'Courier New', monospace;
font-size: 14px;
overflow-x: auto;
margin: 15px 0;
}
.selected-date {
font-weight: bold;
color: #007acc;
margin: 10px 0;
padding: 10px;
background-color: #f0f8ff;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<h1>Date Picker - Disabled Weekdays Examples</h1>
<!-- Example 1: Weekend Disabled -->
<div class="example-section">
<h2>Example 1: Disable Weekends</h2>
<div class="info-box">
<strong>Use Case:</strong> Business applications where only weekdays are selectable.
<br><strong>Disabled Days:</strong> Saturday (6) and Sunday (0)
</div>
<div class="date-picker-container">
<input type="text" id="weekday-picker" placeholder="Select a weekday..." readonly>
</div>
<div class="selected-date" id="weekday-result">No date selected</div>
<div class="code-example">
const calendar = CalendarController('#weekday-picker', {
disabledDaysOfWeek: [0, 6] // Disable Sunday and Saturday
});
</div>
</div>
<!-- Example 2: Custom Business Days -->
<div class="example-section">
<h2>Example 2: Custom Business Schedule</h2>
<div class="info-box">
<strong>Use Case:</strong> Businesses that are closed on specific days (e.g., Monday and Wednesday).
<br><strong>Disabled Days:</strong> Monday (1) and Wednesday (3)
</div>
<div class="date-picker-container">
<input type="text" id="business-picker" placeholder="Select available business day..." readonly>
</div>
<div class="selected-date" id="business-result">No date selected</div>
<div class="code-example">
const calendar = CalendarController('#business-picker', {
disabledDaysOfWeek: [1, 3] // Disable Monday and Wednesday
});
</div>
</div>
<!-- Example 3: Interactive Controls -->
<div class="example-section">
<h2>Example 3: Dynamic Day Management</h2>
<div class="info-box">
<strong>Use Case:</strong> Administrative interface where disabled days can be configured dynamically.
</div>
<div class="checkbox-group">
<div class="checkbox-item">
<input type="checkbox" id="day-0" value="0">
<label for="day-0">Sunday</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="day-1" value="1">
<label for="day-1">Monday</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="day-2" value="2">
<label for="day-2">Tuesday</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="day-3" value="3">
<label for="day-3">Wednesday</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="day-4" value="4">
<label for="day-4">Thursday</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="day-5" value="5">
<label for="day-5">Friday</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="day-6" value="6">
<label for="day-6">Saturday</label>
</div>
</div>
<div class="controls">
<button onclick="applyDisabledDays()">Apply Disabled Days</button>
<button onclick="clearDisabledDays()">Clear All</button>
<button onclick="presetWeekends()">Preset: Weekends</button>
<button onclick="presetWeekdays()">Preset: Weekdays</button>
</div>
<div class="date-picker-container">
<input type="text" id="dynamic-picker" placeholder="Select a date..." readonly>
</div>
<div class="selected-date" id="dynamic-result">No date selected</div>
<div class="selected-date" id="disabled-days-display">Currently disabled days: None</div>
<div class="code-example">
// Set disabled days programmatically
calendar.setDisabledDaysOfWeek([0, 6]);
// Add a single day
calendar.addDisabledDayOfWeek(1);
// Remove a single day
calendar.removeDisabledDayOfWeek(0);
// Get current disabled days
const disabledDays = calendar.getDisabledDaysOfWeek();
</div>
</div>
<!-- Example 4: Combined with Date Constraints -->
<div class="example-section">
<h2>Example 4: Combined Constraints</h2>
<div class="info-box">
<strong>Use Case:</strong> Appointment booking system with both date range limits and disabled weekdays.
<br><strong>Features:</strong> Date range (next 30 days), weekends disabled, plus specific blocked dates
</div>
<div class="date-picker-container">
<input type="text" id="combined-picker" placeholder="Select appointment date..." readonly>
</div>
<div class="selected-date" id="combined-result">No date selected</div>
<div class="code-example">
const today = new Date();
const maxDate = new Date();
maxDate.setDate(today.getDate() + 30);
const calendar = CalendarController('#combined-picker', {
minDate: today,
maxDate: maxDate,
disabledDaysOfWeek: [0, 6], // Weekends
disabledDates: [
// Block specific holidays or maintenance days
new Date(2025, 11, 25), // Christmas
new Date(2025, 0, 1) // New Year
]
});
</div>
</div>
</div>
<script type="module">
import { CalendarController } from '../../dist/index.js';
// Initialize calendars for examples
let weekdayCalendar, businessCalendar, dynamicCalendar, combinedCalendar;
// Make functions globally accessible
window.applyDisabledDays = function () {
const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
const disabledDays = Array.from(checkboxes).map(cb => parseInt(cb.value));
dynamicCalendar.setDisabledDaysOfWeek(disabledDays);
updateDisabledDaysDisplay();
};
window.clearDisabledDays = function () {
document.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
dynamicCalendar.setDisabledDaysOfWeek([]);
updateDisabledDaysDisplay();
};
window.presetWeekends = function () {
document.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
document.getElementById('day-0').checked = true; // Sunday
document.getElementById('day-6').checked = true; // Saturday
window.applyDisabledDays();
};
window.presetWeekdays = function () {
document.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
[1, 2, 3, 4, 5].forEach(day => {
document.getElementById('day-' + day).checked = true;
});
window.applyDisabledDays();
};
function updateDisabledDaysDisplay() {
const disabledDays = dynamicCalendar.getDisabledDaysOfWeek();
const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const disabledDayNames = disabledDays.map(day => dayNames[day]);
const displayText = disabledDayNames.length > 0
? 'Currently disabled days: ' + disabledDayNames.join(', ')
: 'Currently disabled days: None';
document.getElementById('disabled-days-display').textContent = displayText;
}
document.addEventListener('DOMContentLoaded', function () {
// Example 1: Weekday only
weekdayCalendar = CalendarController('#weekday-picker', {
disabledDaysOfWeek: [0, 6],
onDateSelect: function (date) {
document.getElementById('weekday-result').textContent =
'Selected: ' + date.toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});
}
});
// Example 2: Custom business days
businessCalendar = CalendarController('#business-picker', {
disabledDaysOfWeek: [1, 3],
onDateSelect: function (date) {
document.getElementById('business-result').textContent =
'Selected: ' + date.toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});
}
});
// Example 3: Dynamic calendar
dynamicCalendar = CalendarController('#dynamic-picker', {
disabledDaysOfWeek: [],
onDateSelect: function (date) {
document.getElementById('dynamic-result').textContent =
'Selected: ' + date.toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});
}
});
// Example 4: Combined constraints
const today = new Date();
const maxDate = new Date();
maxDate.setDate(today.getDate() + 30);
combinedCalendar = CalendarController('#combined-picker', {
minDate: today,
maxDate: maxDate,
disabledDaysOfWeek: [0, 6],
disabledDates: [
new Date(2025, 11, 25), // Christmas
new Date(2025, 0, 1) // New Year
],
onDateSelect: function (date) {
document.getElementById('combined-result').textContent =
'Selected: ' + date.toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});
}
});
updateDisabledDaysDisplay();
});
</script>
</body>
</html>