A calendar question that allows multiple date selections up to X number of dates?

Hi there, are you trying to collect 6 different dates using a question that displays a calendar to the respondent?
If so, you can do this by importing the "Enter a Date:" Text Entry question from the Qualtrics library 6 times. This question has HTML/JS in place that will display an inline calendar to the respondent, like in the below:

You might also make use of Flatpickr, which is useful for many date/time related things. In this post there is a QSF file you can import if you want to try it out.

https://community.qualtrics.com/XMcommunity/discussion/comment/48390#Comment_48390Hi Tom, really appreciate your chiming in. I tried to read through that thread you linked and I did indeed get a calendar question, but it's not working as I intend. The calendar looks really bad (it's not intuitive), and I'd like the calendar to allow people to select up to 6 dates if they desire, within the same calendar question.
Here's a screen recording: https://share.getcloudapp.com/kpu80nnR
Do you have any suggestions please? Thank you very much!

Also @Tom_1842, would there be a way within any of these calendar questions to prevent people from selecting certain dates?
(e.g. we only want them to be able to select from weekdays in September and October 2022)

Hi helena888 , I think I would go with Flatpickr again here but use their "inline" display and also their "multiple" mode selection. This will always display the calendar to the respondent and allow for multiple date selections. Setting a minDate of September 1 and a maxDate of October 31 should work well too.
The other 2 specifications of only selecting 6 dates and only selecting weekdays sort of compete with each other from what I can tell in that they would both utilize Flatpickr's "disable" option. In the attached QSF, I provide 2 inline Flatpickr calendar options.
The first 1 disables the selection of weekends. I also included the below regex as custom validation so that the respondent can only proceed if the Text Entry question include 0-5 commas (1 to 6 dates). If you go with this one, I'd recommend tweaking the error message that respondents see if they select more than 6 dates.
/^([^,]*,){0,5}[^,]*$/
The second option disables the selection of further dates once 6 have been selected. I found the code here.
Flatpickr_InlineMultipleSelectLimit.qsf

https://community.qualtrics.com/XMcommunity/discussion/comment/48429#Comment_48429Hi Tom, thanks for the QSF! I imported it (and saw you also included the RegEx custom validation, so thank you :) ) -- but it looks like both of those questions don't actually show up as an inline calendar. I tested both by previewing the survey and with an anonymous link; here's a screen recording:
https://share.getcloudapp.com/Koujg7x5
I'm not sure how to get it to show up as a calendar, can you help please?

Hmmm, your screen recording is a little blurry, but it could be that you don't have the Flatpickr JS in the Header of the survey. Below are the steps to put the 2 options I mentioned in place. In the Look & Feel of the survey in the General tab, place the below code in the Header section:



Then, with a Text Entry question set to Single Line in your survey, add the below JavaScript to the Onload section.
Option 1: Inline calendar, multiple selection, no weekend selection, needs regex validation:
jQuery("#"+this.questionId+" .InputText").flatpickr({
    minDate: "2022-09-01",
    maxDate: "2022-10-31",
inline: "true",
    mode: "multiple",
    disable: [
        function(date) {
            // return true to disable
            return (date.getDay() === 0 || date.getDay() === 6);
        }
    ],
    "locale": {
        "firstDayOfWeek": 1 // start week on Monday
    }
});

Option 2: Inline calendar, multiple selection, no more selection after 6.
jQuery("#"+this.questionId+" .InputText").flatpickr({
    minDate: "2022-09-01",
    maxDate: "2022-10-31",
    inline: "true",
    mode: "multiple",
onChange: function(selectedDates, dateStr, instance) {
        var selectedDatesStr = selectedDates.reduce(function(acc, ele) {
            var str = instance.formatDate(ele, "d/m/Y");
            acc = (acc == '') ? str : acc + ';' + str;
            return acc;
        }, '');
        instance.set('enable', [function(date) {
            if (selectedDates.length >= 6) {
                var currDateStr = instance.formatDate(date, "d/m/Y")
                var x = selectedDatesStr.indexOf(currDateStr);
                return x != -1;
            } else {
                return true;
            }
        }]);
    }
});

https://community.qualtrics.com/XMcommunity/discussion/comment/48465#Comment_48465A little late response but thank you SO much Tom! Your guidance was super super helpful and I appreciate it.

Hi,

I am attempting to do the same where the user may see the Calendar View and be able to select certain number of days. I first build as shown in the attached document.  I am able to type in multiple dates and greater than 6 and I am not able to see the Calendar view.

The second time I changed JS in question to Option 2 and removed the  syntax from Header since it is already been used for header Title of survey.   I am still able to type in multiple dates and greater than 6 and I am not able to see the Calendar view.

I am a beginner in queries.

I would appreciate your assistance.

Let me know if you need additinal information.