如何将Datetimepicker-Div嵌入Fullcalendar v4自定义按钮并显示自定义图标？

嘿，这问题我熟！FullCalendar v4的customButtons默认确实是生成标准按钮元素，但咱们可以通过自定义按钮的HTML内容，把DateTimePicker直接嵌进去，实现你要的橙色按钮关联日历的效果。下面是具体步骤和代码：

1. 修改CustomButtons定义，嵌入DateTimePicker结构 #

FullCalendar允许用html属性替代icon，直接把你的DateTimePicker div塞进按钮里。这样按钮渲染出来就会包含日历选择器的结构：

customButtons: {
  datetimepickerButton: {
    // 把你的DateTimePicker HTML直接放这里，调整下内联样式适配按钮
    html: `
      <div class='input-group date datepicker_format' id='monatswahl'>
        <input type='hidden' class="form-control" name='monatswahl' />
        <span style="width: 40px; cursor: pointer;" class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    `
  }
},
header: {
  // 记得把这个自定义按钮加到日历头部，比如右侧区域
  right: 'datetimepickerButton today prev,next'
}

2. 延迟初始化DateTimePicker #

因为FullCalendar是动态渲染按钮的，所以必须等日历渲染完成后再初始化DateTimePicker，不然找不到#monatswahl元素。用FullCalendar的renderComplete钩子来做这件事：

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

  const calendar = new FullCalendar.Calendar(calendarEl, {
    // 你的其他日历配置（比如事件源、视图等）
    customButtons: {
      datetimepickerButton: {
        html: `
          <div class='input-group date datepicker_format' id='monatswahl'>
            <input type='hidden' class="form-control" name='monatswahl' />
            <span style="width: 40px; cursor: pointer;" class="input-group-addon">
              <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        `
      }
    },
    header: {
      right: 'datetimepickerButton today prev,next'
    },
    renderComplete: function() {
      // 在这里初始化DateTimePicker，保留你原来的配置
      $('#monatswahl').datetimepicker({
        format: 'YYYY-MM', // 示例格式，换成你需要的
        viewMode: 'months',
        // 其他你的DateTimePicker配置...
      });
    }
  });

  calendar.render();
});

3. 样式调整，让整体看起来像橙色按钮 #

默认的DateTimePicker样式和FullCalendar按钮不匹配，加几行CSS让它们整合在一起，变成你想要的橙色按钮效果：

/* 自定义按钮的橙色背景 */
.fc-datetimepickerButton-button {
  background-color: #ff9800; /* 橙色 */
  border-color: #ff9800;
  color: white;
  padding: 0 8px;
}
.fc-datetimepickerButton-button:hover {
  background-color: #f57c00; /* 深橙色 hover效果 */
  border-color: #f57c00;
}

/* 去掉DateTimePicker的默认margin，适配按钮 */
.fc-datetimepickerButton-button .input-group {
  margin: 0;
  vertical-align: middle;
}

/* 调整日历图标的样式，让它和按钮更协调 */
.fc-datetimepickerButton-button .input-group-addon {
  border: none;
  background: transparent;
  color: white;
}

注意事项 #

• FullCalendar生成的自定义按钮类名是fc-[你的按钮名]-button，这里就是fc-datetimepickerButton-button，所以CSS要对应这个类。
• 如果你的DateTimePicker有自定义的事件监听（比如选择日期后触发日历刷新），直接保留原来的逻辑就行，不会受嵌入的影响。
• 要是不想把DateTimePicker完全嵌在按钮里，也可以把它放在按钮旁边，用CSS把两者的边框、背景合并，看起来像一个整体——不过嵌入按钮的方案更贴合你的需求。

内容的提问来源于stack exchange，提问作者hxrzxr