Giter Club home page Giter Club logo

Comments (1)

jarreeali avatar jarreeali commented on June 4, 2024

Hi,
I have managed to fix this issue via custom js code.

To disable previous month you can use this following code

` const months = document.querySelectorAll('.calendar-months .month');
const activeMonth = document.querySelector('.calendar-months .active-month');
const activeMonthIndex = Array.from(months).indexOf(activeMonth);

      for (let i = 0; i < activeMonthIndex; i++) {
        months[i].style.pointerEvents = 'none';
         months[i].style.opacity = '0.5';
      } `
      
      and for disabling the previous date and always keep them disabled even when user change the months from left sidebar use following code 
      
      `     
    function disablePreviousDays() {
        var activeDayFound = false;
        var currentDate = new Date(); // Get the current date
        var currentMonth = currentDate.getMonth();

        $('.calendar-day').each(function() {
            var monthVal = $(this).find('.day').data('date-val').split('/')[0];
            var dayVal = $(this).find('.day').data('date-val').split('/')[1];
            var monthIndex = parseInt(monthVal, 10) - 1;

            if (activeDayFound || monthIndex > currentMonth) {
                // Enable dates of current and future months
                $(this).removeClass('disabled');
            } else if (monthIndex === currentMonth) {
                if (parseInt(dayVal, 10) >= currentDate.getDate()) {
                    // Enable dates of the current month from today onwards
                    $(this).removeClass('disabled');
                    activeDayFound = true;
                } else {
                    // Disable previous dates of the current month
                    $(this).addClass('disabled');
                }
            } else {
                // Disable dates of previous months
                $(this).addClass('disabled');
            }
        });
    }

    // Call the function initially
    disablePreviousDays();

    // Bind the change event for the active month
    $('.calendar-months .month').on('click', function() {
        // Remove 'active-month' class from all months
        $('.calendar-months .month').removeClass('active-month');
        // Add 'active-month' class to the clicked month
        $(this).addClass('active-month');
        
        // Call the function to disable previous days
        disablePreviousDays();
    });`
    
    Css 
    `td.calendar-day.disabled {
opacity: 0.5;
pointer-events: none;

}
.calendar-sidebar > .calendar-year {

text-align: left !important;

}`

from evo-calendar.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.