将用户添加到事件标题

问题描述 投票：0回答：2

我正在基于 FC6 开发日历，我试图将创建该事件的用户添加到我的事件标题中。 这是我的信息。事件：

event details

nomeUtente 是我要添加到我的活动中的文本。

我在我的 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");
  }
}

它区分了不同类型的事件，这是目前的输出：

calendar

我也试过写这个来定标题：

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

但这就是它在日历中显示的内容：

second try

正确的做法是什么？

从 monthView 到 listView 再回到 monthView 显示 nomeUtente：

我如何加载我的事件： 
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"
            }
        }
    ],

这是我的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);

?>

javascript html fullcalendar fullcalendar-6
2个回答
0
投票

根据文档，您应该使用 setProp 方法修改 Event Object 的任何非日期相关属性。

你可以那样做，并使用 

switch
以获得更好的可读代码。

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

<head>
  <meta charset="utf-8" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

0
投票

最后我发现我可以像这样使用

EventContent
：

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

我得到了我想要的结果：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.