@uplink-protocol/calendar-controller
Version:
Flexible calendar API supporting both calendar and date-picker integrations for any JavaScript framework or library
125 lines (111 loc) • 5.88 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar Controller Method Validation</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.result { padding: 10px; margin: 5px 0; border-radius: 4px; }
.success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
.error { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
.info { background: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; }
pre { background: #f8f9fa; padding: 10px; border-radius: 4px; overflow-x: auto; }
</style>
</head>
<body>
<h1>Calendar Controller Method Validation</h1>
<div id="results"></div>
<script type="module">
import { CalendarController } from '../../dist/index.js';
const resultsDiv = document.getElementById('results');
function addResult(type, title, content) {
const div = document.createElement('div');
div.className = `result ${type}`;
div.innerHTML = `<strong>${title}</strong><br>${content}`;
resultsDiv.appendChild(div);
}
function addCodeResult(title, code, result) {
const div = document.createElement('div');
div.className = 'result info';
div.innerHTML = `
<strong>${title}</strong><br>
<pre><code>${code}</code></pre>
<strong>Result:</strong> <pre><code>${JSON.stringify(result, null, 2)}</code></pre>
`;
resultsDiv.appendChild(div);
}
try {
// Create calendar controller
const calendar = CalendarController({
initialSelectedDate: new Date(),
locale: 'en-US'
});
addResult('success', 'Calendar Created', 'Calendar controller created successfully');
// Test the method that was originally failing
if (calendar.methods && calendar.methods.getMonthNames) {
const monthNames = calendar.methods.getMonthNames();
addCodeResult('getMonthNames()', 'calendar.methods.getMonthNames()', monthNames);
} else {
addResult('error', 'getMonthNames Missing', 'calendar.methods.getMonthNames is not a function');
}
// Test a few other key methods
const methodTests = [
{ name: 'getWeekdayNames', code: 'calendar.methods.getWeekdayNames(true)', params: [true] },
{ name: 'getLocale', code: 'calendar.methods.getLocale()', params: [] },
{ name: 'formatDate', code: 'calendar.methods.formatDate(new Date())', params: [new Date()] },
{ name: 'isToday', code: 'calendar.methods.isToday(new Date())', params: [new Date()] },
{ name: 'getCurrentYearRange', code: 'calendar.methods.getCurrentYearRange()', params: [] },
{ name: 'generateCalendarDays', code: 'calendar.methods.generateCalendarDays()', params: [] }
];
methodTests.forEach(test => {
try {
if (calendar.methods && calendar.methods[test.name]) {
const result = calendar.methods[test.name](...test.params);
addCodeResult(test.name, test.code, result);
} else {
addResult('error', `${test.name} Missing`, `calendar.methods.${test.name} is not available`);
}
} catch (error) {
addResult('error', `${test.name} Error`, `${error.message}`);
}
});
// Test focus methods
try {
if (calendar.methods.focusDate && calendar.methods.moveFocusRight) {
calendar.methods.focusDate(new Date());
calendar.methods.moveFocusRight();
addResult('success', 'Focus Methods', 'focusDate() and moveFocusRight() work correctly');
} else {
addResult('error', 'Focus Methods Missing', 'Focus methods not available');
}
} catch (error) {
addResult('error', 'Focus Methods Error', error.message);
}
// Test accessibility methods
try {
if (calendar.methods.getAccessibleDateLabel && calendar.methods.getDateStateDescription) {
const label = calendar.methods.getAccessibleDateLabel(new Date());
const state = calendar.methods.getDateStateDescription(new Date());
addCodeResult('Accessibility Methods',
'getAccessibleDateLabel(new Date()) + getDateStateDescription(new Date())',
{ label, state });
} else {
addResult('error', 'Accessibility Methods Missing', 'Accessibility methods not available');
}
} catch (error) {
addResult('error', 'Accessibility Methods Error', error.message);
}
// List all available methods
if (calendar.methods) {
const methodNames = Object.keys(calendar.methods).sort();
addCodeResult('All Available Methods', 'Object.keys(calendar.methods)', methodNames);
addResult('info', 'Method Count', `Total methods available: ${methodNames.length}`);
}
} catch (error) {
addResult('error', 'Initialization Error', error.message);
console.error('Error:', error);
}
</script>
</body>
</html>