完整日历截断标题问题中的文本

Question

我在 Bootstrap 3 的 FullCalendar 3.3.1 中遇到了这个奇怪的问题，我有一个截断长标题文本的函数，它工作正常，但它会影响日历的行为，见下文：

我的代码：

// Truncate long title texts
    function truncate(str, max) {
      return str.length > max ? str.substr(0, max-1) + '…' : str;
    }
    // Get current time
    var d = new Date();
    var curtime = d.getHours()+":00:00";        
    // Calendar properties
    $('#calendar').fullCalendar({
        aspectRatio: 1.35,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listWeek'
        },
        scrollTime :  curtime,
        defaultView: "agendaWeek",
        editable: true,
        eventLimit: true,
        selectable: true,
        selectHelper: true,
        select: function(start, end) {
            if(start.isBefore(moment())) {
            alert('The date/time you selected is in the past!');
            } else {
                $('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
                $('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
                $('#ModalAdd').modal('show');
                // Initialize the DateRangePicker for event add modal
                $('input[name="endDate"]').daterangepicker({
                    singleDatePicker: true,
                    showDropdowns: true,
                    locale: { format: "YYYY-MM-DD" },
                    startDate: "<?php echo date('Y-m-d', strtotime('+2 days')); ?>",
                    minDate: "<?php echo date('Y-m-d', strtotime('+2 days')); ?>",
                    parentEl: "#endDate"
                });
            }
        },
        eventRender: function(event, element) {
            var cur30min = d.getTime() + (30 * 60 * 1000);
            if (usrStat == 1 && event.start > cur30min) {
                element.bind('click', function() {
                    $('#ModalEdit #id').val(event.id);
                    $('#ModalEdit #title').val(event.title);
                    $('#ModalEdit #room').val(event.room);
                    $('#ModalEdit #cat_id').val(event.cat_id);
                    $('#ModalEdit #tel').html(event.tel);
                    $('#ModalEdit #uname').html(event.uname);
                    $('#ModalEdit #eadd').html(event.eadd);                     
                    $('#ModalEdit').modal('show');
                    // Initialize the DateRangePicker for event edit modal
                    $('input[name="endDateEdit"]').daterangepicker({
                        singleDatePicker: true,
                        showDropdowns: true,
                        locale: { format: "YYYY-MM-DD" },
                        startDate: moment(event.dowend).format('YYYY-MM-DD'),
                        minDate: "<?php echo date('Y-m-d', strtotime('+2 days')); ?>",
                        parentEl: "#endDate"
                    });
                });
            }
            var title = truncate(event.title,20);
            element.find('.fc-title').html(title);
        },
        eventDrop: function(event, delta, revertFunc) { 
            edit(event);
        },
        eventResize: function(event,dayDelta,minuteDelta,revertFunc) { 
            edit(event);
        },
        events: [
        <?php 
        foreach($events as $event):             
            $start = $event['start'];
            $end = $event['end'];
            $color = "#aeaeae";
            $editable = "true"
            // Define the event information
            $event_dtls = "{";
            $event_dtls .= "id: '".$event['id']."',";
            $event_dtls .= "title: '".$event['title']."',";
            $event_dtls .= "start: '".$start."',";
            $event_dtls .= "end: '".$end."',";
            $event_dtls .= "room: '".$event['room']."',";
            $event_dtls .= "cat_id: '".$event['cat_id']."',";
            $event_dtls .= "tel: '".$event['tel']."',";
            $event_dtls .= "uname: '".$event['name']."',";
            $event_dtls .= "eadd: '".$event['eadd']."',";
            $event_dtls .= "color: '".$color."',";
            $event_dtls .= "approved: '".$event['approved']."',";
            $event_dtls .= "category: '".$event['category']."',";
            $event_dtls .= "editable: ".$editable;
            $event_dtls .= "},";
            echo $event_dtls; 
        endforeach; 
        ?>
        ]
    });

因此，它可以在日历视图中截断长文本，但是如果我添加一个事件，当我单击一个单元格时，该单元格不再像这里的图像那样突出显示：cell_highlighted

添加事件仍然有效，但它不再突出显示单元格。有什么想法吗？

Answer 1

出于我的目的，我想截断事件标题，这样它就不会溢出到其他单元格中。

  const truncateString = (s="", num) => {
    if (s.length <= num) {
      return s;
    }
    return s.slice(0, num) + "...";
  };
const cleanedBgEvents = rawBgEvents.map((e) => ({
      start: new Date(e?.start?.dateTime),
      end: new Date(e?.end?.dateTime),
      title:
        truncateString(e.subject, 12) || truncateString(e.summary, 12),
      display: "background",
    }));
// Pass these events to <FullCalendar events={cleanedBgEvents} /> Component