There is a risk with introducing your own HTML elements. The World Wide Web Consortium publishes the HTML standard that browsers implement. The custom elements API is available to do precisely what you did. According to the HTML5 spec, no new elements will be added with a hyphen in the name (see valid custom element names). The elements you defined shouldn't conflict with future HTML revisions because you prefixed the names with cal-.
You could also consider HTML data attributes as a means to embed application-specific information on standard HTML tags, which JavaScript can use. You can target these attributes in CSS files to provide additional styling. Microdata is another standard technique that allows you to provide additional semantic meaning to regular HTML elements. JavaScript can interact with this data, and CSS styles can target these elements.
Lastly, you can utilize the shadow DOM as a means to encapsulate components. In fact, the shadow DOM is used by modern browsers to implement interactive form fields like native date pickers.
Which one you choose is a matter of taste. If you need styling, behavior and markup combined into a single component, consider using the shadow DOM since this provides a natural way to encapsulate the component from the rest of the web page.
If defining your own elements is just a means to store data used by JavaScript, I would lean towards HTML data attributes. You can stuff JSON into them and use JSON.parse to turn it into an object in JavaScript. I've also used script tags with JSON as well. Not a standard way of doing it, but it also works:
<script type="text/json">
{
"foo": [ ... ]
}
</script>
There is no single right way to do this. You have a number of options available, so choose the one that is the best balance between the HTML standard and getting the job done. Just know that if you don't adhere to the HTML spec, you risk breaking the page if future updates to the standard conflict with your custom HTML.
