Question

当前正在使用resourceTimelineDay模板，重新设定日历的日期以尝试建立工作计划程序。

我正在尝试做类似于time grid的事情，您可以在同一天重叠事件。目前，它们堆叠在下方并推动行的大小。仅通过对CSS值进行硬编码，这就是我所追求的目标的快速融合。

Person 1的活动在11/3/2020星期二之间整齐地堆叠-我在寻找什么-与2020年5月11日的Person 3堆叠在顶部

尽我最大的努力来阅读文档，但是我找不到任何允许它的内置设置（除非我错过了？）。这是否需要功能请求，或者日历功能中是否包含一些我们可以修改的功能？希望能够拖放现有事件和外部事件并使它们适当地堆叠

$ cat main.cpp
#define CAT(x, y) x##y
#define CHECK(x) CAT(0, x)

// usage

#define COND0 0
#define COND1 1

#if CHECK(COND)
#endif

#if CHECK(COND0)
#pragma message "defined 1"
#else
#pragma message "defined 0"
#endif

#if CHECK(COND1)
#pragma message "defined 1"
#else
#pragma message "defined 0"
#endif

$ g++ main.cpp
main.cpp:9:1: error: user-defined literal in preprocessor expression
    9 | #if CHECK(COND)
      | ^~~~~
main.cpp:15:17: note: ‘#pragma message: defined 0’
   15 | #pragma message "defined 0"
      |                 ^~~~~~~~~~~
main.cpp:19:17: note: ‘#pragma message: defined 1’
   19 | #pragma message "defined 1"
      |                 ^~~~~~~~~~~

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      left: "prev,next today",
      center: "title",
      right: "teamView"
    },
    initialDate: Date.now(),
    editable: true,
    droppable: true,
    drop: function(info) {
      info.draggedEl.parentNode.removeChild(info.draggedEl);
    },
    navLinks: false,
    dayMaxEvents: true,
    firstDay: 1,
    initialView: "teamView",
    views: {
      teamView: {
        type: "resourceTimelineDay",
        duration: {
          weeks: 1
        },
        slotDuration: {
          days: 1
        },
        buttonText: "Team View"
      }
    },
    slotLabelFormat: [{
      weekday: "short",
      day: "numeric",
      month: "numeric",
      year: "numeric",
      omitCommas: true
    }],
    resources: [{
        id: "1",
        clientId: 13,
        title: "Person 1"
      },
      {
        id: "2",
        clientId: 14,
        title: "Person 2"
      },
      {
        id: "3",
        clientId: 13,
        title: "Person 3"
      },
      {
        id: "4",
        clientId: 13,
        title: "Person 4"
      },
      {
        id: "5",
        clientId: 14,
        title: "Person 5"
      }
    ],
    events: function(fetchInfo, successCallback, failureCallback) {
      successCallback([{
          id: 1,
          resourceId: 1,
          title: "Event 1",
          start: "2020-11-03 17:00:00.000000",
          end: "2020-11-03 17:30:00.000000",
          description: null,
          extendedProps: {
            jobNumber: 3,
            clientName: "Client 1",
            clientId: 13,
            color: "#7ABCFF"
          }
        },
        {
          id: 2,
          resourceId: 1,
          title: "Event 2",
          start: "2020-11-03 17:00:00.000000",
          end: "2020-11-03 17:30:00.000000",
          description: null,
          extendedProps: {
            jobNumber: 4,
            clientName: "Client 2",
            clientId: 14,
            color: "#D37AFF"
          }
        },
        {
          id: 3,
          resourceId: 3,
          title: "Event 3",
          start: "2020-11-05 00:00:00.000000",
          end: "2020-11-05 00:00:00.000000",
          description: null,
          extendedProps: {
            jobNumber: 5,
            clientName: "Client 1",
            clientId: 13,
            color: "#7ABCFF"
          }
        },

        {
          id: 8,
          resourceId: 3,
          title: "Event 8",
          start: "2020-11-05 18:00:00.000000",
          end: "2020-11-05 18:00:00.000000",
          description: null,
          extendedProps: {
            jobNumber: 10,
            clientName: "Client 1",
            clientId: 13,
            color: "#7ABCFF"
          }
        },
        {
          id: 9,
          resourceId: 1,
          title: "Event 9",
          start: "2020-11-03 19:00:00.000000",
          end: "2020-11-03 19:00:00.000000",
          description: null,
          extendedProps: {
            jobNumber: 11,
            clientName: "Client 2",
            clientId: 14,
            color: "#D37AFF"
          }
        }
      ]);
    },
    loading: function(bool) {
      document.getElementById("loading").style.display = bool ? "block" : "none";
    },
    eventContent: function(eventInfo) {
      let content =
        '<div class="fc-content" style="color:navy;font-weight:bold;background-color:' +
        eventInfo.event.extendedProps.color +
        '">' +
        '<span class="fc-title">' +
        eventInfo.event.title +
        "</span><span></span><br />" +
        "<span>" +
        eventInfo.event.extendedProps.color +
        "</span><br />" +
        "<span>" +
        eventInfo.event.id +
        "</span><br />" +
        "</div>";
      return {
        html: content
      };
    }
  });

  calendar.render();
  document.getElementsByClassName("fc-timeline-event-harness")[0].style.top =
    "0";
  document.getElementsByClassName("fc-timeline-event-harness")[1].style.top =
    "0";
  document.getElementsByClassName("fc-timeline-event-harness")[2].style.top =
    "0";

  document.getElementsByClassName("fc-timeline-event-harness")[1].style.left =
    "130px";
  document.getElementsByClassName("fc-timeline-event-harness")[2].style.left =
    "154px";
});

资源时间轴日模板中的堆栈/重叠事件

0 个答案: