[英]FullCalendar display event half of day (Event width)
I want to display the event start half of day and end of half day or full-day for few events . 我想显示活动的开始时间为半天,结束时间为半天或全天 。 Currently all event works full day in a month. 目前,所有活动都在一个月中全天运作。
At the same time is it possible to display event width based on start and end time? 同时可以根据开始和结束时间显示事件宽度吗?
I have tried below stack reference code. 我试过下面的堆栈参考代码。 Comment for further clarification. 发表评论以进一步澄清。
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>
One option using the built-in API is to set a shorter slot duration - this will give more space for the calendar to show the times of your events accurately. 使用内置API的一个选项是设置较短的广告位持续时间-这将为日历提供更多空间,以准确显示事件的时间。
slotDuration: {
"hours": 12
},
divides the calendar up into half-day slots instead of full-day ones, introducing a time component to the view which then allows a more fine-grained display. 将日历分为半天时段而不是全天时段,在视图中引入时间成分,然后可以更精细地显示。
I've also (optionally) used slotLabelInterval
and slotLabelFormat
to improve the header display from what it would default to with that slotDuration
setting, so it looks neater. 我还(可选)使用了slotLabelInterval
和slotLabelFormat
以将标头显示从使用slotDuration
设置时的默认显示提高到默认显示,因此看起来更整洁。
See https://fullcalendar.io/docs/date-display and https://fullcalendar.io/docs/date-formatting for documentation. 有关文档,请参阅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>
I added a bit for you to see. 我加了一点给你看。 I wont write all the code but it should give you an idea of where to start. 我不会编写所有代码,但是它应该使您对从何开始有所了解。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.