Scheduler - HTML UI Elements for Mobile & Web Applications | www.HtmlElements.com

Overview

Smart.Scheduler is a type of grid element that displays a set of Events in Day, Week, Month, Agenda, Timeline Day, Timeline Week and Timeline Month views. The Scheduler's timeline displays the events for the selected viewing range according to their start/end time. Events can be edited at any time via the Scheduler window.

Getting Started

Getting Started with Scheduler Web Component

Smart UI for Web Components is distributed as smart-webcomponents NPM package. You can also get the full download from our website with all demos from the Download page.

Setup Smart.Scheduler

  1. Download and install the package.
    npm install smart-webcomponents
  2. Once installed, import the Scheduler module in your application.
    <script type="module" src="node_modules/smart-webcomponents/source/modules/smart.scheduler.js"></script>
  3. Adding a CSS reference for the Smart components styles.
    <link rel="stylesheet" type="text/css" href="node_modules/smart-webcomponents/source/styles/smart.default.css" />
  4. Add the Scheduler tag to your Web Page
    <smart-scheduler id="scheduler"></smart-scheduler>
  5. Initialize the Scheduler Component
    <script type="module">
    const today = new Date(),
        currentYear = today.getFullYear(),
        currentMonth = today.getMonth(),
        data = [
            {
                label: 'Event 1',
                dateStart: new Date(currentYear, currentMonth, 10),
                dateEnd: new Date(currentYear, currentMonth, 11)
            }, {
                label: 'Event 2',
                dateStart: new Date(currentYear, currentMonth, 11, 11, 30),
                dateEnd: new Date(currentYear, currentMonth, 11, 14, 15)
            }, {
                label: 'Event 3',
                dateStart: new Date(currentYear, currentMonth, 12, 13, 15),
                dateEnd: new Date(currentYear, currentMonth, 12, 16, 15)
            }
        ];
    
    window.Smart('#scheduler', class {
        get properties() {
            return {
                //Properties
                view: 'week',
                dataSource: data
            };
        }
    });
    </script>
    

    Another option is to create the Scheduler is by using the traditional Javascript way:

    const scheduler = document.createElement('smart-scheduler');
    const today = new Date(),
        currentYear = today.getFullYear(),
        currentMonth = today.getMonth(),
        data = [
            {
                label: 'Event 1',
                dateStart: new Date(currentYear, currentMonth, 10),
                dateEnd: new Date(currentYear, currentMonth, 11)
            }, {
                label: 'Event 2',
                dateStart: new Date(currentYear, currentMonth, 11, 11, 30),
                dateEnd: new Date(currentYear, currentMonth, 11, 14, 15)
            }, {
                label: 'Event 3',
                dateStart: new Date(currentYear, currentMonth, 12, 13, 15),
                dateEnd: new Date(currentYear, currentMonth, 12, 16, 15)
            }
        ];
    
    scheduler.view = 'week';
    scheduler.dataSource = data;
    
    document.body.appendChild(scheduler);
    

    Smart framework provides a way to dynamically create a web component on demand from a DIV tag which is used as a host. The following imports the web component's module and creates it on demand, when the document is ready. The #scheduler is the ID of a DIV tag.

    import "../../source/modules/smart.scheduler.js";
    
    document.readyState === 'complete' ? init() : window.onload = init;
    
    function init() { 
        const today = new Date(),
        currentYear = today.getFullYear(),
        currentMonth = today.getMonth(),
        data = [
            {
                label: 'Event 1',
                dateStart: new Date(currentYear, currentMonth, 10),
                dateEnd: new Date(currentYear, currentMonth, 11)
            }, {
                label: 'Event 2',
                dateStart: new Date(currentYear, currentMonth, 11, 11, 30),
                dateEnd: new Date(currentYear, currentMonth, 11, 14, 15)
            }, {
                label: 'Event 3',
                dateStart: new Date(currentYear, currentMonth, 12, 13, 15),
                dateEnd: new Date(currentYear, currentMonth, 12, 16, 15)
            }
        ];
    
    window.Smart('#scheduler', class {
        get properties() {
            return {
                //Properties
                view: 'week',
                dataSource: data
            };
        }
    });
    }
    
  6. Open the page in your web server.

Load Scripts

Another way of initializing the Scheduler element is by referencing all of the necessary components. The following code will initialize an empty Smart.Scheduler on the page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../source/styles/smart.default.css" />
<script type="text/javascript" src="../../source/smart.element.js" />
<script type="text/javascript" src="../../source/smart.button.js" />
<script type="text/javascript" src="../../source/smart.scrollbar.js" />
<script type="text/javascript" src="../../source/smart.data.js" />
<script type="text/javascript" src="../../source/smart.buttongroup.js" />
<script type="text/javascript" src="../../source/smart.radiobutton.js" />
<script type="text/javascript" src="../../source/smart.tooltip.js" />
<script type="text/javascript" src="../../source/smart.input.js" />
<script type="text/javascript" src="../../source/smart.multiinput.js" />
<script type="text/javascript" src="../../source/smart.checkinput.js" />
<script type="text/javascript" src="../../source/smart.numberinput.js" />
<script type="text/javascript" src="../../source/smart.timeinput.js" />
<script type="text/javascript" src="../../source/smart.colorinput.js" />
<script type="text/javascript" src="../../source/smart.date.js" />
<script type="text/javascript" src="../../source/smart.listbox.js" />
<script type="text/javascript" src="../../source/smart.dropdownlist.js" />
<script type="text/javascript" src="../../source/smart.calendar.js" />
<script type="text/javascript" src="../../source/smart.draw.js" />
<script type="text/javascript" src="../../source/smart.numeric.js" />
<script type="text/javascript" src="../../source/smart.math.js" />
<script type="text/javascript" src="../../source/smart.timepicker.js" />
<script type="text/javascript" src="../../source/smart.datetimepicker.js" />
<script type="text/javascript" src="../../source/smart.export.js" />
<script type="text/javascript" src="../../source/smart.window.js" />
<script type="text/javascript" src="../../source/smart.switchbutton.js" />
<script type="text/javascript" src="../../source/smart.toast.js" />
<script type="text/javascript" src="../../source/smart.checkbox.js" />
<script type="text/javascript" src="../../source/smart.scheduler.js" />
<script type="text/javascript" src="../../scripts/rrule.min.js" />
</head>
<body>
    <smart-scheduler id="scheduler"></smart-scheduler>
</body>
</html>

Note how smart.element.js is declared before everything else. This is mandatory for all custom elements.

DataSource

The dataSource property of the Smart.Scheduler allows to load an Array of Events. Each event is defined as an object with the following properties:

  • label - the label for the Event. The label should be of type 'string'.
  • dateStart - the starting date for the Event. The dateStart should be of type 'date' or 'string'.
  • dateEnd - the ending date for the Event. The end date must not be the same as the start. The dateEnd should be of type 'date' or 'string'.
  • description - the description of the Event. The description should be of type 'string'.
  • id - the unique id of the Event. The id value is applied to the DOM element that represents the event. The id should be of type 'string'.
  • class - the class of the Event. The class value is applied to the DOM element that represents the event. The class should be of type 'string'.
  • backgroundColor - a custom background color for the Event. Optional. The color should be defined as a HEX value. The backgroundColor should be ot type 'string'.
  • color - a custom color for the Event. Optional. The color should be defined as a HEX value. The color should be of type 'string'.
  • notifications - an array of objects that define the notifications for the Event. Notificaitons can appear on the same day as the event starts or before that.
    • interval - a numeric interval that indicates the number of days/weeks on which the notification will appear before the event start date.
    • type - the type of the interval. It can be 'days' or 'week'. By default it's days.
    • time - an array of numbers that indicate the hours and minutes of the date on which the notificaiton should appear.
  • allDay - a boolean property which indicates that the Event lasts all day and the Scheduler should ignore the time offset.
  • disableDrag - a boolean property that disables the abbility to drag an Event.
  • disableResize - a boolean property that disables the abbility to resize an Event.
  • repeat - a repeat object that defines the repeating settings for the Event. Optional. Repeating events have this property assigned. Here are it's attributes:
    • repeatFreq - a string that represents the repeat frequency for the event, e.g. 'daily', 'weekly', etc.
    • repeatInterval - a number that represents the repeat interval for the event.
    • repeatOn - depending on the repeatFreq the event can repeat on specific days or date. The repeatOn value can be an array of numbers which indidate the days of the week for 'weekly' repeating frequency, a number which indicates the date of the month for 'monthly' repeating frequency or a date which indicates the date of the year when repeat frequency is set to 'yearly'.
    • repeatEnd - the end condition for the repeating event. The event can end on a date or after a number of occurances. If not set the repeating event will never end.
    • exceptions - an array of objects that define the event date exceptions for the repeating event. An exception can contain a different start/end date but it's date property must be equal to an expected repeating date. Exceptions can have different backgroundColor and color. They can also be hidden via the hidden attribute.
  • These are the Event attributes that Smart.Sheduler uses. Any other attributes added to the Event objects will be preserved but not used by the element.

    Resources are assigned to the event object as key-value records. Where the key is the resource's value and value is the resource item id. Resources are described in depth in another topic on the website.

Here's an example of a Scheduler with three Events:

const today = new Date(),
    currentYear = today.getFullYear(),
    currentMonth = today.getMonth(),
    data = [
        {
            label: 'Event 1',
            dateStart: new Date(currentYear, currentMonth, 10),
            dateEnd: new Date(currentYear, currentMonth, 11)
        }, {
            label: 'Event 2',
            dateStart: new Date(currentYear, currentMonth, 11, 11, 30),
            dateEnd: new Date(currentYear, currentMonth, 11, 14, 15)
        }, {
            label: 'Event 3',
            dateStart: new Date(currentYear, currentMonth, 12, 13, 15),
            dateEnd: new Date(currentYear, currentMonth, 12, 16, 15)
        }
    ];

window.Smart('#scheduler', class {
    get properties() {
        return {
            //Properties
            view: 'week',
            dataSource: data
        };
    }
});

Demo

Scheduler

Resources

Smart.Scheduler resources can be used to assign Events to specific resources. They allow to specify the Events. Events can have one or many resources assigned to them.

Resources can have custom colors. The Scheduler can group events by one or more resources.

Resources property represents an Array of objects with the following properties:

  • label - a string that represents the label of the resource.
  • value - a string that represents the unique value of the resource by which it can be identified from the rest.
  • dataSource - an array that contains the items of the resource. Each item contains the following properties:
    • id - a number or string that acts as a unique identifier for the item.
    • label - a string that represents the label of the resource item.
    • backgroundColor - a string that represents the HEX representation of a color that will be used as the background color for the Events that have the resource item assigned.
    • color - a string that represents the HEX representation of a color that will be used as the color for the Events that have the resource item assigned.

Here's an example:

const today = new Date(),
    currentYear = today.getFullYear(),
    currentMonth = today.getMonth(),
    data = [
        {
            label: 'Event 1',
            dateStart: new Date(currentYear, currentMonth, 10),
            dateEnd: new Date(currentYear, currentMonth, 11),
            priorityId: 1
        }, {
            label: 'Event 2',
            dateStart: new Date(currentYear, currentMonth, 11, 11, 30),
            dateEnd: new Date(currentYear, currentMonth, 11, 14, 15),
            priorityId: 2
        }, {
            label: 'Event 3',
            dateStart: new Date(currentYear, currentMonth, 12, 13, 15),
            dateEnd: new Date(currentYear, currentMonth, 12, 16, 15),
            priorityId: 1
        }
    ];

const priorityData = [
    {
        label: 'Low Priority',
        id: 1,
        backgroundColor: '#1e90ff'
    }, {
        label: 'Medium Priority',
        id: 2,
        backgroundColor: '#ff9747'
    }
];

window.JQX('#scheduler', class {
    get properties() {
        return {
            //Properties
            view: 'week',
            dataSource: data,
            resources: [
                {
                    label: 'Priority',
                    value: 'priorityId',
                    dataSource: priorityData
                }
            ]
        };
    }
});

Here we have a single resource with identifier 'priorityId' that contains two priorities : 'low' and 'medium'. Each of them has individual color.

The resources items are assigned to the Events using their 'value' directly set to the Event objects where the 'key' is the resources value while the 'value' is the resource item id.

Demo

Scheduler Resources

Groups

Scheduler Events can be grouped by Resources. When groups property is set Events that do not have a resource assigned to them or the groups property does not include their resource will not be displayed.

The groups property accepts an array of strings which represent resource values.

Here's an example of grouping by a single resource that has two items.

window.JQX('#scheduler', class {
    get properties() {
        return {
            //Properties
            view: 'week',
            dataSource: data,
            resources: [
                {
                    label: 'Priority',
                    value: 'priorityId',
                    dataSource: priorityData
                }
            ],
            groups: ['priorityId']
        };
    }
});   

The timeline view of the Scheduler is separated into multiple sections for each group and the events are positioned according to their dates.

Demo

Scheduler Timeline

Smart.Scheduler is virtualized by default and does not have a limit on the groups, events or resources count.

Scheduler also allows to group events by Date in addition to Resources grouping. In order to group by date simply set the groupByDate property like so:

window.JQX('#scheduler', class {
    get properties() {
        return {
            //Properties
            view: 'week',
            dataSource: data,
            resources: [
                {
                    label: 'Priority',
                    value: 'priorityId',
                    dataSource: priorityData
                }
            ],
            groups: ['priorityId'],
            groupByDate: true
        };
    }
});  

Demo

Scheduler Grouping

The Events are grouped by date by separating each Date cell into the number of resource groups.

Event Editor

A Smart.Window component is available for Event editing inside the Scheduler. In order to open the editor the user simply has to double click on an event element or press the 'Enter' key when the event element is focused.

The window will appear in the middle of the Scheduler and will allow the user to modify all of the settings of the Event.

Creating new Events is also possible via the Window. When the user double clicks on a timeline cell or presses the 'Enter' key on focused cell the Event window editor will appear to create the new Event.

Here's an example:

Demo

Scheduler Window

The Scheduler window is modal so interaction with the Scheduler while the window is opened is disabled.

Event repeating options are avaialble when the "Repeat" switch button is on. The window will expand an additional panel with all repeating options allowing the user to create/customize the repeating series.

Scheduler Repeat

Clicking on the OK button will apply the editing changes to the event.

A 'confirm' window is the second type of window that can be opened inside the Smart.Scheduler. Confirm window appears when the user tries to edit a repeating event. This window prompts the user to select between editing the original repeating series or create a repeating exception from the target event. Repeating exceptions can have different start/end dates. They correspond to a specific repeating date of the original repeating series. Exceptions unlike other events cannot repeat but can be hidden via the edit window. This is useful in a scenario when, for example the user wants to create a repeating event for each day of the week but has to skip a day. Making the desired day as an exception and applying hidden will remove it form the repeating series. Repeating events and exceptions are covered in a separate topic.

Here's what the Confirm window looks like:

Scheduler Dialog

Time Zones

Smart.Scheduler allows to display additional Time zones at the same time thanks to the timeZones property which accepts an Array of strings which represent valid IANA timezone names. This allows the user to see the corresponding time for the events in multiple Time zones at once.

Here's an example of Smart.Scheduler with three Time zones visible:

const scheduler = document.querySelector('smart-scheduler');

scheduler.timeZones = [{ id: 'America/Chicago', label: 'US/Chicago' }, 'UTC'];

The default Time zone of the Smart.Scheduler is the local time zone. Setting the timeZones property displays additional time zones. In the example above the additional time zones include 'America/Chicago' and 'UTC'.

Here's what the Scheduler looks like:

Scheduler Time Zones

The default Smart.Scheduler Time zone can also be changed via the timeZone property. By default it does not have a label inside the timeline header.

Menus

Smart.Scheduler contains many popup menus with different actions. These menu's allow to the change the view/date or create/ edit an event. Here's a list of the menus that are used by the Scheduler:

  • Event Menu - appears when an event is clicked. It shows details about the event like start/end date and label. Also allows to quickly delete the event via a delete button. The delete button is available only on non-repeating events or exceptions.

    Scheduler Event Menu
  • Context Menu - appears when the user right clicks on a view cell or an event. The context menu allows to quickly create/delete and event.

    Scheduler Delete
  • Date Menu - appears when the user clicks on the Date Selector located inside the Header of the Smart.Scheduler. It allows to change the current view date.

    Scheduler Date Menu
  • View Menu - appears when the user clicks on the View Selector located inside the Header of the Smart.Scheduler. It allows to change the current view.

    Scheduler View Menu

All Scheduler menus are customizable.

Save/Load State

Smart.Scheduler utilizes the localStorage by allowing to save the current state of the events and load it again at a later point. This is usefull when the user is going to make changes to the events and wants to have a step by step history of the changes. Smart.Scheduler state represents an object that contains the current viewing date and a JSON Array of Events that were loaded to the Scheduler at the time it was saved.

The following methods are available for Smart.Scheduler state handling:

  • getState - returns an object containing the viewing date and a JSON Array of the Scheduler Events.
  • saveState - saves the current state of the Scheduler to localStorage. Requires an ID to be set to the element.
  • loadState - loads a previously saved state of the element. Accepts one argument - the state to load to. If no arguments are provided, localStorage lookup will be performed in order to find a previously saved state according to the id of the element. Requires an ID to be set to the element.
  • clearState - removes any stored state in localStorage of the element according to it's id. Requires an ID to be set to the element.
 const scheduler = document.querySelector('smart-scheduler');

//Saves the current state of the Scheduler to localStorage
scheduler.saveState();

//Reload the element to the previously saved state
scheduler.loadState();

//Clears the saved state
scheduler.clearState();

Keyboard Support

Smart.Scheduler implements the following key actions:

Key Action
Escape When dragging/resizing pressing the 'Escape' key will cancel the ongoing operation and return the target event to it's original state. The 'Escape' key can also close the Scheduler Windows and Menus if focused.
Tab Pressing Tab will change the focus to another focusable element. Smart.Scheduler has many focusable elements - the date,view selectors, the events inside the Timeline, the Timeline itself wihch allows to navigate through the cells, the Scheduler Window and it's editors, the Event/cell menu.
Arrow Up/Down/Left/Right When the Scheduler Timeline is focused these keys allow to navigate through the cells by selecting them.
Shift + Arrow Up/Down/Left/Right When the Scheduler Timeline is focused the Shift + Arrow combination allows to create a range selection of multiple cells in the direciton of the arrow pressed.
Shift + Mouse Left Click If a cell is selected, pressing Shift + Mouse Click on another cell allows to create a range selection from the initialy selected cell to the click target.
Enter Allows to open one of the Menus/Windows of the Smart.Scheduler. This can happen if an event or cell, or date/view selector is currently focused. If multiple cells are selected pressing Enter will open the Window to create a new event from the selection range.
Delete When an Event is focused this key allows to remove the Event form the Smart.Scheduler. The action can be canceled. Check the API of the element on the website for more details.
D The default shortcut key for the 'Day' view. When the view selector is focused, pressing this key will change the view to 'Day'. This shortcut can be customized. Check the API on the website for more details.
W The default shortcut key for the 'Week' view. When the view selector is focused, pressing this key will change the view to 'Week'. This shortcut can be customized. Check the API on the website for more details.
M The default shortcut key for the 'Month' view. When the view selector is focused, pressing this key will change the view to 'Month'. This shortcut can be customized. Check the API on the website for more details.
A The default shortcut key for the 'Agenda' view. When the view selector is focused, pressing this key will change the view to 'Agenda'. This shortcut can be customized. Check the API on the website for more details.
T + D The default shortcut key combination for the 'Timeline Day' view. When the view selector is focused, pressing this key combo will change the view to 'Timeline Day'. This shortcut can be customized. Check the API on the website for more details.
T + W The default shortcut key combination for the 'Timeline Week' view. When the view selector is focused, pressing this key combo will change the view to 'Timeline Week'. This shortcut can be customized. Check the API on the website for details.
T + W The default shortcut key combination for the 'Timeline Month' view. When the view selector is focused, pressing this key combo will change the view to 'Timeline Month'. This shortcut can be customized. Check the API on the website for details.

Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event

Create a new element:

const scheduler = document.createElement('smart-scheduler');

Append the element to the DOM:

document.body.appendChild(scheduler);

Remove the element from the DOM:

scheduler.parentNode.removeChild(scheduler);

Set a property:

scheduler.propertyName = propertyValue;

Get a property:

const propertyValue = scheduler.propertyName;

Invoke a method:

scheduler.methodName(argument1, argument2);

Add Event Listener:

const eventHandler = (event) => {
	// your code here.
};

scheduler.addEventListener(eventName, eventHandler);

Remove Event Listener:

scheduler.removeEventListener(eventName, eventHandler);

Using with TypeScript

Smart Web Components package includes TypeScript definitions which enables strongly-typed access to the Smart UI Components and their configuration.

Inside the download package, the typescript directory contains .d.ts file for each web component and a smart.elements.d.ts typescript definitions file for all web components. Copy the typescript definitions file to your project and in your TypeScript file add a reference to smart.elements.d.ts

Getting Started with Angular Scheduler Component

Setup Angular Environment

Angular provides the easiest way to set angular CLI projects using Angular CLI tool.

Install the CLI application globally to your machine.

npm install -g @angular/cli

Create a new Application

ng new smart-angular-scheduler

Navigate to the created project folder.

Setup the Scheduler

Smart UI for Angular is distributed as smart-webcomponents-angular NPM package

  1. Download and install the package.

    npm install smart-webcomponents-angular
  2. Once installed, import the SchedulerModule in your application root or feature module.

    app.module.ts
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    
    import { SchedulerModule } from 'smart-webcomponents-angular/scheduler';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
        declarations: [ AppComponent ],
        imports: [ BrowserModule, SchedulerModule ],
        bootstrap: [ AppComponent ],
    	entryComponents: [ AppComponent ]
    })
    
    export class AppModule { }
    
  3. Adding CSS reference.

    The following CSS file is available in ../node_modules/smart-webcomponents-angular/ package folder. This can be referenced in [src/styles.css] using following code.

    @import 'smart-webcomponents-angular/source/styles/smart.default.css';

    Another way to achieve the same is to edit the angular.json file and in the styles add the style.

    	"styles": [
    		"node_modules/smart-webcomponents-angular/source/styles/smart.default.css"
    	]
  4. Example.

    app.component.html
    <smart-scheduler #scheduler id="scheduler" [dataSource]="dataSource" [currentTimeIndicator]="currentTimeIndicator"
        [shadeUntilCurrentTime]="shadeUntilCurrentTime" [view]="view" [firstDayOfWeek]="firstDayOfWeek"></smart-scheduler>
    
    app.component.ts
    import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
    import { SchedulerComponent, SchedulerDataSource, SchedulerViews } from 'smart-webcomponents-angular/scheduler';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    
    export class AppComponent implements AfterViewInit, OnInit {
        @ViewChild('scheduler', { read: SchedulerComponent, static: false }) scheduler: SchedulerComponent;
    
        dataSource: SchedulerDataSource[] = this.getData();
    
        currentTimeIndicator: Boolean = true;
    
        shadeUntilCurrentTime: Boolean = true;
    
        view: String = 'day';
    
        views: SchedulerViews[] = ['day', 'week', 'month', 'timelineDay', 'timelineWeek', 'timelineMonth'];
    
        firstDayOfWeek: Number = 1;
    
        ngOnInit(): void {
            // onInit code.
        }
    
        ngAfterViewInit(): void {
            // afterViewInit code.
        }
    
        getData() {
            const today = new Date(),
                todayDate = today.getDate(),
                currentYear = today.getFullYear(),
                currentMonth = today.getMonth(),
                data = [
                    {
                        label: 'Google AdWords Strategy',
                        dateStart: new Date(currentYear, currentMonth, todayDate, 9, 0),
                        dateEnd: new Date(currentYear, currentMonth, todayDate, 10, 30),
                        backgroundColor: '#E67C73'
                    }, {
                        label: 'New Brochures',
                        dateStart: new Date(currentYear, currentMonth, todayDate - 1, 11, 30),
                        dateEnd: new Date(currentYear, currentMonth, todayDate - 1, 14, 15),
                        backgroundColor: '#8E24AA'
                    }, {
                        label: 'Brochure Design Review',
                        dateStart: new Date(currentYear, currentMonth, todayDate + 2, 13, 15),
                        dateEnd: new Date(currentYear, currentMonth, todayDate + 2, 16, 15),
                        backgroundColor: '#039BE5'
                    }
                ]
    
            return data
        }
    }
    

Running the Angular application

After completing the steps required to render a Scheduler, run the following command to display the output in your web browser

ng serve

Open localhost:4200 in your favorite web browser.

Read more about using Smart UI for Angular: https://www.htmlelements.com/docs/angular-cli/.

Getting Started with React Scheduler Component

Setup React Environment

The easiest way to start with React is to use create-react-app. To scaffold your project structure, follow the installation instructions.

Create React App:

npm install -g create-react-app
create-react-app my-app
cd my-app

Preparation

Open src/App.js andsrc/App.css

  1. Remove everything inside the App div tag in src/App.js:

    <div className="App"></div>
  2. Remove the logo.svg import.

  3. Remove the contents of src/App.css

  4. Remove src/logo.svg

Setup the Scheduler

Smart UI for React is distributed as smart-webcomponents-react NPM package

  1. Download and install the package.

    npm install smart-webcomponents-react

    Once installed, import the React Scheduler Component and CSS files in your application and render it:

    App.js
    import React from "react";
    import ReactDOM from "react-dom";
    import { Scheduler } from 'smart-webcomponents-react/scheduler';
    
    class App extends React.Component {
    	constructor(props) {
    		super(props);
    		this.scheduler = React.createRef();
    		
    		const today = new Date(),
    		todayDate = today.getDate(),
    		currentYear = today.getFullYear(),
    		currentMonth = today.getMonth();
    		
    		this.data = [{
    			label: 'Google AdWords Strategy',
    			dateStart: new Date(currentYear, currentMonth, todayDate, 9, 0),
    			dateEnd: new Date(currentYear, currentMonth, todayDate, 10, 30),
    			backgroundColor: '#E67C73'
    		}, {
    			label: 'New Brochures',
    			dateStart: new Date(currentYear, currentMonth, todayDate - 1, 11, 30),
    			dateEnd: new Date(currentYear, currentMonth, todayDate - 1, 14, 15),
    			backgroundColor: '#8E24AA'
    		}, {
    			label: 'Brochure Design Review',
    			dateStart: new Date(currentYear, currentMonth, todayDate + 2, 13, 15),
    			dateEnd: new Date(currentYear, currentMonth, todayDate + 2, 16, 15),
    			backgroundColor: '#039BE5'
    		}];
    	}
    	
     	currentTimeIndicator = true;
    	shadeUntilCurrentTime = true;
    	view = 'day';
    	views = ['day', 'week', 'month', 'timelineDay', 'timelineWeek', 'timelineMonth'];
    	firstDayOfWeek = 1;
    	
    	componentDidMount() {
    
    	}
    
    	render() {
    		return (
    			<div>
    			    <Scheduler 
    					view={this.view}
    					views={this.views}
    					currentTimeIndicator={this.currentTimeIndicator} 
    					shadeUntilCurrentTime={this.shadeUntilCurrentTime} 
    					dataSource={this.data} 
    					ref={this.scheduler}
    					firstDayOfWeek={this.firstDayOfWeek}>
    				</Scheduler>
    			</div>
    		);
    	}
    }
    
    ReactDOM.render(<App />, document.querySelector("#root"));
    
    export default App;
    

Running the React application

Start the app with

npm start

Open localhost:3000 in your favorite web browser to see the output.

Read more about using Smart UI for React: https://www.htmlelements.com/docs/react/.

Getting Started with Vue Scheduler Component

Setup Vue Environment

We will use vue-cli to get started. Let's install vue-cli

npm install -g @vue/cli

Then we can start creating our Vue.js projects with:

vue create my-project

Setup the Scheduler

Open the "my-project" folder and run:

npm install smart-webcomponents

Setup with Vue 3.x

Make Vue ignore custom elements defined outside of Vue (e.g., using the Web Components APIs). Otherwise, it will throw a warning about an Unknown custom element, assuming that you forgot to register a global component or misspelled a component name.

Open src/main.js in your favorite text editor and change its contents to the following:

main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.isCustomElement = tag => tag.startsWith('smart-');
app.mount('#app')

Open src/App.vue in your favorite text editor and change its contents to the following:

App.vue
<template>
  <div class="vue-root">
    <smart-scheduler id="scheduler"></smart-scheduler>
  </div>
</template>

<script>
import { onMounted } from "vue";
import "smart-webcomponents/source/styles/smart.default.css";
import "smart-webcomponents/source/modules/smart.scheduler.js";

export default {
  name: "app",
  setup() {
    onMounted(() => {
      const today = new Date(),
        todayDate = today.getDate(),
        currentYear = today.getFullYear(),
        currentMonth = today.getMonth(),
        data = [
          {
            label: "Google AdWords Strategy",
            dateStart: new Date(currentYear, currentMonth, todayDate, 9, 0),
            dateEnd: new Date(currentYear, currentMonth, todayDate, 10, 30),
            backgroundColor: "#E67C73",
          },
          {
            label: "New Brochures",
            dateStart: new Date(
              currentYear,
              currentMonth,
              todayDate - 1,
              11,
              30
            ),
            dateEnd: new Date(currentYear, currentMonth, todayDate - 1, 14, 15),
            backgroundColor: "#8E24AA",
          },
          {
            label: "Brochure Design Review",
            dateStart: new Date(
              currentYear,
              currentMonth,
              todayDate + 2,
              13,
              15
            ),
            dateEnd: new Date(currentYear, currentMonth, todayDate + 2, 16, 15),
            backgroundColor: "#039BE5",
          },
        ];

      window.Smart(
        "#scheduler",
        class {
          get properties() {
            return {
              dataSource: data,
              currentTimeIndicator: true,
              shadeUntilCurrentTime: true,
              view: "day",
              views: [
                "day",
                "week",
                "month",
                "timelineDay",
                "timelineWeek",
                "timelineMonth",
              ],
              firstDayOfWeek: 1
            };
          }
        }
      );
    });
  },
};
</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.smart-scheduler {
  width: 100%;
  height: 100%;
}

#app,
.vue-root {
  height: 100%;
}
</style>

We can now use the Smart.Scheduler with Vue 3. Data binding and event handlers will just work right out of the box.

Setup with Vue 2.x

Make Vue ignore custom elements defined outside of Vue (e.g., using the Web Components APIs). Otherwise, it will throw a warning about an Unknown custom element, assuming that you forgot to register a global component or misspelled a component name.

Open src/main.js in your favorite text editor and change its contents to the following:

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
Vue.config.ignoredElements = [
'smart-scheduler'
]

new Vue({
  render: h => h(App),
}).$mount('#app')

Open src/App.vue in your favorite text editor and change its contents to the following:

App.vue
<template>
<div class="vue-root">
<smart-scheduler id="scheduler"></smart-scheduler>
</div>
</template>

<script>
import { onMounted } from "vue";
import "smart-webcomponents/source/styles/smart.default.css";
import "smart-webcomponents/source/modules/smart.scheduler.js";

export default {
name: "app",  
mounted: function() {   

    const today = new Date(),
    todayDate = today.getDate(),
    currentYear = today.getFullYear(),
    currentMonth = today.getMonth(),
    data = [
      {
        label: "Google AdWords Strategy",
        dateStart: new Date(currentYear, currentMonth, todayDate, 9, 0),
        dateEnd: new Date(currentYear, currentMonth, todayDate, 10, 30),
        backgroundColor: "#E67C73",
      },
      {
        label: "New Brochures",
        dateStart: new Date(
          currentYear,
          currentMonth,
          todayDate - 1,
          11,
          30
        ),
        dateEnd: new Date(currentYear, currentMonth, todayDate - 1, 14, 15),
        backgroundColor: "#8E24AA",
      },
      {
        label: "Brochure Design Review",
        dateStart: new Date(
          currentYear,
          currentMonth,
          todayDate + 2,
          13,
          15
        ),
        dateEnd: new Date(currentYear, currentMonth, todayDate + 2, 16, 15),
        backgroundColor: "#039BE5",
      },
    ];

  window.Smart(
    "#scheduler",
    class {
      get properties() {
        return {
          dataSource: data,
          currentTimeIndicator: true,
          shadeUntilCurrentTime: true,
          view: "day",
          views: [
            "day",
            "week",
            "month",
            "timelineDay",
            "timelineWeek",
            "timelineMonth",
          ],
          firstDayOfWeek: 1,
        };
      }
    }
  );
};
};
</script>

<style>
html,
body {
width: 100%;
height: 100%;
margin: 0 auto;
}

.smart-scheduler {
width: 100%;
height: 100%;
}

#app,
.vue-root {
height: 100%;
}
</style>

We can now use the Smart.Scheduler with Vue. Data binding and event handlers will just work right out of the box.

We have bound the properties of the Smart.Scheduler to values in our Vue component.

Running the Vue application

Start the app with

npm run serve

Open localhost:8080 in your favorite web browser to see the output.

Read more about using Smart UI for Vue: https://www.htmlelements.com/docs/vue/.