Content Calendar
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem;
}
main {
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh - 60px); /* Adjust as needed */
}
#calendar {
max-width: 600px;
border: 1px solid #ccc;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
document.addEventListener("DOMContentLoaded", function () {
const calendarContainer = document.getElementById("calendar");
// Sample data for demonstration purposes
const contentData = [
{ date: "2023-08-10", content: "Blog post 1" },
{ date: "2023-08-15", content: "Blog post 2" },
{ date: "2023-08-20", content: "Blog post 3" },
];
// Function to generate the content calendar
function generateContentCalendar(data) {
const calendar = document.createElement("div");
calendar.classList.add("content-calendar");
const currentDate = new Date();
const currentMonth = currentDate.getMonth();
const currentYear = currentDate.getFullYear();
for (let i = 0; i < 12; i++) {
const monthContainer = document.createElement("div");
monthContainer.classList.add("month-container");
const monthName = document.createElement("h2");
monthName.textContent = new Date(currentYear, currentMonth + i, 1).toLocaleDateString("en-US", {
month: "long",
year: "numeric",
});
monthContainer.appendChild(monthName);
const monthDays = document.createElement("ul");
monthDays.classList.add("month-days");
for (let day = 1; day <= 31; day++) {
const date = new Date(currentYear, currentMonth + i, day);
const dateStr = date.toISOString().slice(0, 10);
const dayItem = document.createElement("li");
dayItem.textContent = day;
// Check if there is content for the current date
const contentItem = data.find((item) => item.date === dateStr);
if (contentItem) {
const contentPopup = document.createElement("div");
contentPopup.classList.add("content-popup");
contentPopup.textContent = contentItem.content;
dayItem.appendChild(contentPopup);
}
monthDays.appendChild(dayItem);
}
monthContainer.appendChild(monthDays);
calendar.appendChild(monthContainer);
}
calendarContainer.appendChild(calendar);
}
generateContentCalendar(contentData);
});
Documentation
Step 1:- Open txt file from the folder for code
Step 2:- Copy all code
Step 3:- Open your website dashboard or blog
Step 4:- Add HTML element
Step 5:- Paste all code in your html element
Step 6:- Save file
Done you are successfully Pasted code in your website.
0 Comments