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
},

将日历分为半天时段而不是全天时段，在视图中引入时间成分，然后可以更精细地显示。

我还（可选）使用了slotLabelInterval和slotLabelFormat以将标头显示从使用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> 

Answer 2

我加了一点给你看。 我不会编写所有代码，但是它应该使您对从何开始有所了解。

 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, classNames: "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: 'e', title: 'Wong Ling', color: "#DA4453", start: "2019-09-04", end: "2019-09-06" } ], eventRender: function(info) { // option 1: if(info.event.classNames[0] == "HalfClass"){ info.el.setAttribute("style", "width: 105px;"); } //option 2: // set it by targeting the $(".HalfClass") directly. } }); calendar.render(); }); 

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>