单击时自定义按钮图标重复

Question

有趣的问题，但它一直让我抓狂。我有一个包含 FontAwesome 图标的自定义工具栏按钮。每次我单击任何工具栏按钮 (< > 今天月星期日) 另一个图标被添加到自定义按钮。

换句话说，如果点击查看上周，或从周视图更改为月视图，我会在自定义按钮上得到 2、3、4 等图标。

我会尝试添加图片来说明我的意思。我试过删除各种配置选项，但到目前为止没有什么能阻止额外的图标出现。

这是我的设置：

var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
  themeSystem: 'standard',
  headerToolbar: {
    left: 'prev,next today config',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  initialView: 'timeGridWeek',
  slotMinTime: '06:00:00',
  slotMaxTime: '21:00:00',
  navLinks: true,
  selectable: true,
  editable: true,
  dropable: true,
  eventStartEditable: true,
  eventResizableFromStart: true,
  eventDurationEditable: true,
  dayMaxEvents: true,
  eventDisplay: 'block',
  eventConstraint: {
    start: moment().format('YYYY-MM-DD'),
    end: '2100-01-01'
  },
  customButtons: {
    config: {
      icon: ' fa fa-cog',
      click: function() {
        window.location = 'calendar_options.html';
      }
    }
  },

这是一个完整的示例，我删除了所有不必要的代码。它仍然显示相同的行为。代码如下。

https://rstoeber.com/calendar/

我假设我定义自定义按钮的方式有问题，但我遵循了我发现的其他示例。

<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/solid.js" integrity="sha384-/BxOvRagtVDn9dJ+JGCtcofNXgQO/CCCVKdMfL115s3gOgQxWaX/tSq5V8dRgsbc" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/fontawesome.js" integrity="sha384-dPBGbj4Uoy1OOpM4+aRGfAOc0W37JkROT+3uynUgTHZCHZNMHfGXsmmvYTffZjYO" crossorigin="anonymous"></script>

<link href='lib/main.css' rel='stylesheet' />
<script src='lib/main.js'></script>
<script type='text/javascript'>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      themeSystem: 'standard',
      headerToolbar: {
        left: 'prev,next today config',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      initialView: 'timeGridWeek',
      customButtons: {
        config: {
          icon: ' fa fa-cog',
          click: function() {
            window.location = 'calendar_options.html';
          }
        }
      },
      events: [
            {
                'id': 9,
                'textColor': '#FFFFFF',
                'backgroundColor': '#AA2217',
                'title': 'Meet Doug at IBM building',
                'start': '2022-04-08 10:00:00',
                'end': '2022-04-08 11:00:00'
            }, {
                'id': 16,
                'textColor': '#FFFFFF',
                'backgroundColor': '#AA2217',
                'title': 'End of week party',
                'start': '2022-04-12 11:00:00',
                'end': '2022-04-12 12:00:00'
            }
      ]

    });

    calendar.render();
  });

</script>

Answer 1

我没有找到解决您问题的方法，但我有一个解决方法，将其添加到您的选项中，目前应该没问题：

datesSet: function( view, element ) {
        document.querySelectorAll('.fc-config-button svg:not(:first-child)').forEach((e) => {
          e.remove()
        })
      }

只是删除过多的图标 xD

Answer 2

---更新的答案

检查元素会让您认为 fullcalendar 正在使用 class 向您显示图标。它会尝试读取您提供的图标名称，然后将其添加到 HTML 内的 span 标签中。如果您直接在自定义按钮的图标中提供 font-awsome 图标，它将为用户在 window 中按下的每个按钮创建一个 SVG。（我认为原因是隐藏在 Fullcalendar 本身的 js 后面）在这种情况下，您可以通过添加额外的 js 行来手动操作它以使用 font-awsome.

document.addEventListener("DOMContentLoaded", function () {
  var calendarEl = document.getElementById("calendar");

  var calendar = new FullCalendar.Calendar(calendarEl, {
    themeSystem: "standard",
    
    headerToolbar: {
      left: "prev,next today config",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay"
    },
    initialView: "timeGridWeek",
    customButtons: {
      config: {
        icon: `cog`,
        click: function () {
          //window.location = "calendar_options.html";
          alert("Hi")
        }
      }
    },
    events: [
      {
        id: 9,
        textColor: "#FFFFFF",
        backgroundColor: "#AA2217",
        title: "Meet Doug at IBM building",
        start: "2022-04-08 10:00:00",
        end: "2022-04-08 11:00:00"
      },
      {
        id: 16,
        textColor: "#FFFFFF",
        backgroundColor: "#AA2217",
        title: "End of week party",
        start: "2022-04-12 11:00:00",
        end: "2022-04-12 12:00:00"
      }
    ]
  });

  calendar.render();
});


$(document).ready(() => {
  $(".fc-icon-cog").append('<i class="fas fa-cog"></i>');
})

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
};

#calendar {
  max-width: 1100px;
  margin: 40px auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/solid.js" integrity="sha384-/BxOvRagtVDn9dJ+JGCtcofNXgQO/CCCVKdMfL115s3gOgQxWaX/tSq5V8dRgsbc" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/fontawesome.js" integrity="sha384-dPBGbj4Uoy1OOpM4+aRGfAOc0W37JkROT+3uynUgTHZCHZNMHfGXsmmvYTffZjYO" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.0/main.min.js" integrity="sha256-PL1mKrYeZkM5SsJ5nydN6463HLkV918bgDdYL0I5Z+k=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.0/main.min.css" integrity="sha256-16PDMvytZTH9heHu9KBPjzrFTaoner60bnABykjNiM0=" crossorigin="anonymous">

<div id='calendar'></div>

---更新前

在研究文档和问题本身时，我注意到此代码片段中存在错误。

所述问题与 font-awsome 的使用有关。正如文档中明确表示的那样，当您使用标准主题时，您只有四个图标可供使用。作为参考，可以参考https://fullcalendar.io/docs/buttonIcons

请不要犹豫，在此 post 下对任何 follow-ups 发表评论。

单击时自定义按钮图标重复

Custom button icon duplicates on click

javascript

html

fullcalendar

font-awesome

fullcalendar-5

---更新的答案

---更新前