CodePen Embed - Untitled

    <div class="calendar-container">
        <div class="header">
            <button id="prev-month">&#10094;</button>
            <p id="month-year">Январь 2024</p>
            <button id="next-month">&#10095;</button>
        </div>
        <div class="days-grid">
            <div>Пн</div>
            <div>Вт</div>
            <div>Ср</div>
            <div>Чт</div>
            <div>Пт</div>
            <div>Сб</div>
            <div>Вс</div>
        </div>
        <div id="dates-grid" class="dates-grid"></div>
    </div>
    <div class="event-details">
        <div id="event-info"></div>
    </div>

@import url('https://fonts.cdnfonts.com/css/gilroy-bold');
@import url('https://fonts.cdnfonts.com/css/druk-wide-bold');


body {
    display: grid;
    place-items: center;
    justify-content: center;
    align-items: flex-start;
    margin: 0;
    gap: 20px;
    grid-template-columns: repeat(2, auto);
    @media (max-width: 768px) {
        grid-template-columns: repeat(1, auto);
    }
    background-color: #FFF;
}

.calendar-container {
    display: flex;
    color: #2D2D2D;
    font-family: 'Gilroy-Regular', sans-serif;
    flex-direction: column;
    align-items: center;
    background-color: #F9F9F9;
    padding: 20px;
    border-radius: 10px;
    margin-right: 50px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

#month-year {
    font-size: 18px;
}

.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-size: 20px;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

.dates-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 5px;
}

button{
    border: none;
    background: linear-gradient(156deg, #E30000 0%, #A01C12 100%);
    cursor: pointer;
    border-radius: 5px;
    color: white;
    width: 30px;
    height: 30px;
}

.dates-grid div {
    padding: 10px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.active-date {
    background: linear-gradient(156deg, #E30000 0%, #A01C12 100%);
    color: white;
}

.dates-grid div:hover {
    background-color: #ddd;
}

#event-info {
    display: flex;
    gap: 20px;
    @media (max-width: 768px) {
        display: grid;
    }
}

.event-card {
    background-color: #F9F9F9;
    width: 350px;
    display: grid;
    justify-content: center;
    padding: 15px;
    border-radius: 16px;
}

.event-card img {
    width: 338px;
    height: 209px;
    border-radius: 8px;
}

.event-card h4 {
    font-size: 24px;
    font-family: 'Gilroy-Medium', sans-serif;
    margin: 5px 0 0 0;
    color: #2D2D2D;
}

.event-card p {
    font-size: 15px;
    margin: 5px 0;
    color: #2D2D2D;
    font-family: 'Gilroy-Regular', sans-serif;
    width: 307px;
}

.overlay{
    position: absolute;
    padding: 11px;
}

.event-overlay{
    background: #2D2D2D;
    border-radius: 33px;
    padding: 7px 15px;
    text-align: center;
    display: table;
}

.event-overlay h4{
    font-size: 12px;
    text-transform: uppercase;
    vertical-align: middle;
    display: table-cell;

    color: #fff;
}

.event-overlay-text{
    font-family: 'Druk Wide Bold', sans-serif !important;
    text-transform: uppercase;
    width: 164px;
    font-size: 16px;

}

const eventDict = {
    "2024-01-31": [
        {
            title: "Innoboost Incubator",
            color: "#2D2D2D",
            image: "https://media.mostbi.com/Calendar/image%2022.png",
            dateRange: "31 января - 28 марта",
            description: "Соревнования для стартапов от идеи до запуска прототипа всего за 3 дня, которое поддерживается международной стартап-площадкой Tech Stars."
        },
    ],
    "2024-02-02": [
        {
            title: "Saudi Arabian Invest Day",
            color: "#2D2D2D",
            image: "https://media.mostbi.com/Calendar/image%2022.png",
            dateRange: "2 февраля",
            description: "Соревнования для стартапов от идеи до запуска прототипа всего за 3 дня, которое поддерживается международной стартап-площадкой Tech Stars."
        },
    ],
    "2024-02-03": [
        {
            title: "Digital Almaty",
            color: "#F9F9F9",
            image: "https://media.mostbi.com/Calendar/Digital%20Almaty.png",
            dateRange: "3 февраля",
            description: "Диалоговая площадка цифровой повестки, новых стратегий, трансформации и трендов в сфере новейших цифровых технологий"
        },
    ],
    "2024-02-05": [
        {
            title: "IRA 5",
            color: "#F9F9F9",
            image: "https://media.mostbi.com/Calendar/Digital%20Almaty.png",
            dateRange: "5 февраля - 5 апреля",
            description: "Соревнования для стартапов от идеи до запуска прототипа всего за 3 дня, которое поддерживается международной стартап-площадкой Tech Stars."
        },
        {
            title: "IRA",
            color: "#F9F9F9",
            image: "https://media.mostbi.com/Calendar/Digital%20Almaty.png",
            dateRange: "5 февраля - 5 апреля",
            description: "Соревнования для стартапов от идеи до запуска прототипа всего за 3 дня, которое поддерживается международной стартап-площадкой Tech Stars."
        },
    ],
    "2024-09-25": [
        {
            title: "IRA 7",
            color: "#2D2D2D",
            image: "https://media.mostbi.com/Calendar/white.png",
            dateRange: "25 сентября - 25 ноября",
            description: "Соревнования для стартапов от идеи до запуска прототипа всего за 3 дня, которое поддерживается международной стартап-площадкой Tech Stars."
        },
        {
            title: "IRA",
            color: "#2D2D2D",
            image: "https://media.mostbi.com/Calendar/IRA.png",
            dateRange: "25 сентября - 25 ноября",
            description: "Соревнования для стартапов от идеи до запуска прототипа всего за 3 дня, которое поддерживается международной стартап-площадкой Tech Stars."
        },
    ],
};

const monthNames = ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь",
    "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"];

let currentMonth = 0; // Январь
let currentYear = 2024;

const datesGrid = document.getElementById('dates-grid');
const monthYearDisplay = document.getElementById('month-year');
const eventInfo = document.getElementById('event-info');

function renderCalendar(month, year) {
    datesGrid.innerHTML = '';
    monthYearDisplay.textContent = `${monthNames[month]} ${year}`;

    const firstDay = new Date(year, month).getDay();
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    const prevMonthDays = firstDay === 0 ? 6 : firstDay - 1;

    // Пустые дни для предыдущего месяца
    for (let i = 0; i < prevMonthDays; i++) {
        const emptyDiv = document.createElement('div');
        datesGrid.appendChild(emptyDiv);
    }

    // Заполнение календаря датами
    for (let day = 1; day <= daysInMonth; day++) {
        const dateDiv = document.createElement('div');
        dateDiv.textContent = day;

        // Форматирование даты для сопоставления с eventDict
        const fullDate = `${year}-${(month + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;

        if (eventDict[fullDate]) {
            dateDiv.classList.add('active-date');
        }

        dateDiv.addEventListener('click', () => showEvents(fullDate));
        datesGrid.appendChild(dateDiv);
    }
}

function showEvents(date) {
    eventInfo.innerHTML = ''; // Очищаем информацию о событиях

    if (eventDict[date]) {
        eventDict[date].forEach(event => {
            // Создаем контейнер для карточки события
            const eventCard = document.createElement('div');
            eventCard.classList.add('event-card');

            const eventOverlay = document.createElement('div');
            const eventImage = document.createElement('img');
            const eventTitle = document.createElement('h4');
            const eventDesc = document.createElement('p');

            eventOverlay.innerHTML = `<div class="overlay"><div class="event-overlay"><h4>${event.dateRange}</h4></div><h4 class="event-overlay-text" style="color: ${event.color}">${event.title}</h4></div>`;
            eventImage.src = event.image;
            eventTitle.textContent = event.title;
            eventDesc.textContent = event.description;

            // Добавляем элементы в карточку
            eventCard.appendChild(eventOverlay);
            eventCard.appendChild(eventImage);
            eventCard.appendChild(eventTitle);
            eventCard.appendChild(eventDesc);

            // Добавляем карточку в блок с событиями
            eventInfo.appendChild(eventCard);
        });
    } else {
        eventInfo.innerHTML = '';
    }
}

// Навигация по месяцам
document.getElementById('prev-month').addEventListener('click', () => {
    currentMonth = currentMonth === 0 ? 11 : currentMonth - 1;
    currentYear = currentMonth === 11 ? currentYear - 1 : currentYear;
    renderCalendar(currentMonth, currentYear);
});

document.getElementById('next-month').addEventListener('click', () => {
    currentMonth = currentMonth === 11 ? 0 : currentMonth + 1;
    currentYear = currentMonth === 0 ? currentYear + 1 : currentYear;
    renderCalendar(currentMonth, currentYear);
});

// Получаем сегодняшнюю дату
const today = new Date();

// Функция для получения даты ближайшего предстоящего события
function getNextEventDate() {
    const eventDates = Object.keys(eventDict).map(dateStr => new Date(dateStr));
    const futureEventDates = eventDates.filter(date => date >= today);
    if (futureEventDates.length === 0) {
        // Если нет будущих событий, используем текущий месяц и год
        return {month: today.getMonth(), year: today.getFullYear(), date: null};
    }
    // Сортируем будущие даты
    futureEventDates.sort((a, b) => a - b);
    const nextEventDate = futureEventDates[0];
    return {month: nextEventDate.getMonth(), year: nextEventDate.getFullYear(), date: nextEventDate};
}

// Обновляем currentMonth и currentYear на месяц и год ближайшего события
const nextEvent = getNextEventDate();
currentMonth = nextEvent.month;
currentYear = nextEvent.year;

// Инициализируем календарь на месяц ближайшего события
renderCalendar(currentMonth, currentYear);

// Отображаем информацию о ближайшем событии
if (nextEvent.date) {
    const dateStr = nextEvent.date.toISOString().split('T')[0]; // Получаем дату в формате YYYY-MM-DD
    showEvents(dateStr);
}

This Pen is owned by Diyar on CodePen.

See more by @dyde690 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.