I want to be able to cross out the days from 2023-07-25 to 2023-07-30 I have read the docs but can't seem to make anything work. I tried using events but I can't add any type of classes to the text components there self to give a text-decoration of a line- through. Is there a way to get those elements and apply that style to them. My goal is to make a booking calendar and I will be happy for any suggestions of a different calendar library besides Full Calender that you prefer using.
function showDates(selectedDates) {
var element = document.getElementsByClassName("dates-selected")[0];
var text = "From " + selectedDates[0] + " To " + selectedDates[1];
element.textContent = text;
}
function clearshowDates(selectedDates) {
var element = document.getElementsByClassName("dates-selected")[0];
element.textContent = "";
}
document.addEventListener("DOMContentLoaded", function() {
var calendarEl = document.getElementById("calendar");
var selectedDates = [];
var bookedDates = ["2023-07-25", "2023-07-30"];
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: "dayGridMonth",
events: [{
start: "2023-07-25",
end: "2023-07-27",
display: "background",
}, ],
dateClick: function(info) {
var clickedDate = info.dateStr;
var todayDate = moment().format("YYYY-MM-DD");
console.log(todayDate);
if (clickedDate >= todayDate) {
if (selectedDates.length === 0) {
// First click: Select the start date
selectedDates.push(clickedDate);
} else if (selectedDates.length === 1) {
// Second click: Check if the clicked date is different from the start date
if (clickedDate < selectedDates[0]) {
selectedDates.unshift(clickedDate); // Insert the clicked date as the new start date
} else {
selectedDates.push(clickedDate); // Append the clicked date as the end date
}
showDates(selectedDates);
var currentDate = selectedDates[1];
var dateObject = new Date(currentDate);
dateObject.setDate(dateObject.getDate() + 1);
var formattedDate = dateObject.toISOString().split("T")[0];
console.log(formattedDate);
console.log(selectedDates);
calendar.addEvent({
start: selectedDates[0],
end: formattedDate,
display: "background",
});
} else if (clickedDate >= todayDate) {
// Third click or same date clicked again: Clear the selected dates and add the new date as a new day
selectedDates = [clickedDate];
clearshowDates();
// Remove previous events
calendar.getEvents().forEach(function(event) {
event.remove();
});
// Display the new selected date as a background event (new single day)
}
calendar.addEvent({
start: clickedDate,
display: "background",
});
}
},
});
calendar.render();
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<link rel="stylesheet" href="cal.css" />
</head>
<body>
<div class="wrap">
<div id="calendar"></div>
</div>
<div class="dates-selected"></div>
</body>
<script src="cal.js"></script>
</html>
You can add
text-decoration: line-throughto the proper dated element, for example[data-date="2023-07-19"].Or better yet, prepare a css class
bookedthat will hold the styling for a booked date. Then you can add or remove this class to the proper dates using javascript.