AaronNGray · August 14, 2024 15:17
diff --git a/schedule.html b/schedule.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meeting Schedule</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.38/moment-timezone-with-data.min.js"></script>
    <style>
        /* Add some basic styling */
        body {
            font-family: Arial, sans-serif;
        }
        select {
            margin: 10px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 10px 0;
        }
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
    </style>
 </head>
 <body>
    <h1>Meeting Schedule</h1>
    <p id="next-tuesday-date"></p>
    <label for="timezone-select">Select Timezone:</label>
    <select id="timezone-select">
        <!-- Options will be populated by JavaScript -->
    </select>
    <div id="schedule">
        <table>
            <tbody>
                <!-- Schedule rows will be inserted here by JavaScript -->
            </tbody>
        </table>
    </div>

    <!-- Schedule Data Script -->
    <script id="schedule-data" type="application/json">
    {
        "scheduleTimezone": "America/Los_Angeles",
        "schedule": [
            { "start": "2024-08-01T07:00:00", "end": "2024-08-01T09:00:00", "topic": "Morning Food Healers Session" },
            { "start": "2024-08-01T09:00:00", "end": "2024-08-01T11:00:00", "topic": "Cooling the Planet with SRM" },
            { "start": "2024-08-01T11:00:00", "end": "2024-08-01T13:00:00", "topic": "Collective Super Intelligence" },
            { "start": "2024-08-01T13:30:00", "end": "2024-08-01T15:30:00", "topic": "Dear Umair" },
            { "start": "2024-08-01T15:30:00", "end": "2024-08-01T17:30:00", "topic": "Dharmendra's Accelerated Collective Evolution" },
            { "start": "2024-08-01T19:00:00", "end": "2024-08-01T21:00:00", "topic": "Food Healers Evening Session" },
            { "start": "2024-08-01T19:00:00", "end": "2024-08-01T21:00:00", "topic": "Open Session" }
        ]
    }
    </script>


    <!-- JavaScript Code -->
    <script>
        // Function to calculate and display the date of the next Tuesday
        function displayNextTuesdayDate() {
            const today = moment();
            const nextTuesday = today.clone().day(2); // Set to next Tuesday
            if (today.day() > 2) {
                nextTuesday.add(1, 'weeks'); // Move to the next week if today is past Tuesday
            }
            document.getElementById('next-tuesday-date').textContent = `Next Tuesday's Date: ${nextTuesday.format('YYYY-MM-DD')}`;
        }

        // Load locations data from the script element
        const locationsData = moment.tz.names();

        // Populate the timezone select dropdown
        const timezoneSelect = document.getElementById('timezone-select');
        locationsData.forEach(location => {
            const option = document.createElement('option');
            option.value = location;
            option.textContent = location;
            timezoneSelect.appendChild(option);
        });

        // Set default timezone to user's local timezone
        const userTimezone = moment.tz.guess();
        timezoneSelect.value = userTimezone;

        // Load schedule data from the script element
        const scheduleDataScript = document.getElementById('schedule-data');
        const scheduleData = JSON.parse(scheduleDataScript.textContent);

        const scheduleTimezone = scheduleData.scheduleTimezone;
        const schedule = scheduleData.schedule;

        moment.tz.setDefault(scheduleTimezone);

        function updateSchedule() {
            const timezone = document.getElementById('timezone-select').value;
            const scheduleContainer = document.querySelector('#schedule tbody');
            scheduleContainer.innerHTML = ''; // Clear previous schedule

            // Update table rows with new schedule
            schedule.forEach(event => {
                const startTime = moment(event.start).tz(timezoneSelect.value);
                const endTime = moment(event.end).tz(timezoneSelect.value);

                console.log(startTime, endTime)

                // Format times with short timezone abbreviation
                const formattedStart = startTime.format('HH:mm:ss');
                const formattedEnd = endTime.format('HH:mm:ss');
                const formattedZone = startTime.format('z')
                const timeRange = `${formattedStart} - ${formattedEnd} ${formattedZone}`;

                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${timeRange}</td>
                    <td>${event.topic}</td>
                `;
                scheduleContainer.appendChild(row);
            });
        }

        // Attach event listener to the timezone select dropdown
        timezoneSelect.addEventListener('change', updateSchedule);

        // Initial schedule display and next Tuesday date
        displayNextTuesdayDate();
        updateSchedule();
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Meeting Schedule</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.38/moment-timezone-with-data.min.js"></script>
	<style>
	/* Add some basic styling */
	body {
	font-family: Arial, sans-serif;
	}
	select {
	margin: 10px;
	}
	table {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0;
	}
	td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: left;
	}
	</style>
	</head>
	<body>
	<h1>Meeting Schedule</h1>
	<p id="next-tuesday-date"></p>
	<label for="timezone-select">Select Timezone:</label>
	<select id="timezone-select">
	<!-- Options will be populated by JavaScript -->
	</select>
	<div id="schedule">
	<table>
	<tbody>
	<!-- Schedule rows will be inserted here by JavaScript -->
	</tbody>
	</table>
	</div>

	<!-- Schedule Data Script -->
	<script id="schedule-data" type="application/json">
	{
	"scheduleTimezone": "America/Los_Angeles",
	"schedule": [
	{ "start": "2024-08-01T07:00:00", "end": "2024-08-01T09:00:00", "topic": "Morning Food Healers Session" },
	{ "start": "2024-08-01T09:00:00", "end": "2024-08-01T11:00:00", "topic": "Cooling the Planet with SRM" },
	{ "start": "2024-08-01T11:00:00", "end": "2024-08-01T13:00:00", "topic": "Collective Super Intelligence" },
	{ "start": "2024-08-01T13:30:00", "end": "2024-08-01T15:30:00", "topic": "Dear Umair" },
	{ "start": "2024-08-01T15:30:00", "end": "2024-08-01T17:30:00", "topic": "Dharmendra's Accelerated Collective Evolution" },
	{ "start": "2024-08-01T19:00:00", "end": "2024-08-01T21:00:00", "topic": "Food Healers Evening Session" },
	{ "start": "2024-08-01T19:00:00", "end": "2024-08-01T21:00:00", "topic": "Open Session" }
	]
	}
	</script>


	<!-- JavaScript Code -->
	<script>
	// Function to calculate and display the date of the next Tuesday
	function displayNextTuesdayDate() {
	const today = moment();
	const nextTuesday = today.clone().day(2); // Set to next Tuesday
	if (today.day() > 2) {
	nextTuesday.add(1, 'weeks'); // Move to the next week if today is past Tuesday
	}
	document.getElementById('next-tuesday-date').textContent = `Next Tuesday's Date: ${nextTuesday.format('YYYY-MM-DD')}`;
	}

	// Load locations data from the script element
	const locationsData = moment.tz.names();

	// Populate the timezone select dropdown
	const timezoneSelect = document.getElementById('timezone-select');
	locationsData.forEach(location => {
	const option = document.createElement('option');
	option.value = location;
	option.textContent = location;
	timezoneSelect.appendChild(option);
	});

	// Set default timezone to user's local timezone
	const userTimezone = moment.tz.guess();
	timezoneSelect.value = userTimezone;

	// Load schedule data from the script element
	const scheduleDataScript = document.getElementById('schedule-data');
	const scheduleData = JSON.parse(scheduleDataScript.textContent);

	const scheduleTimezone = scheduleData.scheduleTimezone;
	const schedule = scheduleData.schedule;

	moment.tz.setDefault(scheduleTimezone);

	function updateSchedule() {
	const timezone = document.getElementById('timezone-select').value;
	const scheduleContainer = document.querySelector('#schedule tbody');
	scheduleContainer.innerHTML = ''; // Clear previous schedule

	// Update table rows with new schedule
	schedule.forEach(event => {
	const startTime = moment(event.start).tz(timezoneSelect.value);
	const endTime = moment(event.end).tz(timezoneSelect.value);

	console.log(startTime, endTime)

	// Format times with short timezone abbreviation
	const formattedStart = startTime.format('HH:mm:ss');
	const formattedEnd = endTime.format('HH:mm:ss');
	const formattedZone = startTime.format('z')
	const timeRange = `${formattedStart} - ${formattedEnd} ${formattedZone}`;

	const row = document.createElement('tr');
	row.innerHTML = `
	<td>${timeRange}</td>
	<td>${event.topic}</td>
	`;
	scheduleContainer.appendChild(row);
	});
	}

	// Attach event listener to the timezone select dropdown
	timezoneSelect.addEventListener('change', updateSchedule);

	// Initial schedule display and next Tuesday date
	displayNextTuesdayDate();
	updateSchedule();
	</script>
	</body>
	</html>