Custom Calendar-Only Having one day available to select

I would look at flatpickr. This is very flexible, and I think it can be set up to do what you are looking for,

Please try the following:

To make it work, you to add this code below in the Look & Feel > General > Header > Source View:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

This makes sure you can access and use flatpickr from your questions.

In the question, you then need to add this code in the onReady function in the JS of a Text Entry question:

Use the below code in the text entry question JavaScript.

Qualtrics.SurveyEngine.addOnReady(function()
{
    jQuery("#"+this.questionId+" .InputText").flatpickr({
    dateFormat: "Y-m-d H:i",
    minDate: new Date(),
    enable: ["2023-05-06", "2023-05-13", "2023-05-20", new Date(2023, 5, 6) ]        
    });
});

You will have to specify all the dates you want to be enabled, but at least it works :)

What does it mean if there is no source view?

It is there 😀

Look for the <> icon. 

When you see the text in source mode, then you are viewing the HTML version of the page

When I add javascript, I see the source mode. What is the next step from there?

You should just add the two line above in the header. The Javascript should go in the Javascript part of the Text Entry question.

Thanks! It worked.

How do I go about only having Saturdays or Sundays as options and only having a certain amount of Saturdays and Sundays being available to be selected?

Did you copy the code above? Then you should see only 2 days to be able to be selected.

If you look at this code:

Qualtrics.SurveyEngine.addOnReady(function()
{
    jQuery("#"+this.questionId+" .InputText").flatpickr({
    dateFormat: "Y-m-d H:i",
    minDate: new Date(),
    enable: ["2023-05-06", "2023-05-13", "2023-05-20", new Date(2023, 5, 6) ]        
    });
});

The bold part is the dates, so you will need to define the full range of dates you wish to be available in that format.

Is there a way to make it every Saturday without having to list them all?

I found this:

function getAllSaturdays(year) {
  const saturdays = [];
  const date = new Date(year, 0, 1); // January 1st of the given year
  while (date.getFullYear() === year) {
    if (date.getDay() === 6) { // Saturday is day number 6 (0 is Sunday)
      const dateString = date.toISOString().slice(0, 10); // Format the date as "YYYY-MM-DD"
      saturdays.push(dateString);
    }
    date.setDate(date.getDate() + 1); // Move to the next day
  }
  return saturdays;
}

const allSaturdays2023 = getAllSaturdays(2023);
 

I put this in the JS and it didn’t work. The date picker did not come up when clicking into the text box

Did you just add it like above, because that won't work.

Do you understand the code at all?

I got it. Thanks

Thank you! This works for me