Is your calendar in some region which was initially hidden? Like a conditional/show/hide region, or tabs/collapse?
It’s not inside a hidden region, tab or anything.
However, my layout has some custom scripts for the left navbar but I don’t think they can create this problem.
<script>
window.addEventListener('DOMContentLoaded', event => {
// Toggle the side navigation
const sidebarToggle = document.body.querySelector('#sidebarToggle');
if (sidebarToggle) {
// Uncomment Below to persist sidebar toggle between refreshes
// if (localStorage.getItem('sb|sidebar-toggle') === 'true') {
// document.body.classList.toggle('sb-sidenav-toggled');
// }
sidebarToggle.addEventListener('click', event => {
event.preventDefault();
document.body.classList.toggle('sb-sidenav-toggled');
localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));
});
}
});
Can you post the whole page code your calendar is placed in?
Have you tried setting ‘max height’ to ‘auto’ …?
I tried now but nothing changes, not even setting a specific height.
20231101_134514
This may help
This doesn’t really work. Post your code please as explained here:
Or better - please provide a test page where we can check this.
<!doctype html>
<html>
<head>
<script src="/dmxAppConnect/dmxAppConnect.js"></script>
<base href="/">
<meta charset="UTF-8">
<title>San Patrignano - Data Manager</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css" integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l" crossorigin="anonymous" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<script src="/js/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js" integrity="sha256-VrmtNHAdGzjNsUNtWYG55xxE9xDTz4gF63x/prKXKH0=" crossorigin="anonymous"></script>
<script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
<script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
<link rel="icon" href="/assets/images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/bscustom.css" />
<link rel="stylesheet" href="/css/style.css" />
<script src="/dmxAppConnect/dmxBootstrap5Tooltips/dmxBootstrap5Tooltips.js" defer></script>
<link rel="stylesheet" href="/dmxAppConnect/dmxBootstrap5TableGenerator/dmxBootstrap5TableGenerator.css" />
<script src="/dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js" defer></script>
<script src="/dmxAppConnect/dmxDataTraversal/dmxDataTraversal.js" defer></script>
<script src="/dmxAppConnect/dmxBrowser/dmxBrowser.js" defer></script>
<link rel="stylesheet" href="/dmxAppConnect/dmxValidator/dmxValidator.css" />
<script src="/dmxAppConnect/dmxValidator/dmxValidator.js" defer></script>
<script src="/dmxAppConnect/dmxBootstrap5Toasts/dmxBootstrap5Toasts.js" defer></script>
<link rel="stylesheet" href="/dmxAppConnect/dmxNotifications/dmxNotifications.css" />
<script src="/dmxAppConnect/dmxNotifications/dmxNotifications.js" defer></script>
<script src="/dmxAppConnect/dmxFormatter/dmxFormatter.js" defer></script>
<script src="/dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer></script>
<script src="/dmxAppConnect/dmxBootstrap5PagingGenerator/dmxBootstrap5PagingGenerator.js" defer></script>
<link rel="stylesheet" href="/dmxAppConnect/dmxPreloader/dmxPreloader.css" />
<script src="/dmxAppConnect/dmxPreloader/dmxPreloader.js" defer></script>
<link rel="stylesheet" href="https://unpkg.com/@fullcalendar/core@4.4.2/main.min.css" />
<script src="https://unpkg.com/@fullcalendar/core@4.4.2/main.min.js" defer></script>
<script src="https://unpkg.com/@fullcalendar/core@4.4.2/locales-all.min.js" defer></script>
<script src="https://unpkg.com/@fullcalendar/interaction@4.4.2/main.min.js" defer></script>
<script src="https://unpkg.com/@fullcalendar/daygrid@4.4.2/main.min.js" defer></script>
<script src="/dmxAppConnect/dmxCalendar/dmxCalendar.js" defer></script>
<script src="https://unpkg.com/@fullcalendar/google-calendar@4.4.2/main.min.js" defer></script>
<script src="https://unpkg.com/@fullcalendar/bootstrap@4.4.2/main.min.js" defer></script>
<script src="/dmxAppConnect/dmxTyped/dmxTyped.js" defer></script>
<script src="/dmxAppConnect/dmxTyped/typed.min.js" defer></script>
</head>
<body is="dmx-app" id="Main" class="sb-nav-fixed">
<dmx-serverconnect id="SCUtente" url="/api/Autenticazione/datiutente"></dmx-serverconnect>
<dmx-notifications id="Notification" newest-on-top="true" timeout="2000" opacity="0.9" position="bottom" success-background="#198754"></dmx-notifications>
<div is="dmx-browser" id="Browser"></div>
<nav class="sb-topnav navbar bg-dark navbar-expand w-100 justify-content-between">
<div class="d-flex"><a href="index.html">
<img src="/assets/images/app-logo.png" width="225" height="56"></a><button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0 text-light" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button></div>
<!-- Navbar Brand-->
<!-- Sidebar Toggle-->
<!-- Navbar Search-->
<!-- Navbar-->
<small class="text-muted" dmx-text="SCUtente.data.query.UT_Nome+' '+SCUtente.data.query.UT_Cognome"></small>
<ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
<li class="nav-item dropdown justify-content-end">
<a class="nav-link dropdown-toggle text-white" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#!">Profilo</a></li>
<li></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#" dmx-on:click="run([{serverConnect:{url:'/api/Autenticazione/logout',site:'DataManager',name:'SCLogout',outputType:'object'}},{run:{action:`Browser.goto(\'/\')`,outputType:'text'}}])">Logout</a></li>
</ul>
</li>
</ul>
</nav>
<div id="layoutSidenav">
<div id="layoutSidenav_nav">
<nav class="sb-sidenav accordion sb-sidenav-light" id="sidenavAccordion">
<div class="sb-sidenav-menu">
<div class="nav mt-3">
<a class="nav-link" href="/home">
<div class="sb-nav-link-icon"><i class="fas fa-house-user fa-lg fa-fw"></i></div>
Home page
</a>
<a class="nav-link" href="/prenotazioni/calendario">
<div class="sb-nav-link-icon"><i class="far fa-calendar-alt fa-fw fa-lg"></i></div>
Prenotazioni
</a>
<a class="nav-link" href="/importazione">
<div class="sb-nav-link-icon"><i class="fas fa-file-import fa-fw fa-lg"></i></div>
Importazione dati
</a>
<a class="nav-link" href="/report">
<div class="sb-nav-link-icon"><i class="fas fa-solid fa-print fa-fw fa-lg"></i></div>
Report di stampa
</a>
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#navTabelle" aria-expanded="false" aria-controls="collapseLayouts">
<div class="sb-nav-link-icon"><i class="fas fa-columns fa-lg fa-fw"></i></div>
Tabelle di sistema
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
</a>
<div class="collapse" id="navTabelle" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">
<nav class="sb-sidenav-menu-nested nav">
<a class="nav-link" href="/admin/tipo-documento">Tipo documento</a>
<a class="nav-link" href="/admin/stato-civile">Stato civile</a>
<a class="nav-link" href="/admin/stato-persona">Stato persona</a>
<a class="nav-link" href="/admin/tipo-ingresso">Tipo ingresso</a>
<a class="nav-link" href="/admin/tipo-uscita">Tipo uscita</a>
<a class="nav-link" href="/admin/tipo-contatto">Tipo contatto</a>
<a class="nav-link" href="/admin/settori">Settori</a>
<a class="nav-link" href="/admin/tipo-evento">Tipo evento</a>
<a class="nav-link" href="/admin/tipo-domicilio">Tipo domicilio</a>
<a class="nav-link" href="/admin/comuni">Comuni</a>
<a class="nav-link" href="/admin/associazioni">Associazioni</a>
<a class="nav-link" href="/admin/medici">Medici</a>
<a class="nav-link" href="/admin/unita-operative">Unità operative</a>
<a class="nav-link" href="/admin/servizio-militare">Servizio militare</a>
</nav>
</div>
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#navAccessi" aria-expanded="false" aria-controls="collapseLayouts">
<div class="sb-nav-link-icon"><i class="fas fa-user-friends fa-lg fa-fw"></i></div>Gestione accessi<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
</a>
<div class="collapse" id="navAccessi" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">
<nav class="sb-sidenav-menu-nested nav">
<a class="nav-link" href="/admin/utenti">Utenti</a>
<a class="nav-link" href="/admin/ruoli">Ruoli</a>
</nav>
</div>
</div>
</div>
</nav>
</div>
<div id="layoutSidenav_content">
<main>
<div is="dmx-view" id="content">
<!-- Wappler include head-page="layouts/Main" is="dmx-app" id="calendario" appconnect="local" bootstrap5="cdn" fontawesome_5="cdn" jquery_slim_35="cdn" bootstrap_icons="cdn" components="{dmxCalendar:{},dmxBootstrap5Modal:{}}" -->
<meta name="ac:route" content="/prenotazioni/calendario">
<div class="modal" id="ModalAdd" is="dmx-bs5-modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Nuova prenotazione</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form is="dmx-serverconnect-form" id="FrmAdd" method="post" action="/api/Contatti/crea" dmx-generator="bootstrap5" dmx-form-type="inline" credentials="true" dmx-on:success="ModalAdd.hide();FrmAdd.reset();Notification.success('Salvataggio completato');SCLista.load({anuid: SCInfo.data.query.AN_ID},true)" dmx-on:error="ModalAdd.hide();FrmAdd.reset(true);Notification.danger('Impossibile salvare i dati')">
<input type="hidden" class="form-control" id="inp_AC_CreatoDa" name="AC_CreatoDa" aria-describedby="inp_AC_CreatoDa_help" dmx-bind:value="SCUtente.data.query.UT_Nome+' '+SCUtente.data.query.UT_Cognome">
<input type="hidden" class="form-control" id="inp_AC_AN_ID" name="AC_AN_ID" aria-describedby="inp_AC_CreatoDa_help" dmx-bind:value="' '+SCInfo.data.query.AN_ID">
<div class="row gy-1">
<div class="col">
<label for="imp_AC_TC_ID"><span class="label-required">*</span>Tipo contatto</label>
<select id="imp_AC_TC_ID" class="form-select" name="AC_TC_ID" dmx-bind:options="ScTipoContatto.data.query" optiontext="TC_Descrizione" optionvalue="TC_ID" required="" data-msg-required="Campo obbligatorio">
<option>Seleziona</option>
</select>
</div>
<div class="col">
<label for="inp_AC_Descrizione"><span class="label-required">*</span>Descrizione</label>
<input type="text" class="form-control" id="inp_AC_Descrizione" name="AC_Descrizione" aria-describedby="inp_AC_Descrizione_help" placeholder="..." required="" data-msg-required="Campo obbligatorio">
</div>
<div class="col-12">
<label for="inp_AC_Note1">Note</label>
<input type="text" class="form-control" id="inp_AC_Note" name="AC_Note" aria-describedby="inp_AC_Descrizione_help" placeholder="...">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" dmx-on:click="FrmAdd.submit()">Salva</button>
</div>
</div>
</div>
</div>
<div class="container-fluid px-4" id="cnt">
<h1 class="mt-4">Prenotazioni</h1>
<div class="d-flex mb-3 align-items-center justify-content-end">
<div class="d-flex gap-2 " dmx-on:click="ModalAdd.show()"><button id="btn1" class="btn btn-sm btn-secondary" dmx-bs-tooltip="'Stampa'" data-bs-trigger="hover">
<i class="bi bi-printer-fill fa-lg"></i></button><button id="btn3" class="btn btn-sm btn-secondary" dmx-bs-tooltip="'Esporta in excel'" data-bs-trigger="hover">
<i class="bi bi-file-earmark-excel-fill fa-lg"></i></button><button id="btn2" class="btn btn-success btn-sm" dmx-bs-tooltip="'Aggiungi prenotazione'" data-bs-trigger="hover" href="/crea-anagrafica">
<i class="fas fa-plus fa-lg"></i></button></div>
</div>
<dmx-calendar id="Cld" views="dayGridMonth,dayGridWeek,dayGridDay" style="max-height:auto" locale="it" view="dayGridMonth" theme="bootstrap" aspect-ratio="1.7"></dmx-calendar>
</div>
</div>
</main>
</div>
</div>
<script>
window.addEventListener('DOMContentLoaded', event => {
// Toggle the side navigation
const sidebarToggle = document.body.querySelector('#sidebarToggle');
if (sidebarToggle) {
// Uncomment Below to persist sidebar toggle between refreshes
// if (localStorage.getItem('sb|sidebar-toggle') === 'true') {
// document.body.classList.toggle('sb-sidenav-toggled');
// }
sidebarToggle.addEventListener('click', event => {
event.preventDefault();
document.body.classList.toggle('sb-sidenav-toggled');
localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));
});
}
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var nestedNavLinks = document.querySelectorAll('.sb-sidenav-menu-nested.nav a');
var hasActiveLink = Array.from(nestedNavLinks).some(function(link) {
if (link.classList.contains('active')) {
link.parentNode.parentNode.classList.add('show')
}
});
});
</script>
<script src="/bootstrap/5/js/bootstrap.min.js"></script>
</body>
</html>
What server model are you using? Is this a PHP SPA page?
node.js
Something is really messed on your page then.
Is that supposed to be a layout page? If yes what is that content inside the:
<div is="dmx-view" id="content"> </div>
and why did you place it there?
I suggest you to start again by creating a new layout page and properly create a content page (view) containing your calendar, then test this again.
If it is useful, I will share the layout and internal page code.
<!doctype html>
<html>
<head>
<script src="/dmxAppConnect/dmxAppConnect.js"></script>
<base href="/">
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css" integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l" crossorigin="anonymous" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<script src="/js/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js" integrity="sha256-VrmtNHAdGzjNsUNtWYG55xxE9xDTz4gF63x/prKXKH0=" crossorigin="anonymous"></script>
<script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
<script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
<link rel="icon" href="/assets/images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/bscustom.css" />
<link rel="stylesheet" href="/css/style.css" />
<script src="/dmxAppConnect/dmxBootstrap5Tooltips/dmxBootstrap5Tooltips.js" defer></script>
<link rel="stylesheet" href="/dmxAppConnect/dmxBootstrap5TableGenerator/dmxBootstrap5TableGenerator.css" />
<script src="/dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js" defer></script>
<script src="/dmxAppConnect/dmxDataTraversal/dmxDataTraversal.js" defer></script>
<script src="/dmxAppConnect/dmxBrowser/dmxBrowser.js" defer></script>
<link rel="stylesheet" href="/dmxAppConnect/dmxValidator/dmxValidator.css" />
<script src="/dmxAppConnect/dmxValidator/dmxValidator.js" defer></script>
<script src="/dmxAppConnect/dmxBootstrap5Toasts/dmxBootstrap5Toasts.js" defer></script>
<link rel="stylesheet" href="/dmxAppConnect/dmxNotifications/dmxNotifications.css" />
<script src="/dmxAppConnect/dmxNotifications/dmxNotifications.js" defer></script>
<script src="/dmxAppConnect/dmxFormatter/dmxFormatter.js" defer></script>
<script src="/dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer></script>
<script src="/dmxAppConnect/dmxBootstrap5PagingGenerator/dmxBootstrap5PagingGenerator.js" defer></script>
<link rel="stylesheet" href="/dmxAppConnect/dmxPreloader/dmxPreloader.css" />
<script src="/dmxAppConnect/dmxPreloader/dmxPreloader.js" defer></script>
<link rel="stylesheet" href="https://unpkg.com/@fullcalendar/core@4.4.2/main.min.css" />
<script src="https://unpkg.com/@fullcalendar/core@4.4.2/main.min.js" defer></script>
<script src="https://unpkg.com/@fullcalendar/core@4.4.2/locales-all.min.js" defer></script>
<script src="https://unpkg.com/@fullcalendar/interaction@4.4.2/main.min.js" defer></script>
<script src="https://unpkg.com/@fullcalendar/daygrid@4.4.2/main.min.js" defer></script>
<script src="/dmxAppConnect/dmxCalendar/dmxCalendar.js" defer></script>
<script src="https://unpkg.com/@fullcalendar/google-calendar@4.4.2/main.min.js" defer></script>
<script src="https://unpkg.com/@fullcalendar/bootstrap@4.4.2/main.min.js" defer></script>
<script src="/dmxAppConnect/dmxTyped/dmxTyped.js" defer></script>
<script src="/dmxAppConnect/dmxTyped/typed.min.js" defer></script>
</head>
<body is="dmx-app" id="Main" class="sb-nav-fixed">
<dmx-serverconnect id="SCUtente" url="/api/Autenticazione/datiutente"></dmx-serverconnect>
<dmx-notifications id="Notification" newest-on-top="true" timeout="2000" opacity="0.9" position="bottom" success-background="#198754"></dmx-notifications>
<div is="dmx-browser" id="Browser"></div>
<nav class="sb-topnav navbar bg-dark navbar-expand w-100 justify-content-between">
<div class="d-flex"><a href="index.html">
<img src="/assets/images/app-logo.png" width="225" height="56"></a><button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0 text-light" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button></div>
<!-- Navbar Brand-->
<!-- Sidebar Toggle-->
<!-- Navbar Search-->
<!-- Navbar-->
<small class="text-muted" dmx-text="SCUtente.data.query.UT_Nome+' '+SCUtente.data.query.UT_Cognome"></small>
<ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
<li class="nav-item dropdown justify-content-end">
<a class="nav-link dropdown-toggle text-white" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#!">Profilo</a></li>
<li></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#" dmx-on:click="run([{serverConnect:{url:'/api/Autenticazione/logout',site:'DataManager',name:'SCLogout',outputType:'object'}},{run:{action:`Browser.goto(\'/\')`,outputType:'text'}}])">Logout</a></li>
</ul>
</li>
</ul>
</nav>
<div id="layoutSidenav">
<div id="layoutSidenav_nav">
<nav class="sb-sidenav accordion sb-sidenav-light" id="sidenavAccordion">
<div class="sb-sidenav-menu">
<div class="nav mt-3">
<a class="nav-link" href="/home">
<div class="sb-nav-link-icon"><i class="fas fa-house-user fa-lg fa-fw"></i></div>
Home page
</a>
<a class="nav-link" href="/prenotazioni/calendario">
<div class="sb-nav-link-icon"><i class="far fa-calendar-alt fa-fw fa-lg"></i></div>
Prenotazioni
</a>
<a class="nav-link" href="/importazione">
<div class="sb-nav-link-icon"><i class="fas fa-file-import fa-fw fa-lg"></i></div>
Importazione dati
</a>
<a class="nav-link" href="/report">
<div class="sb-nav-link-icon"><i class="fas fa-solid fa-print fa-fw fa-lg"></i></div>
Report di stampa
</a>
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#navTabelle" aria-expanded="false" aria-controls="collapseLayouts">
<div class="sb-nav-link-icon"><i class="fas fa-columns fa-lg fa-fw"></i></div>
Tabelle di sistema
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
</a>
<div class="collapse" id="navTabelle" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">
<nav class="sb-sidenav-menu-nested nav">
<a class="nav-link" href="/admin/tipo-documento">Tipo documento</a>
<a class="nav-link" href="/admin/stato-civile">Stato civile</a>
<a class="nav-link" href="/admin/stato-persona">Stato persona</a>
<a class="nav-link" href="/admin/tipo-ingresso">Tipo ingresso</a>
<a class="nav-link" href="/admin/tipo-uscita">Tipo uscita</a>
<a class="nav-link" href="/admin/tipo-contatto">Tipo contatto</a>
<a class="nav-link" href="/admin/settori">Settori</a>
<a class="nav-link" href="/admin/tipo-evento">Tipo evento</a>
<a class="nav-link" href="/admin/tipo-domicilio">Tipo domicilio</a>
<a class="nav-link" href="/admin/comuni">Comuni</a>
<a class="nav-link" href="/admin/associazioni">Associazioni</a>
<a class="nav-link" href="/admin/medici">Medici</a>
<a class="nav-link" href="/admin/unita-operative">Unità operative</a>
<a class="nav-link" href="/admin/servizio-militare">Servizio militare</a>
</nav>
</div>
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#navAccessi" aria-expanded="false" aria-controls="collapseLayouts">
<div class="sb-nav-link-icon"><i class="fas fa-user-friends fa-lg fa-fw"></i></div>Gestione accessi<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
</a>
<div class="collapse" id="navAccessi" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">
<nav class="sb-sidenav-menu-nested nav">
<a class="nav-link" href="/admin/utenti">Utenti</a>
<a class="nav-link" href="/admin/ruoli">Ruoli</a>
</nav>
</div>
</div>
</div>
</nav>
</div>
<div id="layoutSidenav_content">
<main>
<div is="dmx-view" id="content">
<%- await include(content, locals); %>
</div>
</main>
</div>
</div>
<script>
window.addEventListener('DOMContentLoaded', event => {
// Toggle the side navigation
const sidebarToggle = document.body.querySelector('#sidebarToggle');
if (sidebarToggle) {
// Uncomment Below to persist sidebar toggle between refreshes
// if (localStorage.getItem('sb|sidebar-toggle') === 'true') {
// document.body.classList.toggle('sb-sidenav-toggled');
// }
sidebarToggle.addEventListener('click', event => {
event.preventDefault();
document.body.classList.toggle('sb-sidenav-toggled');
localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));
});
}
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var nestedNavLinks = document.querySelectorAll('.sb-sidenav-menu-nested.nav a');
var hasActiveLink = Array.from(nestedNavLinks).some(function(link) {
if (link.classList.contains('active')) {
link.parentNode.parentNode.classList.add('show')
}
});
});
</script>
<script src="/bootstrap/5/js/bootstrap.min.js"></script>
</body>
</html>
<!-- Wappler include head-page="layouts/Main" is="dmx-app" id="calendario" appconnect="local" bootstrap5="cdn" fontawesome_5="cdn" jquery_slim_35="cdn" bootstrap_icons="cdn" components="{dmxCalendar:{},dmxBootstrap5Modal:{}}" -->
<meta name="ac:route" content="/prenotazioni/calendario">
<div class="modal" id="ModalAdd" is="dmx-bs5-modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Nuova prenotazione</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form is="dmx-serverconnect-form" id="FrmAdd" method="post" action="/api/Contatti/crea" dmx-generator="bootstrap5" dmx-form-type="inline" credentials="true" dmx-on:success="ModalAdd.hide();FrmAdd.reset();Notification.success('Salvataggio completato');SCLista.load({anuid: SCInfo.data.query.AN_ID},true)" dmx-on:error="ModalAdd.hide();FrmAdd.reset(true);Notification.danger('Impossibile salvare i dati')">
<input type="hidden" class="form-control" id="inp_AC_CreatoDa" name="AC_CreatoDa" aria-describedby="inp_AC_CreatoDa_help" dmx-bind:value="SCUtente.data.query.UT_Nome+' '+SCUtente.data.query.UT_Cognome">
<input type="hidden" class="form-control" id="inp_AC_AN_ID" name="AC_AN_ID" aria-describedby="inp_AC_CreatoDa_help" dmx-bind:value="' '+SCInfo.data.query.AN_ID">
<div class="row gy-1">
<div class="col">
<label for="imp_AC_TC_ID"><span class="label-required">*</span>Tipo contatto</label>
<select id="imp_AC_TC_ID" class="form-select" name="AC_TC_ID" dmx-bind:options="ScTipoContatto.data.query" optiontext="TC_Descrizione" optionvalue="TC_ID" required="" data-msg-required="Campo obbligatorio">
<option>Seleziona</option>
</select>
</div>
<div class="col">
<label for="inp_AC_Descrizione"><span class="label-required">*</span>Descrizione</label>
<input type="text" class="form-control" id="inp_AC_Descrizione" name="AC_Descrizione" aria-describedby="inp_AC_Descrizione_help" placeholder="..." required="" data-msg-required="Campo obbligatorio">
</div>
<div class="col-12">
<label for="inp_AC_Note1">Note</label>
<input type="text" class="form-control" id="inp_AC_Note" name="AC_Note" aria-describedby="inp_AC_Descrizione_help" placeholder="...">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" dmx-on:click="FrmAdd.submit()">Salva</button>
</div>
</div>
</div>
</div>
<div class="container-fluid px-4" id="cnt">
<h1 class="mt-4">Prenotazioni</h1>
<div class="d-flex mb-3 align-items-center justify-content-end">
<div class="d-flex gap-2 " dmx-on:click="ModalAdd.show()"><button id="btn1" class="btn btn-sm btn-secondary" dmx-bs-tooltip="'Stampa'" data-bs-trigger="hover">
<i class="bi bi-printer-fill fa-lg"></i></button><button id="btn3" class="btn btn-sm btn-secondary" dmx-bs-tooltip="'Esporta in excel'" data-bs-trigger="hover">
<i class="bi bi-file-earmark-excel-fill fa-lg"></i></button><button id="btn2" class="btn btn-success btn-sm" dmx-bs-tooltip="'Aggiungi prenotazione'" data-bs-trigger="hover" href="/crea-anagrafica">
<i class="fas fa-plus fa-lg"></i></button></div>
</div>
<dmx-calendar id="Cld" views="dayGridMonth,dayGridWeek,dayGridDay" locale="it" view="dayGridMonth" theme="bootstrap" aspect-ratio="1.7"></dmx-calendar>
</div>
This now looks correct, i checked your code, but can’t recreate the issue locally. The calendar loads properly.
Can you send a link to your page so we can check what goes wrong there?
Unfortunately the project is not online but in the internal network of one of our customer
I don’t see anything wrong with your code in my tests, so i can’t tell what is causing this until i can access and preview your actual page.
Thank you very much for your support, unfortunately we cannot provide external access.
I saw in other posts that you suggested applying the updateSize() function, do you think it could be useful in this case?
Yes, you can try updating the size on load to see if that makes any difference.
I take advantage of this thread to try to solve another problem:
I have a datetime field in my sql database (Frame 1)
In the calendar (timezone=local / locale=italian) I get a different time (Frame 2)
When I select from the database it appears in the format of frame 3
How can I format it to insert it inside the textbox in datetimelocal format?
