index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Calendar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
    <link rel="icon" type="image/png" href="images/favicon.png">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/skeleton.css">
    <link rel="stylesheet" href="css/calendar.css">
    <script src="js/calendar.js"></script>
    <script>
        document.addEventListener('calendarClicked', e => console.log(e.detail));
    </script>
</head>

<body>
    <div class="container">
        <calendar month="1" day="25" year="1971"></calendar>
        <calendar></calendar>
        <calendar year="2018"></calendar>
    </div>
</body>

</html>