Demos

[Markov]

Hi,

Yes, please look at https://www.htmlelements.com/demos/scheduler/export/. The demo shows how to export the scheduler’s data.

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

I prepared a React + Redux example using Smart.DateRangeInput with state management.
You can copy this as a single file for quick testing (using Create React App or Vite).

Please, refer to this demo:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider, useSelector, useDispatch } from 'react-redux';
import { configureStore, createSlice } from '@reduxjs/toolkit';
import { DateRangeInput } from 'smart-webcomponents-react/daterangeinput';
import 'smart-webcomponents-react/source/styles/smart.default.css';

// ---------------- Redux Slice ----------------
const dateRangeSlice = createSlice({
  name: 'dateRange',
  initialState: {
    value: ''
  },
  reducers: {
    setDateRange: (state, action) => {
      state.value = action.payload;
    }
  }
});

const { setDateRange } = dateRangeSlice.actions;

// ---------------- Store ----------------
const store = configureStore({
  reducer: {
    dateRange: dateRangeSlice.reducer
  }
});

// ---------------- Component ----------------
const DateRangePicker = () => {
  const dispatch = useDispatch();
  const dateRange = useSelector((state) => state.dateRange.value);

  const handleChange = (event) => {
    dispatch(setDateRange(event.detail.value));
  };

  return (
    <div style={{ fontFamily: 'Arial', padding: '20px' }}>
      <h2>Smart.DateRangeInput + Redux Example</h2>
      <DateRangeInput
        value={dateRange}
        onChange={handleChange}
        placeholder="Select date range"
        style={{ width: '300px' }}
      />
      <p style={{ marginTop: '10px' }}>
        <strong>Selected Range:</strong> {dateRange}
      </p>
    </div>
  );
};

// ---------------- App Wrapper ----------------
const App = () => (
  <Provider store={store}>
    <DateRangePicker />
  </Provider>
);

// ---------------- Render ----------------
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Of course, it can be used inside modals or dialogs in plain JavaScript or frameworks like React, Vue, Angular. Since it’s a Web Component, it works in any container, including dynamically created elements such as dialogs or popups.

<link rel="stylesheet" href="https://www.htmlelements.com/demos/styles/smart.default.css" />
<script type="module" src="https://www.htmlelements.com/demos/scripts/smart.kanban.js"></script>

<button id="openModal">Open Kanban Modal</button>

<div id="myModal" style="display:none; position:fixed; top:20%; left:30%; width:600px; background:white; border:1px solid #ccc; padding:10px; z-index:9999;">
  <h3>Kanban in Modal</h3>
  <div id="kanbanContainer"></div>
  <button id="closeModal">Close</button>
</div>

<script>
const modal = document.getElementById('myModal');
const openBtn = document.getElementById('openModal');
const closeBtn = document.getElementById('closeModal');
let kanban;

openBtn.onclick = () => {
  modal.style.display = 'block';

  if (!kanban) {
    kanban = document.createElement('smart-kanban');
    kanban.columns = [
      { label: 'To Do', dataField: 'toDo' },
      { label: 'In Progress', dataField: 'inProgress' },
      { label: 'Done', dataField: 'done' }
    ];
    kanban.dataSource = [
      { text: 'Task 1', status: 'toDo' },
      { text: 'Task 2', status: 'inProgress' },
      { text: 'Task 3', status: 'done' }
    ];
    document.getElementById('kanbanContainer').appendChild(kanban);
  } else {
    kanban.refresh(); // ensure layout adjusts
  }
};

closeBtn.onclick = () => {
  modal.style.display = 'none';
};
</script>

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Yes, of course. Here is a demo with hash router:

<div id="app"></div>

<nav>
  <a href="#/gantt">Gantt</a>
  <a href="#/about">About</a>
</nav>

<script type="module">
import 'smart-webcomponents/source/styles/smart.default.css';
import 'smart-webcomponents/source/modules/smart.ganttchart.js';

function loadGantt() {
  const container = document.getElementById('app');
  container.innerHTML = 

<smart-gantt-chart id=”gantt” view=”week” durationUnit=”day”></smart-gantt-chart>
`;

const gantt = document.getElementById(‘gantt’);
gantt.dataSource = [
{
label: ‘Project A’,
dateStart: ‘2025-07-01’,
dateEnd: ‘2025-07-15’,
type: ‘task’
}
];
}

function loadAbout() {
document.getElementById(‘app’).innerHTML = ‘<h2>About Page</h2>’;
}

window.addEventListener(‘hashchange’, route);

function route() {
const hash = location.hash;
if (hash === ‘#/gantt’) {
loadGantt();
} else {
loadAbout();
}
}

route(); // Initial load
</script>`

Best regards,
Peter Stoev

jQWidgets Team
https://www.htmlelements.com/

[Markov]

Hi,

You can achieve this with a custom v-model wrapper for Vue:

<template>
  <smart-date-range-input
    :value="modelValue"
    @change="$emit('update:modelValue', $event.detail.value)"
  ></smart-date-range-input>
</template>

<script>
export default {
  name: "DateRangeInputWrapper",
  props: {
    modelValue: String
  }
};
</script>

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Yes, you can absolutely use Smart.DateRangeInput in a React app that interacts with a REST API. The component itself is a UI element for date range selection, so you can easily capture the selected range and then call your API with those dates as query parameters or in the request body.

Please, take a look at:

import React, { useRef, useState } from 'react';
import { DateRangeInput } from 'smart-webcomponents-react/daterangeinput';
import axios from 'axios';

export default function DateRangeExample() {
  const dateRangeRef = useRef();
  const [data, setData] = useState([]);

  const fetchData = async () => {
    const value = dateRangeRef.current.value; 
    const [startDate, endDate] = value.split(' - ');

    try {
      const response = await axios.get('https://api.example.com/data', {
        params: {
          start: startDate,
          end: endDate
        }
      });
      setData(response.data);
    } catch (error) {
      console.error('API Error:', error);
    }
  };

  return (
    <div>
      <DateRangeInput ref={dateRangeRef} placeholder="Select date range" />
      <button onClick={fetchData}>Load Data</button>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Yes, this is possible, take a look at https://www.htmlelements.com/docs/editor-api/. The API shows that you can enable/disable many of the features of the Editor.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Smart.DateRangeInput is compatible with Blazor routing because it’s a Blazor component that supports two-way data binding. However, its state does not persist automatically when you navigate to a different route and come back, because Blazor by default re-renders the component tree when navigating.

Why state is lost?

When you navigate between pages in Blazor (using NavLink or NavigationManager.NavigateTo), the page is disposed and re-rendered, so any selected date range in SmartDateRangeInput is reset unless you store it somewhere.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

You can look at https://www.htmlelements.com/docs/blazor-table/. Also the Grid related topics about data binding are applicable for the Table as well. Example: https://www.htmlelements.com/docs/blazor-grid-data-bind-sql/

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Yes, it is possible by using a conditional rendering.

For example:

@page "/editor"

<h3>Smart Editor (On Demand)</h3>

@if (showEditor)
{
    <Editor Width="100%" Height="300px"></Editor>
}
else
{
    <button @onclick="LoadEditor">Load Editor</button>
}

@code {
    private bool showEditor = false;

    private void LoadEditor()
    {
        showEditor = true;
    }
}

This approach loads the Smart Editor after user interaction, but note that Smart.Blazor scripts are still globally loaded.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

You can try this:

<template>
  <div>
    <smart-editor v-model="editorContent"></smart-editor>
    <button @click="validateEditor">Submit</button>
    <p v-if="errorMessage" style="color:red">{{ errorMessage }}</p>
  </div>
</template>

<script>
import "smart-webcomponents/source/styles/smart.default.css";
import "smart-webcomponents/source/modules/smart.editor.js";

export default {
  data() {
    return {
      editorContent: '',
      errorMessage: ''
    };
  },
  methods: {
    validateEditor() {
      //  Apply custom validation rules
      if (!this.editorContent || this.editorContent.trim() === '') {
        this.errorMessage = 'Editor content cannot be empty.';
        return;
      }

      // Example: Minimum length rule
      const textOnly = this.editorContent.replace(/<[^>]+>/g, '').trim();
      if (textOnly.length < 20) {
        this.errorMessage = 'Content must be at least 20 characters long.';
        return;
      }

      // Example: Prohibited word
      if (/forbiddenword/i.test(textOnly)) {
        this.errorMessage = 'Content contains forbidden words.';
        return;
      }

      this.errorMessage = '';
      alert('Validation passed! Submitting data...');
    
    }
  }
};
</script>

Best Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi Linda,

Please, take a look at https://www.htmlelements.com/react/demos/scheduler/travel-schedule/. It shows how to apply customizations to the cells/events of the Scheduler.

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

You just need to enable the selection of the Grid and you will be able to navigate through the keyboard. Example: https://www.htmlelements.com/react/demos/grid/overview/

Best regards.
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Smart Scheduler automatically adapts to container size. Set the smart-scheduler { width: 100%; height: 100%; } if you want it to fill the size of the container and resize with it.

Best Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Set them in percentages. The grid’s width and height accept percentages and the sizing of the component is the same as the sizing of a DIV tag.

Regards,
Markov

[Author]

Posts