Отображение в названии и описании полного календаря ⇐ Php

[Anonymous]

У меня проблема с FullCalendar, я не могу отобразить описание на новой строке, в настоящее время я создал заголовок, который представляет собой объединение заголовка и описания, хранящегося в базе данных MySQL, но это беспорядочно, я хотите отобразить блок событий, заголовок и описание в одной строке.


Например, в желтом событии я хочу, чтобы в первой строке был Primo Soccorso, а во второй строке Gruppo A.
В настоящее время данные загружается в формате JSON из базы данных с помощью PHP. MySQL и Ajax.

Код: Выделить всё

    $query = "select * from listaeventi";
if($result = mysqli_query($conn,$query)){
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){

$data[] = [
'id'              => $row["id"],
'title'           => $row["titoloEvento"]." , ".$row["descrizioneEvento"],
'description'     => $row["descrizioneEvento"],
'type'            => "Corso",
'start'           => $row["dataInizio"],
'end'             => $row["dataFine"],
'durata'          => $row["durataEvento"],
'address'         => $row["indirizzoEvento"],
'city'            => $row["paeseEvento"],
'cliente'         => $row["cliente"],
'sala'            => $row["sala"],
'data_successiva' => $row["data_successiva"],
'iscrizione'      => $row["iscrizione"],
'borderColor'     => $row["bgcolor"],
'backgroundColor' => $row["bordercolor"]
];

}

}

Код Javascript для FullCalendar:

Код: Выделить всё

    document.addEventListener('DOMContentLoaded', function() {
var url ='';

var vista = 'listMonth';
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
var vista = 'listMonth';
}
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: vista,
locale: 'it',
headerToolbar: {
left: 'prev,next,today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth',
},
buttonText: {
today:    'Oggi',
month:    'Mese',
week:     'Settimana',
day:      'Giorno',
list:     'Agenda'
},

navLinks: true, // can click day/week names to navigate views
editable: true,
selectable: true,
eventDisplay: 'block',
selectMirror: true,
dayMaxEvents: true, // allow "more" link when too many events
events: url+'calendar/load.php?filtro='+filtroCorso,
contentHeight: 1500,
allDaySlot: false, //evento allday
firstDay: 1,
select: function(arg) {

var options = {'weekday': 'long', 'month': 'long', 'day': '2-digit'};

var date = arg.start.toLocaleString('it-IT', options);

// $("#data_inizio").val(arg.start.getFullYear()+"-"+(arg.start.getMonth()+1)+"-"+addZero(arg.start.getDate())+" "+addZero(arg.start.getHours())+":"+addZero(arg.start.getMinutes())+":"+addZero(arg.start.getSeconds()));
// $("#data_fine").val(arg.end.getFullYear()+"-"+(arg.end.getMonth()+1)+"-"+addZero(arg.end.getDate())+"  "+addZero(arg.end.getHours())+":"+addZero(arg.end.getMinutes())+":"+addZero(arg.end.getSeconds()));
//
// $("#data_evento").text(date);
// $("#data_italiana").val(date);
//
// $("#ora_inizio").text(addZero(arg.start.getHours())+":"+addZero(arg.start.getMinutes()));
// $("#ora_fine").text(addZero(arg.end.getHours())+":"+addZero(arg.end.getMinutes()));

calendar.unselect()
},

//eventDrop is triggered when an event is dragged and dropped to another date or time.
eventDrop: function(arg) {
var start = arg.event.start.toDateString()+' '+arg.event.start.getHours()+':'+arg.event.start.getMinutes()+':'+arg.event.start.getSeconds();
if (arg.event.end == null) {
end = start;
} else {
var end = arg.event.end.toDateString()+' '+arg.event.end.getHours()+':'+arg.event.end.getMinutes()+':'+arg.event.end.getSeconds();
}

// $.ajax({
//   url:url+"calendar/update.php",
//   type:"POST",
//   data:{id:arg.event.id, start:start, end:end},
// });
},
//eventReize is very similar, this is triggered when an event is manually resized from a week or day view.
eventResize: function(arg) {
var start = arg.event.start.toDateString()+' '+arg.event.start.getHours()+':'+arg.event.start.getMinutes()+':'+arg.event.start.getSeconds();
var end = arg.event.end.toDateString()+' '+arg.event.end.getHours()+':'+arg.event.end.getMinutes()+':'+arg.event.end.getSeconds();

// $.ajax({
//   url:url+"calendar/update.php",
//   type:"POST",
//   data:{id:arg.event.id, start:start, end:end},
// });
},

eventClick: function(arg) {

var id = arg.event.id;
var options = {'weekday': 'long', 'month': 'long', 'day': '2-digit'};

var date = arg.event.start.toLocaleString('it-IT', options);

$.ajax({
url:url+"calendar/getevent.php",
type:"POST",
dataType: 'json',
data:{id:arg.event.id},
success:  function(data) {
// alert(data[0].city);

// alert(data[0].idRiferimento);
$('#tipoEvento').html(data[0].type);
$('#tipoEvento').css('color', data[0].backgroundColor);

$('#titoloEvento').html(data[0].title);
$('#titoloEvento').css('color', data[0].backgroundColor);
globalID = data[0].id;

$("#eliminaData").attr("href","https://corsi.gpserviziarco.it/calendario-corsi/index.php?delete="+globalID);

globalTitolo = data[0].title;
globalBackgroundColor = data[0].backgroundColor;

// SETTO MAPPA USCITE PRATICHE

if(data[0].address.includes("Circolo") || data[0].address.includes("Conca")){
$('#mappa').attr('src', "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3324.708097095604!2d10.87475893318616!3d45.86273542875592!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478210e9aaef5bf7%3A0x2e3475f668003103!2sCircolo%20Vela%20Torbole!5e1!3m2!1sit!2sit!4v1727274256988!5m2!1sit!2sit");
$('#indirizzo-mobile').attr('href', "https://maps.app../wMCmuxbFp6fCnEog6");
}else if(data[0].address.includes("Porto")){
$('#mappa').attr('src', "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6647.5929025257!2d10.853839376647468!3d45.87797800573525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478210d3a0a6edb3%3A0xd4ecc39b92163d32!2sPorto%20San%20Nicol%C3%B3!5e1!3m2!1sit!2sit!4v1727274370632!5m2!1sit!2sit");
$('#indirizzo-mobile').attr('href', "https://./maps/2gw4jFDzrbML83NE6");
}else if(data[0].address.includes("San Nazzaro 2/D")){
$('#mappa').attr('src', "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3322.6874817366593!2d10.849190576648251!3d45.89651450448972!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4782114dad8eac25%3A0xec24e7cccdbb556f!2sG%20%26%20P%20Servizi%20Srl!5e1!3m2!1sit!2sit!4v1727274332071!5m2!1sit!2sit");
$('#indirizzo-mobile').attr('href', "https://./maps/2gw4jFDzrbML83NE6");
}else if(data[0].address.includes("Croseta 39")){
$('#mappa').attr('src', "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3321.7411262686323!2d10.862404176648921!3d45.91232830342698!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xaa3df96f0daec2f7%3A0x9c56bae78c563eac!2sFeelwork%20sicurezza%20verticale!5e1!3m2!1sit!2sit!4v1727274399004!5m2!1sit!2sit");
$('#indirizzo-mobile').attr('href', "https://maps.app../1iJBxVWkjJTZqxD39");
}else if(data[0].address.includes("Piazza Maria Contini")){
$('#mappa').attr('src', "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3322.7094054490444!2d10.844431726648251!3d45.896148104514396!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478216c504b123a3%3A0xdb7e711b80b3da0c!2sPiscina%20Comunale%20Coperta%20Enrico%20Meroni!5e1!3m2!1sit!2sit!4v1727274590307!5m2!1sit!2sit");
$('#indirizzo-mobile').attr('href', "https://maps.app../Eyo5AvC5ZLU2zKTw9");
}

// FINE SETTO MAPPA USCITE PRATICHE

$('#descrizioneEvento').html(data[0].description);
globalDescrizione = data[0].description;

$("#indirizzoEvento").html(data[0].address);
$("#paeseEvento").html(data[0].city);

$("#iscrizioneEvento").html(data[0].iscrizione);
if(data[0].iscrizione=="APERTA"){
$("#badge-iscrizione").removeClass( "badge-danger" );
$("#badge-iscrizione").addClass( "badge-success" );
$("#apriIscrizione").prop("disabled",false);
}else if(data[0].iscrizione=="CHIUSA"){
$("#badge-iscrizione").removeClass( "badge-success" );
$("#badge-iscrizione").addClass( "badge-danger"  );
$("#apriIscrizione").prop("disabled",true);
}

if(data[0].title.includes("scit")){
$("#apriIscrizione").hide();
}else{
$("#apriIscrizione").show();
}

$("#durataEvento").html(data[0].durata);

$("#sala").html(data[0].sala);

$("#lezioneSucccessiva").html(data[0].data_successiva);

$("#dataEvento").text(date);
$("#oraInizio").text(addZero(arg.event.start.getHours())+":"+addZero(arg.event.start.getMinutes()));
$("#oraFine").text(addZero(arg.event.end.getHours())+":"+addZero(arg.event.end.getMinutes()));

globalData = date+" "+addZero(arg.event.start.getHours())+":"+addZero(arg.event.start.getMinutes())+" - "+addZero(arg.event.end.getHours())+":"+addZero(arg.event.end.getMinutes());

$("#pdf_specifico").attr("href", "docs/"+data[0].pdf+".pdf");

$("#export-corso").attr("href", "/calendario-corsi/export.php?corso="+globalTitolo+"&data="+globalData);

// $("#lista-iscritti").attr("href", "/calendario-corsi/lista-iscritti.php?corso="+globalTitolo+"&data="+globalData);
$("#lista-iscritti").attr("href", "/calendario-corsi/lista-iscritti.php?corso="+globalTitolo+"&data="+data[0].dataOra+"&data2="+globalData); //NUOVO MODELLO DATA LISTA ISCRITTI
$("#linkIscrizione").attr("href", "/calendario-corsi/iscrizione.php?type=iscrizione&codice="+data[0].id+"&idRiferimento="+data[0].idRiferimento+"&data="+data[0].dataOra);

$("#pdf_specifico").attr("download", data[0].pdf+".pdf");
$('#pdf_specifico_span').text(data[0].pdf);
if(data[0].pdf=="no-file"){
$( "#pdf_specifico" ).hide();
}else{
$( "#pdf_specifico" ).show();
}

if(data[0].title=="Corso bagnini" || data[0].title=="Corso Bagnini" || data[0].title=="Corso Bagnini Piscina"){
$("#selezioneMinorenne").show(); //METTERE SHOW
}else{
$("#selezioneMinorenne").hide();
$("#rigaGenitore").hide();
}

if(data[0].title=="Patente nautica" || data[0].title=="Patente Nautica"  || data[0].title=="Patente nautica "){
$("#rigaNauticaPartecipazione").show(); //METTERE SHOW
}else{
$("#rigaNauticaPartecipazione").hide();
}

$("#exampleModal").modal();
}
});

/*$.ajax({
url:url+"calendar/getDateSuccessive.php",
type:"POST",
dataType: 'json',
data:{id:arg.event.id},
success: function(data1) {

for(let i = 0; i 

Подробнее здесь: [url]https://stackoverflow.com/questions/79188447/display-in-fullcalendar-title-and-description[/url]