A web component to show calendar dates on your website.
To use the component on your website, first copy the calendar-date.js file onto your website.
Add references to this file in the <head> tag of the page on which you want to use the component:
<script src="calendar-date.js" defer></script>Create a new <template> tag on your web page and add the following code:
<template id="calendar-styles">
<style>
.date-container {
border: 1px solid red;
display: inline-block;
max-width: 100%;
min-width: 75px;
text-align: center;
border-radius: 5px;
}
.date-month {
padding: 5px;
color: white;
background-color: red;
}
.date-day {
font-size: 2rem;
font-weight: bold;
padding: 5px;
}
</style>
</template>Adjust the styles as necessary.
Then, add the <calendar-date> component to your website:
<calendar-date month="March" day="31"></calendar-date>The component will appear on your website.
This project is licensed under a Creative Commons Zero license.