Calendar Meteor Integration

Getting Started with Smart Elements library and Meteor Framework

This document provides a compelte guide on how to build and use the Smart library with the Meteor Framework.


  • Node.js
  • Chocolatey
  • IDE (e.g. Visual Studio )

Setup development environment

  1. Open the Command prompt/Terminal as Administrator and run the following command line to install the meteor framework:

    on Windows:

    choco install meteor

    on Linux:

    curl | sh
  2. Run the following command in order to create a new blank project under smart-meteor.
    meteor create smart-meteor

  3. Navigate to the created project location smart-meteor and install the required dependencies from the command prompt/terminal.
    meteor npm install

Configure a Smart element in the new application

  1. Install the @smarthtmlelements/smart-elements npm package in the application folder using the following colland line
    meteor npm install @smarthtmlelements/smart-elements

    The Calendar will be used as the getting started element for the new appplication.

  2. Open the application in your IDE ( Visual Studio ) and add the element inside the body in ~/client/main.html file in order to render the Calendar element:
      <h1>Welcome to Meteor!</h1>
      <h2>Smart Calendar</h2>
  3. Import the Smart HTML Elements Javascript and Styles. Element properties can be applied inside the the Meteor.startup. Methods can be invoked during window.onload
    import './main.html';
    //Import Smart HTMLElements
    import '@smarthtmlelements/smart-elements/source/styles/smart.default.css';
    import '@smarthtmlelements/smart-elements/source/modules/smart.calendar.js';
    Meteor.startup(() => {
      window.onload = function() {
        //Calendar is ready for methods invocations
  4. Run the Meteor application with the following command

    The Calendar element will be rendered in the browser.

Fonts and Images

If the fonts are not displayed create a new folder at the root of the meteor project called public and copy-paste the font and image folders from the @smarthtmlelements/smart-elements/source/styles NPM package downloaded inside the node_modules folder.