i have a problem with full calendar, i can’t display the description in a new line, currently i have created a title which is a concatenations of the title and the description stored in the database mysql, but it is messy, i want to display in the event block in one row the title and in one row the description
For example in the yellow event i want in the first line Primo Soccorso and in the second line Gruppo A….
Currently the data is load from json from php mysql code using 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"]
];
}
}
The js code for full calendar it is this
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.goo.gl/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://goo.gl/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://goo.gl/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.goo.gl/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.goo.gl/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 <= data1.length; i++) {
// alert(data1[i].dataEvento);
s = new Date(data1[i].start).toLocaleString('it-IT', options);
oraI = new Date(data1[i].start).getHours();
minutiI = new Date(data1[i].start).getMinutes();
oraF = new Date(data1[i].end).getHours();
minutiF = new Date(data1[i].end).getMinutes();
$("#successive").append(s+" 0"+oraI+":"+minutiI+" - "+oraF+":"+minutiF+"<br>");
$("#tmpDateEvento").val($("#tmpDateEvento").val()+s+" "+oraI+":"+minutiI+" - "+oraF+":"+minutiF+";");
$("#numero").val(data1.length);
$("#corsiSuccessivi").val($("#corsiSuccessivi").val()+data1[i].id+";");
}
}
});*/
$('#delete').on('click', function() {
if(confirm("Sei sicuro di voler cancellare l'evento?")) {
$.ajax({
url:url+"calendar/delete.php",
type:"POST",
data:{id:arg.event.id},
});
//close model
$("#modalSlideLeft").modal('hide');
//refresh calendar
calendar.refetchEvents();
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
location.reload();
}
// $('body').pgNotification({style:'simple',message:'Evento cancellato correttamente!',type:'success'}).show();
}
});
calendar.refetchEvents();
}
});
calendar.render();
});
Here the link https://corsi.gpserviziarco.it/calendario-corsi/
What i have to do to show the description
Thanks !