Comments (1)
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)
- Uncaught TypeError: Cannot read properties of null (reading 'find') HOT 1
- EvoCalendar can not be destroy
- How to add events with time? HOT 4
- Event Header Wrong
- Monthly event list instead of day
- Feature Request - Is it possible to show weeks or 2 weeks range in calendar ?
- format.toValue and format.toDisplay undefined
- How to get current month? HOT 1
- How I can get all events for the month? HOT 1
- Fetch events from db? HOT 4
- Style issue with iPad tablets HOT 1
- change gregorian calendar to solar hijri calendar
- How can I make it so that the months can be switched by the scroll wheel?
- Pleaaaase Add Solar Calendar (Jalai Hijri) Too
- selectYear functionality not working HOT 2
- event title limit HOT 1
- add language Korean
- In safari, the title part works as NaN.
- Show all the events from the selected month HOT 1
- adding a czech language/translation HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from evo-calendar.