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.

Prerequisities

  • 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 https://install.meteor.com/ | 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:
    <head>
      <title>smart-meteor</title>
    </head>
    
    <body>
      <h1>Welcome to Meteor!</h1>
      <h2>Smart Calendar</h2>
      <smart-calendar></smart-calendar>
    </body>
    
  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
        document.querySelector('smart-calendar').clearSelection();
      }
    })
    
  4. Run the Meteor application with the following command
    meteor
    

    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.