javascript - FullCalendar 显示半天事件(事件宽度)

Question

我想显示事件开始半天和半天结束或少数事件的全天。目前，所有事件都在一个月内全天进行。

是否可以同时根据开始和结束时间显示事件宽度？

我试过下面的堆栈引用代码。发表评论以进一步澄清。

eventAfterRender: function(event, element, view) {        
    var containerWidth = jQuery(element).offsetParent()
    .siblings("table").find(".fc-day-content").width();
    // half a day
    var elementWidth = parseInt(containerWidth / 2);
     // set width of element
    jQuery(element).css('width', elementWidth + "px");
}

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    plugins: [ 'interaction', 'resourceTimeline' ],
    header: {
      left: 'promptResource today prev,next',
      center: 'title',
      right: 'resourceTimelineMonth,resourceTimelineWeek'
    },
    aspectRatio: 1.5,
    displayEventTime: true,
    displayEventTime: true,
			displayEventEnd: true,
			timeFormat: 'h:mma',
    defaultView: 'resourceTimelineMonth',
    resourceLabelText: 'Rooms',
	editable: true,
    resources: [ {
        "id": "a", "title": "Auditorium A"
    }
    
    ,
    {
        "id": "b", "title": "Auditorium B"
    }
    
    ,
    {
        "id": "c", "title": "Auditorium C"
    }
    ,
	{
        "id": "e", "title": "Auditorium E"
    }    
    ,
    
    ],
   events: [
				{
					id: 1,
					className: "HalfClass",
					resourceId: 'a',
					title: 'Taufik1',
					start: "2019-09-03 06:00",
					end: "2019-09-05 12:00",
					description: '' 
				},
				{
					id: 2,
					resourceId: 'b',
					title: "Smith", 
					color: "#F6BB42",
					start: "2019-09-06",
					end: "2019-09-08"
				},
				{
					id: 3,
					resourceId: 'c',
					title: 'Austin',
					start: "2019-09-04",
					end: "2019-09-08",
					description: '' 
				},
				{
					id: 4,
					resourceId: 'd',
					title: 'Wong Ling',
					color: "#DA4453",
					start: "2019-09-04",
					end: "2019-09-06"
				}
				
			]
  });

  calendar.render();
});

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

<link href="https://fullcalendar.io/releases/core/4.2.0/main.min.css" rel="stylesheet"/>
<link href="https://fullcalendar.io/releases/timeline/4.2.0/main.min.css" rel="stylesheet"/>
<link href="https://fullcalendar.io/releases/resource-timeline/4.2.0/main.min.css" rel="stylesheet"/>
<script src="https://fullcalendar.io/releases/core/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/interaction/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/timeline/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/resource-common/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/resource-timeline/4.2.0/main.min.js"></script>


<div id="calendar"></div>

Answer 1

使用内置 API 的一个选项是设置较短的时段持续时间 - 这将为日历提供更多空间以准确显示事件时间。

slotDuration: {
  "hours": 12
},

将日历分成半天时段而不是全天时段，将时间组件引入 View ，然后允许更细粒度的显示。

我还(可选)使用 slotLabelInterval 和 slotLabelFormat 将 header 显示从默认设置改进为 slotDuration 设置, 所以它看起来更整洁。

参见 https://fullcalendar.io/docs/date-display和 https://fullcalendar.io/docs/date-formatting用于文档。

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    plugins: ['interaction', 'resourceTimeline'],
    header: {
      left: 'promptResource today prev,next',
      center: 'title',
      right: 'resourceTimelineMonth,resourceTimelineWeek'
    },
    aspectRatio: 1.5,
    displayEventTime: true,
    displayEventTime: true,
    displayEventEnd: true,
    timeFormat: 'h:mma',
    slotDuration: {
      "hours": 12
    },
    slotLabelInterval: {
      "hours": 24
    },
    slotLabelFormat: [{
        month: 'long',
        week: "short",
      }, // top level of text
      {
        weekday: 'narrow',
        day: 'numeric'

      } // lower level of text
    ],
    defaultView: 'resourceTimelineMonth',
    resourceLabelText: 'Rooms',
    editable: true,
    resources: [{
        "id": "a",
        "title": "Auditorium A"
      }

      ,
      {
        "id": "b",
        "title": "Auditorium B"
      }

      ,
      {
        "id": "c",
        "title": "Auditorium C"
      },
      {
        "id": "e",
        "title": "Auditorium E"
      },

    ],
    events: [{
        id: 1,
        className: "HalfClass",
        resourceId: 'a',
        title: 'Taufik1',
        start: "2019-09-03 06:00",
        end: "2019-09-05 12:00",
        description: ''
      },
      {
        id: 2,
        resourceId: 'b',
        title: "Smith",
        color: "#F6BB42",
        start: "2019-09-06",
        end: "2019-09-08"
      },
      {
        id: 3,
        resourceId: 'c',
        title: 'Austin',
        start: "2019-09-04",
        end: "2019-09-08",
        description: ''
      },
      {
        id: 4,
        resourceId: 'd',
        title: 'Wong Ling',
        color: "#DA4453",
        start: "2019-09-04",
        end: "2019-09-06"
      }

    ]
  });

  calendar.render();
});

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

<link href="https://fullcalendar.io/releases/core/4.2.0/main.min.css" rel="stylesheet" />
<link href="https://fullcalendar.io/releases/timeline/4.2.0/main.min.css" rel="stylesheet" />
<link href="https://fullcalendar.io/releases/resource-timeline/4.2.0/main.min.css" rel="stylesheet" />
<script src="https://fullcalendar.io/releases/core/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/interaction/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/timeline/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/resource-common/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/resource-timeline/4.2.0/main.min.js"></script>


<div id="calendar"></div>