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

我加了一点给大家看看。我不会写所有的代码，但它应该让你知道从哪里开始。

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>

Answer 2

使用 built-in API 的一个选项是设置较短的时隙持续时间 - 这将为日历提供更多 space 来准确显示事件的时间。

slotDuration: {
  "hours": 12
},

将日历分成 half-day 个槽而不是 full-day 个槽，将时间组件引入视图，然后允许更多 fine-grained 显示。

我还（可选）使用 slotLabelInterval 和 slotLabelFormat 来改进 header 显示，从默认设置到 slotDuration 设置，所以它看起来更整洁。

有关文档，请参阅 https://fullcalendar.io/docs/date-display and 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>

FullCalendar 显示半天事件（事件宽度）

FullCalendar display event half of day (Event width)

html

javascript

css

jquery

fullcalendar