Dynamic Time Selection: The code uses the Flatpickr library to create date and time picker instances. The time selection is dynamic, with options rounded to the nearest 15 minutes. This ensures precision in scheduling and avoids unnecessary granularity in time selection.
Default and Minimum Date: The options include a default date set to the current date and a minimum date of ‘today,’ preventing users from selecting past dates.
Locale Settings: The locale settings ensure consistency in date representation, such as starting the week on Monday. This enhances user experience and aligns with common calendar conventions.
Schedule Options: The code provides predefined schedule options like ‘now,’ ’15 minutes,’ ‘1 hour,’ and specific days and times. This feature streamlines the scheduling process by offering commonly used timeframes.
Next Occurrence Calculation: The function
calculateNextDaycalculates the next occurrence of a specified day, considering the current date and time. This is especially useful for setting up recurring meetings on specific weekdays.Event Handling: The code includes event handling for changes in schedule selection and meeting length. This ensures that the end date and time are automatically adjusted based on user inputs.
URL Parameter Handling: If URL parameters are present, the code triggers a change event, allowing for pre-filled values or actions based on external inputs. This can be useful for integrating the scheduling functionality with other parts of a web application.
1. First of all add these files to your page.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
2. Rounding off the Current Time
// Round off the time to the nearest 15 minutes
var date = moment();
var roundedTime = moment(date).add(15 - (date.minutes() % 15), 'minutes').startOf('minute');
3. Setting Comman Options for Flatpickr Calendar
// Options to customize your calendar
var commonOptions = {
defaultDate: roundedTime.toDate(),
minDate: 'today',
position: 'auto right',
disableMobile: true,
enableTime: true,
time_24hr: true,
minuteIncrement: 15,
dateFormat: 'Y-m-d H:i:S',
locale: {
firstDayOfWeek: 1 // start week on Monday
}
};
4. Initializing the Start and End Date Calendars
// Create your meeting calendar with Elementor
var start_date = flatpickr('#form-field-starting_date_time', commonOptions);
var end_date = flatpickr('#form-field-ending_date_time', commonOptions);
5. Calculating the "Selected Day" Occurence
// Function for Calculating the next occurrence of the specified day.
function calculateNextDay(dayName) {
var today = moment(); // Get the current date and time
var nextDay = today.clone().isoWeekday(dayName).startOf('day');
// If the next occurrence is today or later in the week, set the time and return
if (nextDay.isSameOrAfter(today)) {
return nextDay.format('YYYY-MM-DD') + ' ' + roundedTime.format('HH:mm:ss');
}
// Move to the next week and set the time
nextDay.add(1, 'week').isoWeekday(dayName); // move to the next occurrence in the next week
nextDay.startOf('day').add(roundedTime.hours(), 'hours').add(roundedTime.minutes(), 'minutes');
return nextDay.format('YYYY-MM-DD') + ' ' + roundedTime.format('HH:mm:ss');
}
6. Defining and Calculating Meeting Time options using Moment.js
// Simple options for choosing meeting times
var scheduleOptions = {
'now': roundedTime.toDate(),
'15': roundedTime.toDate(),
'1h': moment(roundedTime).add(1, 'hours').toDate(),
'10amt': moment().add(1, 'days').hours(10).startOf('hour').toDate(),
'mon': calculateNextDay('Monday'),
'tue': calculateNextDay('Tuesday'),
'wed': calculateNextDay('Wednesday'),
'thu': calculateNextDay('Thursday'),
'fri': calculateNextDay('Friday'),
'sat': calculateNextDay('Saturday'),
'sun': calculateNextDay('Sunday')
};
7. Your Calendar, Your Rules
// Your calendar responds to your choices
jQuery('#form-field-schedule').on('change', function () {
var selectedValue = jQuery(this).val();
var newDate = scheduleOptions[selectedValue];
start_date.setDate(newDate);
calculateAndSetEndDate();
});
// Changing the End Date and Time depending on the Meeting Length.
jQuery('#form-field-meeting_length').on('change', function () {
calculateAndSetEndDate();
});
8. Update the Meeting Options with URL parameters / query strings.
// Triggers change event manually if URL parameters exist.
if (document.location.search.length) {
jQuery('#form-field-schedule, #form-field-meeting_length').trigger('change');
}
