Javascript FullCalendar插件-在所有单元格中显示小时数？

我正在使用FullCalendar jQuery插件，我需要修改它。我的目标是在每一个单元格中，在每一天自动显示小时作为事件。我正在为我的应用程序创建一个在线注册系统，我需要这个功能。在用户点击任何一个小时并确认后，我想禁用该小时的点击

你可以在周一的图片上看到我想要实现的目标（但所有的日子）：

---

无需更改插件本身。只要充分利用所有可用的选项

如果您只是试图更改日历上显示的任何事件的内容，请向传递一个返回新DOM元素的函数。使用显示事件的

start

属性的格式化字符串。例如：

var calendarOptions = {
   // ...other options
   eventRender: function(event, element) {
     $(element).html(moment(event.start).format('h:mm'));
     return element;
   }
}

完成calendarOptions后，显然需要将其传递给fullCalendar：

$(calElement).fullCalendar(calendarOptions);

calendarOptions.events = myEvents;

---

如果要在每个单元格中显示事件，请首先为每个单元格增量生成一个事件数组。。。大概是这样的：

var myEvents = [];
var timeCursor = moment(startTime);
while (+timeCursor < +moment(endTime)) {
   var start = +timeCursor;
   timeCursor = timeCursor.add(timeIncrement,'minutes');
   var end = +timeCursor;
   myEvents.push({
       start: start, 
       end: end 
   });
}

---

最后，要处理对事件的单击，请向传递一个函数，该函数可以执行任何您想要的操作。例如，如果要跟踪已单击的事件，可能需要将其

开始时间

推送到数组中：

var clickedEvents = [];
calendarOptions.eventClick: function(calEvent, jsEvent) {
    if (clickedEvents.indexOf(calEvent.start) < 0) {
       clickedEvents.push(calEvent.start);
    } else {
      return false;
    }
}

（请确保设置

的样式。已在CSS中单击了
光标：不允许
和
不透明度：0.5
）

全日历岩石
 我试图使用@georgedyer代码，但我有一些问题：/
首先，我将向您展示它在我的MVC 4应用程序中的外观：

这是显示完整调用程序的我的视图（html）。这一点仅用于显示每个单元格的事件：

    //path to installed moment.js
    <script src="~/Scripts/moment.js"></script>
    <script>
    $(document).ready(function () {


        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultView: 'agendaWeek',
            editable: true,
            allDaySlot: false,
            selectable: true,
            slotMinutes: 15,


            events: myEvents,

            eventRender: function(event, element) {
                $(element).html(moment(event.start).format('h:mm'));
                return element;
            },

            eventClick: function (calEvent, jsEvent, view) {
                alert('You clicked on event id: ' + calEvent.start
                    + "\nSpecial ID: " + calEvent.someKey
                    + "\nAnd the title is: " + calEvent.title);

            },

            (...)

    });

    //HERE IS YOUR CODE ABOUT CREATING ARRAY
    var myEvents = [];
    var timeCursor = moment('2015-09-08');
    while (+timeCursor < +moment('2015-10-01'))
    {
        myEvents.push { start: timeCursor }
        timeCursor = timeCursor.add('15', 'minutes');
    }
    </script>

    <div class="container">
    <div id='calendar' style="width:65%"></div>
    </div>

//安装的moment.js的路径
$（文档）.ready（函数（）{
$（“#日历”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
defaultView:'agendaWeek'，
是的，
全天时段：错，
是的，
慢分钟：15，
事件：myEvents，
eventRender:函数（事件，元素）{
$（element.html（矩（event.start）.format（'h:mm'）；
返回元素；
},
eventClick:函数（calEvent、jsEvent、view）{
警报（'您单击了事件id:'+calEvent.start
+“\n特殊ID:”+calEvent.someKey
+“\n标题为：”+calEvent.title）；
},
(...)
});
//这是关于创建数组的代码
var myEvents=[]；
var timeCursor=力矩（'2015-09-08'）；
而（+timeCursor<+矩（'2015-10-01'））
{
myEvents.push{start:timeCursor}
timeCursor=timeCursor.add（'15'，'minutes'）；
}

我对一行代码有疑问，因为VisualStudio在这里显示有关分号的警告：
myEvents.push{start:timeCursor}
。
我试图将其更改为：
myEvents.push（{start:timeCursor}）
，错误消失，但仍然不起作用：/

我不知道这是怎么回事。运行此代码后，它只显示空的FullCalendar。我知道此代码与您的有点不同，但我认为这应该以相同的方式工作。请在此处寻求帮助

编辑：我认为
eventRender:
函数工作得很好，因为如果我自己创建一个事件，它会像应该的那样显示小时。所以问题只在于创建事件。我认为在我的代码中，我的
myEvents
数组位于错误的位置，当我在
events:myEvents
数组中调用它时，它没有任何项。
什么代码u使用？您尝试过什么？但这是默认显示…我从四天开始尝试更改此代码，现在我不知道如何使其工作，所以我问。@MadalinaTaina我不知道我是否清楚地写下了我想要做的事情：/Yes这是默认视图，但我希望事件自动生成，就像图片b上的前三个一样ut在每个单元格中，在渲染页面的每一天中。非常感谢您的时间！我想重点介绍您编写的关于在每个单元格中显示事件的部分。我还没有尝试过您的代码，因为我对jQuery完全是业余爱好者-我只是看了一些教程来了解它是什么，而且我完全相信我将在接下来的几天内测试您的解决方案：）（顺便说一下，您将非常清楚地解释所有问题）所以我想现在有人问我关于细节的问题：我有一些问题，因为我不确定它是否会像我预期的那样工作。你能告诉我数组是否会在每一天显示每个单元格的事件吗？我的意思是在本周和下一周等等？如果是这样，我认为在
startTime
参数中，我应该这样输入日期：
moment（'2014-05-01T12:00:00'）；
？关于
endTime
参数，我应该将其留空吗？很抱歉我的拼写错误：（但是，按照我的编码方式，
startTime
和
endTime
应该是字符串或数字，指示日历显示的开始和结束日期，而不是实际的时刻对象，因为我在代码中将它们传递给时刻构造函数。好的，再次感谢！我明天将在代码中检查它，并让这里知道它是如何显示的。）works:）georgedyer先生，如果您能抽出时间查看我对您帖子的回答，我将非常感激。我仍然无法将while循环创建的事件加载到我的日历中。我想可能我的代码（创建数组时）放错了位置所以它会造成问题或错误的日期格式。我不知道：/I我尝试了很多方法来解决这个问题，但不幸的是我不能。也许你会知道如何解决我的问题。
    //path to installed moment.js
    <script src="~/Scripts/moment.js"></script>
    <script>
    $(document).ready(function () {


        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultView: 'agendaWeek',
            editable: true,
            allDaySlot: false,
            selectable: true,
            slotMinutes: 15,


            events: myEvents,

            eventRender: function(event, element) {
                $(element).html(moment(event.start).format('h:mm'));
                return element;
            },

            eventClick: function (calEvent, jsEvent, view) {
                alert('You clicked on event id: ' + calEvent.start
                    + "\nSpecial ID: " + calEvent.someKey
                    + "\nAnd the title is: " + calEvent.title);

            },

            (...)

    });

    //HERE IS YOUR CODE ABOUT CREATING ARRAY
    var myEvents = [];
    var timeCursor = moment('2015-09-08');
    while (+timeCursor < +moment('2015-10-01'))
    {
        myEvents.push { start: timeCursor }
        timeCursor = timeCursor.add('15', 'minutes');
    }
    </script>

    <div class="container">
    <div id='calendar' style="width:65%"></div>
    </div>