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.