FullCalendar display event half of day (Event width)

Question

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> 

Answer 1

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.

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.

See https://fullcalendar.io/docs/date-display and https://fullcalendar.io/docs/date-formatting for documentation.

 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

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>