Search code examples
javascripthtmlfullcalendarfullcalendar-6

Adding user to event title

I'm working on a calendar base on FC6 and I was trying to add to my event title the user that created the event. This is my info.event:

event details

and nomeUtente is the text I want to add to my event.

I tried this in my eventDidMount:

eventDidMount: function(info) {
  if (info.event.title == "Normali") {
    $(".fc-event-title").append(" - " + info.event.extendedProps.nomeUtente);
    info.event.setProp("backgroundColor", "#FB6B4C");
  } else if (info.event.title == "Straordinarie") {
    $(".fc-event-title").append(" - " + info.event.extendedProps.nomeUtente);
    info.event.setProp("backgroundColor", "#C8FC0C");
  } else if (info.event.title == "Ferie") {
    $(".fc-event-title").append(" - " + info.event.extendedProps.nomeUtente);
    info.event.setProp("backgroundColor", "#EC1C28");
  } else if (info.event.title == "Malattia") {
    $(".fc-event-title").append(" - " + info.event.extendedProps.nomeUtente);
    info.event.setProp("backgroundColor", "#FFB404");;
  } else if (info.event.title == "Permesso") {
    $(".fc-event-title").append(" - " + info.event.extendedProps.nomeUtente);
    info.event.setProp("backgroundColor", "#A0ACDC");
  } else if (info.event.title == "Smart Working") {
    $(".fc-event-title").append(" - " + info.event.extendedProps.nomeUtente);
    info.event.setProp("backgroundColor", "#08ACC4");
  } else if (info.event.title == "Trasferta") {
    $(".fc-event-title").append(" - " + info.event.extendedProps.nomeUtente);
    info.event.setProp("backgroundColor", "#00897B");
  } else if (info.event.title == "Assenza non retribuita") {
    $(".fc-event-title").append(" - " + info.event.extendedProps.nomeUtente);
    info.event.setProp("backgroundColor", "#F8D2D7");
  } else if (info.event.title == "Altro") {
    $(".fc-event-title").append(" - " + info.event.extendedProps.nomeUtente);
    info.event.setProp("backgroundColor", "#5E35B1");
  }
}

It made a distinction between the different type of events and this is the output at the moment:

calendar

I also tried to write this to set the title:

info.event.setProp("title", info.event.title + " - " + info.event.extendedProps.nomeUtente);

But this is what it shows in the calendar:

second try

What it could be the right way to do it?

From monthView to listView and go back to monthView shows nomeUtente:gif

How I load my events: 
eventSources: [
        {
          url: '../../resource/script/apps/calendar/load.php',
          method: 'POST',
          display: "block ruby",
          textColor: "black"
        },{
            url: '../../resource/script/apps/calendar/vacation.json',
            rrule: {
                freq: "yearly",
                dtstart: "2022-01-06"
            }
        }
    ],

and this is my load.php:

<?php

require_once "../../connection.php";

$data = array();
$query= sqlsrv_query($conn,"SELECT * FROM gestioneOre ORDER BY idAssenza"); 
while($result = sqlsrv_fetch_array($query)){
    $data[] = array(
        'idAssenza' => $result['idAssenza'],
        'title'     => $result['ename'],
        'start'     => $result['starts'],
        'end'       => $result['ends'],
        'nomeUtente'=> $result['nomeUtente'],
        'pausaPranzo'=> $result['pausaPranzo']
    );
}   
echo json_encode($data);

?>

Solution

  • And the end I found out I could use EventContent like this:

    eventContent: function(info) { 
   const title = info.event.title;
   const nomeUtente = info.event.extendedProps.nomeUtente;
   if (nomeUtente){
        return { 
            html: title + " - " + nomeUtente
        } 
   }
}

    And I had the result I wanted: event