Adding user to event title

Question

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:

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);

?>

It seems to work correctly with info.event.setProp("title") ... demo : https://codepen.io/ADyson82/pen/eYjbqwE . P.S. You don't need to write that in every `if` because the command is the same each time...just put it at the end. And also you should consider using a `switch` statement for readability, instead of the if/else blocks. Anyway I can't reproduce the issue so it's hard to help you. — ADyson, Feb 03 '23 at 10:22
I dont kno why I doesnt give u error. Even if I put `info.event.setProp("title")` only at the end as u suggest all my events doesn't change color — nano, Feb 03 '23 at 10:36
You must have done something different then, it's hard to know what, because the code you've posted so far is fine. Are you using the very latest release of fullCalendar 6. — ADyson, Feb 03 '23 at 10:39
I notice that If i keep my code (repeating for every case) and I switch from monthView to listView or dayView and go back to monthView it actually shows the name now — nano, Feb 03 '23 at 10:43
That's strange. It should do it the first time too. How are you loading the events into the calendar? — ADyson, Feb 03 '23 at 10:44
Is it all of the events which suffer from this, or maybe only the ones from a certain source? Or only the ones which are from the rrule...something like that? I'm just trying to see if we can narrow the problem down a bit. — ADyson, Feb 03 '23 at 10:55
Just the one from the PHP file. Also because all the cases mentions in the eventDiMount if statement are from there. The one with rrule are just static events that repeat yearly (just to be sure I tried remove this last source and still the same problem persist) — nano, Feb 03 '23 at 10:58

Popwers · Answer 1 · 2023-02-21T04:44:13.123

According to the doc you shoulder use the setProp method to modifies any of the non-date-related properties of an Event Object.

You could do it that way, and use a switch for a better readable code.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.1/index.global.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const calendarEl = document.getElementById('calendar');
      const buttonSwitch = document.getElementById('changeView');
      let initialisation = false;

      var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        events: [{
          title: 'Normali',
          start: '2023-02-12',
          extendedProps: {
            nomeUtente: 'USERNAME',
          },
          description: 'Lecture',
        }, ],
        eventDidMount: function(info) {
          if (!initialisation) {
            initialisation = true;

            const eventTitle = info.event.title;
            const extraPropsAuthor = info.event.extendedProps.nomeUtente;
            const newTitle = `${eventTitle} - ${extraPropsAuthor}`;

            let backgroundColor = null;

            switch (eventTitle) {
              case 'Normali':
                backgroundColor = '#FB6B4C';
                break;
              case 'Straordinarie':
                backgroundColor = '#C8FC0C';
                break;
              case 'Ferie':
                backgroundColor = '#EC1C28';
                break;
              case 'Malattia':
                backgroundColor = '#FFB404';
                break;
              case 'Permesso':
                backgroundColor = '#A0ACDC';
                break;
              case 'Smart':
                backgroundColor = '#08ACC4';
                break;
              case 'Trasferta':
                backgroundColor = '#00897B';
                break;
              case 'Assenza':
                backgroundColor = '#F8D2D7';
                break;
              case 'Altro':
                backgroundColor = '#5E35B1';
                break;
            }

            info.event.setProp('title', newTitle);
            info.event.setProp('backgroundColor', backgroundColor);
          }
        },
      });
      calendar.render();

      // Button event
      buttonSwitch.addEventListener('click', e => {
        calendar.view.type == 'dayGridMonth' ?
          calendar.changeView('listMonth') :
          calendar.changeView('dayGridMonth');
      });
    });
  </script>
</head>

<body>
  <button id="changeView">Switch</button>
  <div id="calendar"></div>
</body>

</html>

Hi! thnks for your answer, it makes my code more clean but still same issues: only shows nomeUtente after switching view (as in my gif) — nano, Feb 03 '23 at 12:34
@nano, did you try the `calendar.render()` to re-render it when you do the switching and showing the calendar ? — Popwers, Feb 03 '23 at 19:10
yes, still show the addition when I switch view. But I notice that if I switch for the second time, nomeutente duplicate and the events lost their color and return to the fullcalendar base one with the code you suggest me — nano, Feb 13 '23 at 09:37
I tried to figure out by adding a switch button to my example and I get the same problem. When the switch is made the calendar calls the `eventDidMount` event again. In your case, you have to make sure that the data is loaded before the initialization / creation of the calendar by using an async await function, I guess. Then you need to add a variable to prevent the `eventDidMount` event from being called again when the view is changed and prevent the new issue. — Popwers, Feb 21 '23 at 04:42
Sorry for the late answer. Okay, by reading the Docs i thought that could be the "problem", but I kinda new to this, how can i co something like that? — nano, Feb 28 '23 at 14:08

score 1 · Accepted Answer · answered Mar 03 '23 at 09:17

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:

Adding user to event title

2 Answers2