index.html

<!DOCTYPE html>
<html lang="de">
	<head>
		<!-- jsCalendar style -->
        <link rel="stylesheet" type="text/css" href="../js-calendar/jsCalendar.css">
        <!-- jsCalendar script -->
        <script type="text/javascript" src="../js-calendar/jsCalendar.js"></script>
        <!-- jsCalendar language script -->
        <script type="text/javascript" src="../js-calendar/jsCalendar.lang.de.js"></script>
        <!-- auto jsCalendar element -->
        <style>
            /*set the date with events to yellow*/
            .date-active {
                background-color: #FFE31B!important;
                color: black!important;
                cursor: pointer!important;
            }
            /*unset the current color*/
            .jsCalendar-current {
                background-color: transparent!important;
                color: black!important;
            }
            .modal {
                position: absolute;
                transform: translate3d(0, 5%, 0);
                box-shadow: 0px 0px 8px #00000029;
                background: none;
            }
            .modal:after {
                content: "";
                width: 20px;
                height: 20px;
                transform: rotate(-45deg);
                background: #fff;
                position: absolute;
                box-shadow: 0px 0px 8px #00000029;
                z-index: -1;
                top: -5px;
                left: 8px;
            }
            .modal-content {
                text-decoration: none;
            }
            .modal-content a:nth-child(even) {
                background-color: #F7F8F8;
            }
            .modal-content > a {
                background-color: #fff;
                display: grid;
                padding: 0 0.5rem 0 0.5rem;
                line-height: 24px;
                grid-template-areas:
                "p p p s"
            }
            .modal-content p {
                grid-area: p;
                display: grid;
                justify-items: start;
            }
            .modal-content span {
                content: '';
                font-size: 3px;
                width: 4em;
                height: 4em;
                margin-top: 2em;
                margin-top: auto;
                margin-bottom: auto;
                border-top: 1px solid #697982;
                border-left: 1px solid #697982;
                transform: rotate(135deg);
            }
            .hidden {
                display: none;
            }
        </style>
	</head>
	<body>
        <!-- Calendar element -->
        <div id="events-calendar">
        </div>
		<script type="text/javascript">
			// Get elements
			let elements = {
				// Calendar element
				calendar : document.getElementById("events-calendar"),
			}
            //calendar settings
			elements.calendar.className = "clean-theme yellow";
			let calendar = jsCalendar.new(elements.calendar, "12/09/2023", {
                navigator : true,
                navigatorPosition : "center",
                zeroFill : false,
                monthFormat : "month YYYY",
                firstDayOfTheWeek : "2",
                dayFormat : "DD",
                language : "de"
            });
			let date_format = "DD/MM/YYYY";
            //events which then come from evo
            let events = [
                {
                    id: "0",
                    date : "14/09/2023",
                    title: "Prima La Musica - Preisträgerkonzert",
                    time: "15:00",
                    location: "Konzerthaus Klagenfurt",
                    link: "https://www.google.com"
                },
                {
                    id: "1",
                    date : "14/09/2023",
                    title: "Vorspielstunde Klavier",
                    time: "17:30",
                    location: "Musikschule Winklern",
                    link: "https://www.google.com"
                },
                {
                    id: "2",
                    date : "16/09/2023",
                    title: "Vorspielstunde Harfe",
                    time: "17:30",
                    location: "Musikschule Flattach",
                    link: "https://www.google.com"
                },
                {
                    id: "3",
                    date : "16/09/2023",
                    title: "Vorspielstunde Blockflöte",
                    time: "14:00",
                    location: "Musikschule Flattach",
                    link: "https://www.google.com"
                },
                {
                    id: "4",
                    date : "18/09/2023",
                    title: "Vorspielstunde Harfe",
                    time: "17:30",
                    location: "Musikschule Flattach",
                    link: "https://www.google.com"
                },
                {
                    id: "5",
                    date : "18/01/2024",
                    title: "Vorspielstunde Harfe",
                    time: "17:30",
                    location: "Musikschule Flattach",
                    link: "https://www.google.com"
                }
            ]

            calendar.onDateRender(function(date, element, info) {
                //get the current date and check if there is an event
                currDate = jsCalendar.tools.dateToString(new Date(date.getTime()), date_format, "de");
                let foundEvent = events.filter(event => event.date == currDate);
                if (foundEvent.length != 0) {
                    //set the class if there is a event for this date
                    element.className = 'date-active';
                    //make div with class modal and hidden
                    const modalDiv = document.createElement("div");
                    modalDiv.classList.add('modal', 'hidden');
                    modalDiv.setAttribute('data-modalid', currDate);
                    const modalContent = document.createElement("div");
                    modalContent.classList.add('modal-content');
                    //go through each event and add span with id and title
                    foundEvent.forEach(function(item, index) {
                        modalContent.insertAdjacentHTML('beforeend', `
                            <a href='${item.link}' target='blank'>
                                <p>
                                    <b>${item.title}</b>
                                    ${item.time}: ${item.location}
                                </p>
                                <span></span>
                            </a>
                            
                        `);
                    });
                    modalDiv.appendChild(modalContent);
                    element.appendChild(modalDiv);
                }      
            });
            // Refresh layout
            calendar.refresh();
            //show/hide event popup    
			let showEvents = function(date, element){
                currDate = jsCalendar.tools.dateToString(new Date(date.getTime()), date_format, "de");
                let showDate = events.filter(event => event.date == currDate);
                //get from the id backwards the parent element modal
                let modalDiv = document.querySelector('[data-modalid = "'+currDate+'"]');
                //toggle hidden class
                if (showDate) {
                    modalDiv.classList.toggle("hidden");
                }  
            };
			// Add events
			calendar.onDateClick(function(event, date){
                // Show events
                showEvents(date);         
			});    
        </script>
	</body>
</html>