How to display fullcalendar within jquery steps?

Question

What is the appropriate way to display fullcalendar within jquery steps?

I've tried the following way but it doesn't work.

If I try to display in first step it loads fine but after that no. How to fix this issue?

Please, I really need help, I've spent hours on this. I can't understand what to do.

It just won't render on second step or more.

Could someone help figure this?

js

// Validate steps wizard

// Show form
var form = $(".steps-validation").show();

$(".steps-validation").steps({
    headerTag: "h6",
    bodyTag: "fieldset",
    transitionEffect: "fade",
    titleTemplate: '<span class="step">#index#</span> #title#',
    labels: {
        finish: 'Submit'
    },
    onStepChanging: function (event, currentIndex, newIndex)
    {
        
        // Always allow previous action even if the current form is not valid!
        if (currentIndex > newIndex)
        {
            return true;
        }
        
        if ( currentIndex == 0 ) {
           
                var today = new Date();
                document.getElementById("currentDate").innerHTML = moment(today).format('DD-MM-YYYY');
                  var calendarEl = document.getElementById("calendar");
                  var calendar = new FullCalendar.Calendar(calendarEl, {
                    headerToolbar: {
                      left: "prev",
                      center: "title",
                      right: "today next",
                    },
                    
                    selectable: true,
                    validRange: function(nowDate){
                    return {start: nowDate} //to prevent anterior dates
                    },
                    showNonCurrentDates: false,
                    dateClick: function(info) {
                        var chosenDate = info.dateStr;
                        document.getElementById("currentDate").innerHTML = moment(chosenDate).format('DD-MM-YYYY');
                        finalDate = chosenDate;
                        if ( document.getElementById("time-slots").style.display = "none") {
                           $("#time-slots").fadeIn();
                        }
                    }
                  });
                  calendar.render();
                
              
        }
        
        // Needed in some cases if the user went back (clean up)
        if (currentIndex < newIndex)
        {
            // To remove error styles
            form.find(".body:eq(" + newIndex + ") label.error").remove();
            form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
        }
        form.validate().settings.ignore = ":disabled,:hidden";
        return form.valid();
    },
    onFinishing: function (event, currentIndex)
    {
        form.validate().settings.ignore = ":disabled";
        return form.valid();
    },
    onFinished: function (event, currentIndex)
    {
        alert("Submitted!");
    }
});

// Initialize validation
$(".steps-validation").validate({
    ignore: 'input[type=hidden]', // ignore hidden fields
    errorClass: 'danger',
    successClass: 'success',
    highlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    },
    unhighlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    },
    errorPlacement: function(error, element) {
        error.insertAfter(element);
    },
    rules: {
        email: {
            email: true
        }
    }
});

Does this answer your question? [FullCalendar not displaying in second step of Jquery steps](https://stackoverflow.com/questions/74410887/fullcalendar-not-displaying-in-second-step-of-jquery-steps) — ADyson, Nov 14 '22 at 22:36
@ADyson what you suggested me to do, about rendering the right time in my previous post... I had already guessed it and put the updated code here, in this post as follows. But it still didn't work. That's why I made a new post. — , Nov 15 '22 at 13:02
Ok. That isn't clear at all from your description. You should really highlight what you've tried, instead of just dumping code with a fairly vague description. And "didn't work" is also a vague description and no use at all for us. What actually happens? What debugging have you done? Have you verified that the `if ( currentIndex == 0 ) {` is definitely entered and the `calendar.render()` function is executed? Are there any console errors? Do you see any fullcalendar-related HTML being created in the element inspector? Is there any visual change at all? Please narrow down the issue. — ADyson, Nov 15 '22 at 13:07
P.S. It's probably not a great idea to completely re-initialise the calendar every time the user moves to that step , since the user will lose any changes (e.g. changing to a different date range, or updates to events etc). Instead your code should aim to initialise the calendar once, but then render it again each time the step is shown. — ADyson, Nov 15 '22 at 13:09
Anyway, I haven't used jQuery steps but having read https://github.com/rstaib/jquery-steps/wiki/Settings#events I'd guess the issue is related to the fact that, as that documentation points out, `onStepChanging` fires **before** the step changes, in preparation for it. So I'd expect at that point the new step hasn't rendered yet and is likely still hidden. Try rendering the calendar inside `onStepChanged` instead. — ADyson, Nov 15 '22 at 13:16

How to display fullcalendar within jquery steps?

0 Answers0