Fullcalendar 修改宽度事件答案

【问题标题】：Fullcalendar modify width eventsFullcalendar 修改宽度事件
【发布时间】：2018-05-01 08:09:38
【问题描述】：

需要帮助，我需要像这样修改事件宽度的事件宽度

当看到 2018 年 4 月 12 日的日视图时

`https://codepen.io/tonythanh/pen/ZoeMmY?editors=0010`
`http://jsfiddle.net/quigleydbillyp/h30jkpuj/2/`

PS：我可以将所有事件设置为相同的宽度吗？

【问题讨论】：

你的代码在哪里？你试过什么？
正如@Codeer 所说，您尝试过什么？什么不工作？请参阅stackoverflow.com/help/how-to-ask 获取有关如何提出好问题的建议。
刚刚更新@Codeer
寻求调试帮助的问题应包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example.
请在您的问题中发布相关代码，并详细说明什么不起作用。你得到什么行为而不是预期的行为？请参考 Rory 发布的链接来创建一个很好的问题，因为我很难关注你。

标签： javascript jquery calendar codepen

【解决方案1】：

您可以通过添加slotEventOverlap 并将其设置为false 来实现所需的行为。这将不允许事件重叠。

 $('#calendar').fullCalendar({
            header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },

         events: [
        {
            title  : 'event1',
            start  : '2018-05-01 02:30:00'
        },
        {
            title  : 'event2',
            start  : '2018-05-01',end : '2018-05-01 03:00:00'
        },
        {
            title  : 'event3',
            start  : '2018-05-15'
        }
    ],
    slotEventOverlap: false,
    eventRender: function (event, element, view) { 
        // event.start is already a moment.js object
        // we can apply .format()
        var dateString = event.start.format("YYYY-MM-DD");

        $(view.el[0]).find('.fc-day[data-date=' + dateString + ']').css('background-color', '#FAA732');
     }

});

Working JSFiddle

你可以在fullCalendardocumentation找到更详细的信息

【讨论】：

嗨，谢谢你的帮助，你能帮我把它变成一个日期选择器imgur.com/a/eyyRH3v 当我在这个日期选择器调用上更改日期时，将完整日历更改为 datepicked，@Codeer
不，抱歉，问题中没有提到。我刚刚回答了这个问题。 @karonrenta
嗨@Codeer你可以修改所有宽度的事件相同大小吗？
@karonrenta 你是什么意思？如果将它们并排放置，宽度是否相同？
@karonrenta 当事件重叠以使它们具有相同的宽度时，事件宽度已经被渲染。