Problem Registering License Key for Javascript
Hello,
I have a Community license for Syncfusion, and I am tryng to register the Javascript license on a page in order to be able to use the respective controls on it. This is how I am doing:
But, when the page loads, I always get the following error:
What am I doing wrong?
Regards,
Alexandre
SIGN IN To post a reply.
6 Replies
Hello,
I have cheked the information below, and, when trying to use the Register Syncfusion license key using the npx command I get the following error:
I also trying the alternative method Register the license key with the environment variable, but, although it was successful in creating the variable, no changes happened to the project. It still shows the trial message.
What I am doing wrong regarding the registration process?
Regards,
Alexandre
Hello,
In order to be more specific, what I am trying to achieve, is passing the selected dates from a Calendar Control to a Listbox control (with Remove buttons). I have tried to use the Badge, but it did not work, so, I used Bootstrap instead. After converting all the controls, the Listbox stopped being populated. I do not know if it has something to do with the licensing. Here is my code and a screenshot:
@page
@model FrotiX.Pages.Agenda.Datepicker_SyncfusionModel
@using FrotiX.Models
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Buttons
@using Syncfusion.EJ2.Notifications
@using Syncfusion.EJ2.Calendars
@using Syncfusion.EJ2.DropDowns
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Calendar with ListBox</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" rel='nofollow' href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- Google Fonts -->
<link rel='nofollow' href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<!-- Syncfusion CSS -->
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/27.1.50/material.css" rel="stylesheet" />
<link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/bootstrap5.css" />
<style>
body {
margin-top: 5cm;
font-family: 'Poppins', sans-serif;
}
.container {
display: flex;
justify-content: center;
align-items: flex-start;
margin-top: 20px;
}
.calendar-container {
margin-right: 20px;
}
.listbox-container {
position: relative;
width: 300px;
}
.badge-overlay {
position: absolute;
top: -10px;
right: -10px;
z-index: 2;
font-size: 0.8rem;
background-color: #E55B13;
color: white;
padding: 0.3em 0.45em;
border-radius: 0.25rem;
}
/* Custom styles for the Syncfusion Calendar */
.e-calendar {
font-family: 'Poppins', sans-serif;
}
/* Adjust the remove button within ListBox items */
.remove-btn {
margin-left: 10px;
padding: 0.25rem 0.5rem;
font-size: 0.8rem;
}
/* Define your custom orange color */
:root {
--calendar-primary-color: #E55B13;
}
/* Apply styles to the calendar headers */
.e-header-title,
.e-prev-button,
.e-next-button {
color: var(--calendar-primary-color);
}
/* Active date */
.e-selected-date {
background-color: var(--calendar-primary-color) !important;
color: #fff !important;
}
/* Hover state */
.e-day:hover {
background-color: rgba(229, 91, 19, 0.1) !important;
border-radius: 0.25rem;
}
/* Today's date highlight */
.e-today {
border: 1px solid var(--calendar-primary-color) !important;
}
/* Weekdays */
.e-week-day {
color: var(--calendar-primary-color) !important;
}
/* Remove focus outline */
.e-calendar, .e-calendar * {
outline: none !important;
}
</style>
</head>
<body>
<div class="container">
<!-- Calendar Control -->
<div class="calendar-container">
<div id="calendar"></div>
</div>
<!-- ListBox Container -->
<div class="listbox-container">
<!-- Badge Overlay -->
<span id="itemCount" class="badge badge-overlay">Dias: 0</span>
<!-- Card for ListBox -->
<div class="card">
<div class="card-header">
Dias Selecionados
</div>
<div class="card-body">
<div id="dateList"></div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Syncfusion Core JS -->
<script src="https://cdn.syncfusion.com/ej2/27.1.50/dist/ej2.min.js"></script>
<!-- Syncfusion Buttons Module JS -->
<script src="https://cdn.syncfusion.com/ej2/27.1.50/dist/ej2-buttons.min.js"></script>
<!-- Syncfusion Dropdowns Module JS (for ListBox) -->
<script src="https://cdn.syncfusion.com/ej2/27.1.50/dist/ej2-dropdowns.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize selectedDates array
let selectedDates = [];
// Initialize ListBox with empty dataSource and custom template
const listBox = new ej.dropdowns.ListBox({
dataSource: selectedDates,
height: '250px',
fields: { text: 'DateText', value: 'Timestamp' },
// Define the template for list items
template: '<div class="d-flex justify-content-between align-items-center"><span>${text}</span><button class="btn btn-sm btn-danger remove-btn" onclick="removeDate(${value})">Excluir</button></div>',
noRecordsTemplate: 'Sem dias escolhidos..'
});
listBox.appendTo('#dateList');
// Function to update the Badge (Bootstrap Badge)
function updateBadge() {
const badge = document.getElementById('itemCount');
badge.textContent = 'Dias: ' + selectedDates.length;
}
// Function to format Date to dd/mm/yyyy
function formatDate(dateObj) {
const day = ('0' + dateObj.getDate()).slice(-2);
const month = ('0' + (dateObj.getMonth() + 1)).slice(-2);
const year = dateObj.getFullYear();
return `${day}/${month}/${year}`;
}
// Function to add a date
function addDate(dateObj) {
const timestamp = new Date(dateObj).setHours(0, 0, 0, 0); // Normalize time
if (!selectedDates.some(d => d.Timestamp === timestamp)) {
selectedDates.push({ Timestamp: timestamp, DateText: formatDate(new Date(timestamp)) });
selectedDates.sort((a, b) => a.Timestamp - b.Timestamp);
listBox.dataSource = selectedDates;
listBox.dataBind(); // Update the ListBox
updateBadge();
console.log('Date added:', new Date(timestamp)); // Debugging
}
}
// Function to remove a date
window.removeDate = function(timestamp) {
console.log('Removing date with timestamp:', timestamp); // Debugging
selectedDates = selectedDates.filter(d => d.Timestamp !== timestamp);
listBox.dataSource = selectedDates;
listBox.dataBind();
updateBadge();
// Update Calendar selection
const calendarObj = document.getElementById('calendar').ej2_instances[0];
const dateToRemove = new Date(timestamp);
calendarObj.removeSelectedDate(dateToRemove);
};
// Initialize Calendar with multi-selection
const calendar = new ej.calendars.Calendar({
isMultiSelection: true,
// Set locale to Portuguese (Brazil)
locale: 'pt-BR',
// Event handler for date selection
select: function(args) {
console.log('Calendar select event triggered. Selected dates:', args.dates); // Debugging
const selectedDatesArray = args.dates; // Array of selected dates
// Rebuild selectedDates based on current selection
selectedDates = selectedDatesArray.map(d => {
const normalizedTimestamp = new Date(d).setHours(0, 0, 0, 0);
return { Timestamp: normalizedTimestamp, DateText: formatDate(new Date(normalizedTimestamp)) };
});
// Remove duplicates by using a Set
const uniqueTimestamps = new Set();
selectedDates = selectedDates.filter(d => {
if (uniqueTimestamps.has(d.Timestamp)) {
return false;
} else {
uniqueTimestamps.add(d.Timestamp);
return true;
}
});
// Sort the selectedDates
selectedDates.sort((a, b) => a.Timestamp - b.Timestamp);
// Update ListBox dataSource
listBox.dataSource = selectedDates;
listBox.dataBind();
// Update the Badge
updateBadge();
}
});
calendar.appendTo('#calendar');
});
</script>
</body>
</html>
Thanks for any help,
Alexandre
SIGN IN To post a reply.
