Default to Current Date in Date Selector

You can use custom JavaScript to open the current date automatically in a portal Scheduler display. This can help staff or visitors see today's available appointment times without first selecting today's date on the calendar.

This pattern applies to portals that use a Scheduler widget and a Static Content block as the display target for available timeslots.

📝 Note

This approach uses custom JavaScript and targets rendered page markup. Test it in a non-production portal first, and review it after portal, Scheduler, or theme changes.

   

       

⭐ Get Inspired

   

   

This article was adapted from a post by Technolutions staff in the Slate Community Forums' Get Inspired space. Have a great idea for a Get Inspired post? Let us know!

Before you begin

• Create or identify the portal view that displays Scheduler availability.

• Add a Static Content block that serves as the Scheduler widget's display target for available timeslots.

• Confirm that the Scheduler widget correctly displays available dates and times before adding custom JavaScript.

Find the date picker identifier

1. Open the portal page that contains the Scheduler widget in a browser.

2. Right-click the calendar date picker and select Inspect.

3. Find the rendered element ID that begins with portal_datepicker_.

4. Copy the full ID. You will add it to the script in the next section.

Add the script to the portal content

1. Go to Database → Portals.

2. Select the portal and view that contains the Scheduler widget.

3. Open the Static Content block that displays the available timeslots.

4. Select Source.

5. Add the script below, replacing portal_datepicker_5b05dc4b-fa76-45fc-943c-5a07d6ee974c with the ID from your portal.

<script type="text/javascript">
$(document).ready(function() {
  var delay = 1000;

  setTimeout(function() {
    $('#portal_datepicker_5b05dc4b-fa76-45fc-943c-5a07d6ee974c a.ui-state-default.ui-state-active').click();
  }, delay);
});
</script>

Test the portal

1. Open the portal in an incognito or private browser window.

2. Confirm that today's available timeslots appear without manually selecting today's date.

3. Test the page on desktop and mobile widths.

4. If the timeslots do not appear, increase the delay slightly and confirm that the date picker ID still matches the rendered page.

💡 Tip

If the Scheduler widget is rebuilt or moved, inspect the rendered portal again. The date picker identifier can change when the widget is recreated.

📖 Display Availability in a Portal

📖 Portal Widgets